Toolset allows you to design custom WooCommerce templates for single-product pages using the WPBakery Page Builder (formerly Visual Composer). This means that all your products will be displayed using a single uniform design.

Switching from WooCommerce default templates to Toolset templates

First, you need to disable the WooCommerce default templates. Please ensure that you have the WooCommerce Views plugin installed in your site.

    1. Go to Toolset -> WooCommerce Views.
    2. In the Product Template File section, select WooCommerce Views plugin default single product template, as shown in the figure below.
    3. Save all settings.

 WPBakery Toolset
Selecting the right settings

 

Designing the template with the WPBakery Page Builder

 

    1. Go to Toolset -> Dashboard.
    2. Click Create Content Template from the Products row:

WPBakery Toolset
Toolset Dashboard

 

    1. You will be taken to the Content Template Editor. Click the Edit with WPBakery Page Builder button.

Custom post types Template Toolset and WPBakery
Design the Content Template with WPBakery Page Builder

 

Use the WPBakery Page Builder (Sections, Columns, and Elements) to build the content of your product template.
To insert WooCommerce fields, you can use either the Text Block or any other Elements.
As an example, let’s insert a Product image:

    1. Define the number of Column(s) you need.
    2. Insert a Text Block.
    3. Click the Fields and Views button.
    4. Locate the WooCommerce section.
    5. Choose the Product image field to insert it, as shown in the figure below:

WPBakery Toolset
Choosing the field to insert

 

The Product Image field will be inserted as a shortcode:

WPBakery Toolset
Inserting the product shortcode in the Text Block

 

Repeat the above steps to insert more WooCommerce fields.
To insert the product title, choose Post title. You can also display custom fields and custom taxonomies, if you have any. Check the Adding Custom Fields and Taxonomies to Products tutorial to see how custom fields can be added to your products.

This is how the Content Template for a single product looks like:

WPBakery Toolset
Result of my product on the front-end, built with WPBakery Page Builder.

 

All products on your site will be displayed using exactly the same template that was created using the WPBakery Page Builder. If you tweak this template later, the changes will be reflected in all product listings.

 

Toolset can also be used to create comparison product grids, customize the profile page, and much more. Visit our dedicated page to learn more about developing custom WooCommerce sites with Toolset.

What’s next?

Next Create templates for WooCommerce Shop page with WPBakery Page Builder

Need help?

If you need assistance with using Toolset in combination with WPBakery Page Builder, please visit our professional support forum dedicated to this topic.