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.

Default WooCommerce template
Default WooCommerce template

Your custom template created with Divi and Toolset
Your custom template created with Divi and Toolset

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:

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

Switching from WooCommerce default templates to Toolset templates
Switching from WooCommerce default templates to Toolset templates

Creating a new template for single-product pages

  1. Go to Toolset -> Dashboard.
  2. Locate the row for Products.
  3. In the Template column, click Create Content Template.

Creating a new template for single-product pages
Creating a new template for single-product pages

Designing the content area using Divi

You are taken to the Content Template editor.

  1. Click on the Edit with Divi Builder button to edit this template.
  2. Click on the blue Edit with Divi Builder button to start editing.

The Content Template editor will now be replaced with the Divi editor.

Divi Editor in a Content Template
Divi Editor in a Content Template

  1. 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.

  1. Follow these steps:
    1. Insert Column(s)
    2. Insert a new module.
    3. Locate the Text module and click on it.
    4. Click the Fields and Views button.
    5. Locate the WooCommerce section.
    6. Choose the Product price field to insert it.

Inserting the Price field
Inserting the Price field

The Price field will be inserted as a shortcode.

Hint: Scroll down the Text module Settings dialog and update the Admin Label to give your text field a more meaningful name (e.g., “Product price”). This will help you to identify which product field is hiding under which text module at a later stage, when you have more fields added.
  1. Repeat the steps above to insert other WooCommerce fields.
Hint: 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 to add custom fields to your products.

This is how the Content Template in our example looks:

Content Template for single product pages
Content Template for single product pages

  1. 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