In this lesson, you will learn how to design custom templates for WooCommerce products from scratch, using Toolset's visual builder.
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)
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.
- Go to Toolset → WooCommerce Blocks.
- In the Product Template File section select the WooCommerce Blocks plugin default single product template option.
- Go to Toolset → Dashboard and click the Create Content Template button in the Products row.
- Use the WordPress Block Editor to design your template.
- Insert the Toolset Heading and Single Fields blocks with dynamic sources to display your product title, content, custom fields and taxonomies.
- 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.
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:
- Go to Toolset → Dashboard and in the Products row, click to open your template for editing.
- Insert the View block.
- 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.
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.
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.
- Use the Toolset Grid block to create columns (how to design grids and columns).
- Use the Toolset Conditional block to display some blocks according to logic conditions that you define (how to define conditional display).
- Use the Toolset Container block to control the background, paddings and margins for groups of blocks.
- Enabling Additional WooCommerce Fields in Product Forms
- Adding Toolset Blocks to the WooCommerce My Account Page
- Selecting WooCommerce Blocks Output Type
- Creating a Custom List of WooCommerce Products for a Taxonomy
- Building a Custom WooCommerce Shop Page
- Creating a Page with a Custom WooCommerce Product Search
- Creating a Custom List of Related WooCommerce Products
- Adding a Custom Taxonomy to WooCommerce Products
- Creating a Custom WooCommerce Product Slider
- Adding Custom Fields to WooComerce products
- Creating Front-end Forms for Adding WooCommerce Products
- Charge users for registering premium accounts
- Charge users for submitting content
- Custom WooCommerce Roles and Admin Capabilities