Skip Navigation

Creating Custom Templates for WooCommerce Products

In this lesson, you will learn how to design custom templates for WooCommerce products from scratch, using Toolset's visual builder.

Single Product page designed with Toolset
Single Product page designed with Toolset

The benefit of using Toolset is in the infinite flexibility. You have full control over the design and content of the product templates.

Your custom WooCommerce product templates can include:

  • All the standard WooCommerce fields like product price, rating, and description
  • Custom fields and taxonomy
  • Related products, upsells, cross-sells and other related posts (via post relationships)

Switching from WooCommerce to Toolset templates

By default, the appearance of a single-product page is determined by the WooCommerce template and the theme you use. This is why you first need to switch your site to use the Toolset template for single-product templates.

Make sure you have the Toolset WooCommerce Blocks plugin active. You’ll also need Toolset Types and Toolset Blocks plugins.

  1. Go to Toolset → WooCommerce Blocks.
  2. In the Product Template File section select the WooCommerce Blocks plugin default single product template option.

How to Design Product Templates

  1. Go to Toolset Dashboard and click the Create Content Template button in the Products row.
  2. Use the WordPress Block Editor to design your template.
  3. Insert the Toolset Heading and Single Fields blocks with dynamic sources to display your product title, content, custom fields and taxonomies.
  4. Choose blocks from the Toolset WooCommerce section to display WooCommerce elements such as the Add to Cart Button, Product Price, Rating, and more. You will notice that all Toolset WooCommerce blocks allow you to select a custom or native output type.
Standard elements of a single-product page
Toolset WooCommerce Blocks section
Toolset WooCommerce Blocks section

With Toolset, you can create a completely custom list of related products. These products will have something in common with the currently displayed one.

For example, you can easily create a custom list that display related products, upsells, or cross-sells.

To create a custom list of related products, you need to use a View inside your single-product template:

  1. Go to Toolset →  Dashboard and in the Products row, click to open your template for editing.
  2. Insert the View block.
  3. In the wizard, when selecting the content to display, select related products, upsells, or cross-sells.

Read the dedicated lesson to learn more about creating a custom list of related products.

Displaying a Cart Message

You should always display the WooCommerce Cart Message in your templates. It displays the “<Product X> has been added to your cart” message after user adds a product to the cart.

This message helps to confirm to users that a certain action they took actually happened.

To display this message, insert the Cart Message block into your template for products. You can also customize some of its options and appearance.

 

Design Tips for WooCommerce Product Templates

All Toolset blocks offer styling controls for typography, colors, margins and paddings. Besides these standard styling controls, Toolset offers a number of blocks which will help you design beautiful, responsive product templates.

Main Toolset Block Used in this Lesson

Display Add to Cart button