Toolset allows you to design custom WooCommerce templates for single-product pages using the Divi Builder. This involves creating a single design for all your products. If you ever need to tweak this design, you can simply edit the template, and the changes are automatically applied to all products built using that template.
Switching from WooCommerce default templates to Toolset templates
To create a custom template for your product pages, you first need to disable the WooCommerce default templates.
Make sure you have the WooCommerce Views plugin installed in your site. To do so, follow these steps:
- Go to Toolset -> WooCommerce Views.
- In the Product Template File section, select WooCommerce Views plugin default single product template.
- Save all settings.
Creating a new template for single-product pages
- Go to Toolset -> Dashboard.
- Locate the row for Products.
- In the Template column, click Create Content Template.
Designing the content area using Divi
You are taken to the Content Template editor.
- Click on the Edit with Divi Builder button to edit this template.
- Click on the blue Edit with Divi Builder button to start editing.
The Content Template editor will now be replaced with the Divi editor.
- Use the Divi basic building blocks (Sections, Rows, Columns, and Modules) to build the content of your product template.
To insert WooCommerce Product fields, you will be using the Divi Text module most often, but you can also use other Divi modules and insert the WooCommerce fields in those where it makes sense.
As an example, let us insert Product price to demonstrate the complete workflow of inserting a WooCommerce field into your Divi editor.
- Follow these steps:
- Insert Column(s)
- Insert a new module.
- Locate the Text module and click on it.
- Click the Fields and Views button.
- Locate the WooCommerce section.
- Choose the Product price field to insert it.
The Price field will be inserted as a shortcode.
- Repeat the steps above to insert other WooCommerce fields.
This is how the Content Template in our example looks:
- Save your changes and return to the Toolset Content Template editor.
From this moment on, all products in your site will have the same content template that was built using the Divi Builder. If you tweak this template later, the changes will be reflected in all the products.
In conclusion, we used the Divi Builder to create a template (left) and the front-end custom post (right) without any extra coding.
What’s next?
Next Creating a custom Shop page for products using Divi Builder and Toolset