Toolset allows you to customize the WooCommerce Shop Page using the Divi Builder.

Using Toolset, you can display your products as a grid, list, table, and in any other way you choose. You use the Divi Builder to design the layout of a single product entry with product fields of your choice. The image on the right illustrates this.

Default Shop page
Default Shop page

Custom Shop page built with Toolset and Divi. Divi Builder has been used to design a single product entry.
Custom Shop page built with Toolset and Divi. Divi Builder has been used to design a single product entry.

Switching to WooCommerce Views templates for product archives

By default, the Shop page is controlled by the archive template coming from WooCommerce. We are going to disable it and switch to Toolset templates.

Make sure you have the Toolset WooCommerce Views plugin installed.

  1. Go to Toolset -> WooCommerce Views.
  2. Locate the Product archive template file section.
  3. Check the WooCommerce Views plugin default product archive template option.

Switching to WooCommerce Views templates for product archives
Switching to WooCommerce Views templates for product archives

Creating a custom template for the Shop page

To create a custom Shop page, you need to use Toolset and create a WordPress Archive for Products.

When using Divi and Toolset together, you should never edit the Shop page directly and use the Divi Builder there. Instead, make sure to use the following steps.
  1. Go to Toolset -> Dashboard.
  2. Locate the row for Products.
  3. In the Archive column, click Create archive.

Creating a custom template for the Shop page
Creating a custom template for the Shop page

  1. Stick to the defaults in the dialog that pops up and press Create WordPress Archive.

Enabling Divi Builder for the Shop page

You have now been taken to the Edit WordPress Archive screen, where you design your Shop page.

Edit WordPress Archive screen
Edit WordPress Archive screen

  1. Scroll down to the Loop Editor section.
  2. Click Loop Wizard.
  3. In the How do you want to display the loop? dialog, you determine whether your products will be displayed in a grid, a table, a list, or in any other way.

In our example, we are going to display the products in a two-column grid, so let us choose Table-based grid and set the number of columns to 2. Click Next.

  1. In the Select the fields to include in the loop dialog, you select fields that appear in a single product entry (in a grid cell in our example). We are going to select only one field now, and we will add all other fields later using the Divi editor.
    1. Click Add field.
    2. Select Post title with a link.
    3. Make sure that you have the Use a Content Template to group the fields in this loop field checked.
    4. Click Finish.

Make sure that you have the Use a Content Template to group the fields in this loop field checked
Make sure that you have the Use a Content Template to group the fields in this loop field checked

  1. Scroll down to the Content Template.

In this editor, you design the content of a single product entry. We are going to design that part using the Divi editor.

  1. Press the Update button.
It is important to save your archive before switching to the Divi editor. If you leave it for later, you might accidentally override the changes you did in Divi.

  1. Click the Divi Builder button.

  1. Click the Edit with Divi Builder

    Edit with Divi Builder
    Edit with Divi Builder

    .

  1. On the Edit Content Template screen, click Edit with Divi Builder.

Designing the Shop page

The Edit Content Template screen opens in a new browser tab. Now, you can design the product entry using the Divi Builder.

Design the product entry using the Divi Builder
Design the product entry using the Divi Builder

Use the Divi basic building blocks (Sections, Rows, Columns, and Modules) to build the content of your product entry.

To insert WooCommerce Product fields, you will be using the Divi Text module for most of the time, but you can also use other Divi modules and include the WooCommerce fields in those, where it makes sense.

The first text module (which includes the Product title with a link) has already been inserted.

Use the Divi Text module, and then click the Field and Views button to insert other fields.
For example, to add the Product price field:

  1. Insert a new Text module.
  2. Click on Fields and Views.
  3. Locate the WooCommerce section.
  4. Choose the Product price field to insert it.

Perform similar steps to insert other product fields.

This is how your Content Template may look like:

Product entry created with Divi
Product entry created with Divi

Feel free to tweak your product appearance by applying custom styling. The Divi Design tab might help.

  1. Press Update to save your changes.
  1. Switch back to the tab of your browser that displays your WordPress Archive edit screen and click Save all changes at once.

Save all changes
Save all changes

Visit your Shop page on the front-end. It should look similar to the following screen:

Shop page on the front-end
Shop page on the front-end

Beyond the basics — adding a custom search

Custom search
Custom search

You can also add a custom search to your Shop page (and any other archives) so that users can filter the products by custom fields and taxonomies.

To add a search to your archive:

  1. Scroll up the WordPress Archive screen to the top and open the Screen Options.
  2. Check Custom Search Setting and Filter editor.
  3. Scroll down to the Filter Editor and add your filters and the submit button, as explained in detail in the Building Custom Searches page.

Learn how to create a custom single-product page with Divi Builder and Toolset