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.
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.
- Go to Toolset -> WooCommerce Views.
- Locate the Product archive template file section.
- Check the WooCommerce Views plugin default product archive template option.
To create a custom Shop page, you need to use Toolset and create a WordPress Archive for Products.
- Go to Toolset -> Dashboard.
- Locate the row for Products.
- In the Archive column, click Create archive.
- Stick to the defaults in the dialog that pops up and press Create WordPress Archive.
You have now been taken to the Edit WordPress Archive screen, where you design your Shop page.
- Scroll down to the Loop Editor section.
- Click Loop Wizard.
- 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.
- 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.
- Click Add field.
- Select Post title with a link.
- Make sure that you have the Use a Content Template to group the fields in this loop field checked.
- Click Finish.
- 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.
- Press the Update button.
- Click the Divi Builder button.
- Click the Edit with Divi Builder
- On the Edit Content Template screen, click Edit with Divi Builder.
The Edit Content Template screen opens in a new browser tab. Now, you can 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.
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:
- Insert a new Text module.
- Click on Fields and Views.
- Locate the WooCommerce section.
- 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:
Feel free to tweak your product appearance by applying custom styling. The Divi Design tab might help.
- Press Update to save your changes.
- Switch back to the tab of your browser that displays your WordPress Archive edit screen and click Save all changes at once.
Visit your Shop page on the front-end. It should look similar to the following screen:
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:
- Scroll up the WordPress Archive screen to the top and open the Screen Options.
- Check Custom Search Setting and Filter editor.
- Scroll down to the Filter Editor and add your filters and the submit button, as explained in detail in the Building Custom Searches page.