WooCommerce has a default Shop page and the Toolset allows you to customize it using the WPBakery Page Builder (formerly Visual Composer).

You can display the list of your products on the Shop page as a grid, list, table, etc. You can use the WPBakery Page Builder to design the layout of a single product entry with all the product fields of your choice.

 

Default Shop page generated by WooCommerceCustom Shop page built with the WPBakery Page Builder
WooCommerce Toolset and WPBakery Page BuilderWooCommerce Toolset and WPBakery Page Builder

 

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 the Toolset templates.

Make sure you have the Toolset WooCommerce Views plugin installed and then follow these steps:

  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.

WPBakery Page Builder - Toolset WooCommerce

  1. Go to Toolset -> WordPress Archive -> Add new  and assign this template to “Products”.

Enabling WPBakery for the Shop page

You will be directed to the Edit WordPress Archive screen where you will design your Shop page. As you can see, the “Products” archive is already selected.
WPBakery Page Builder - Toolset WooCommerce

    1. Scroll down to the Loop Output Editor.
    2. Click on the Loop Wizard Button.

WPBakery and Toolset
Clicking on the loop wizard button

3. In the How do you want to display the loop? dialog, you can select if you want your products to be displayed as unformatted, using a Bootstrap grid, a table, or any other way. Let’s display the products in a two-column grid; to do this select Bootstrap grid and set the number of columns to 2. Then, click Next.

WPBakery and Toolset
Selecting 2 columns only for our Shop Page

 

4. In the Select the fields to include in the loop dialog, you need to select the fields that will be displayed for every product on the list.

5. We are going to select only one field now and we will add all other fields later using the WPBakery Page Builder

      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.

    WPBakery and Toolset
    Important setting: select Use a Content Template

    1. Click Finish.

6. Scroll down to the Content Template section. In this editor, you can design the way in which single products are displayed on your Shop page. We are going to design that part using the WPBakery Page Builder.

7. Click on the Update button.WPBakery and Toolset

8. Launch the WPBakery Page Builder and start editing the Content Template:WPBakery and Toolset

9. Then, click on the Edit with Visual Composer button:WPBakery and Toolset

10. Now, you can use the WPBakery basic building blocks (Columns, Sections, and Elements) to build the content of your product entry:

WPBakery Page Builder - Toolset WooCommerce
To insert WooCommerce Product fields, you will be using the WPBakery Page Builder Text Blocks for most of the time but you can also use other WPBakery Page Builder elements such as the Tab element.

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

Designing the Shop page

Now you can use the WPBakery Page Builder Text Blocks to start inserting the WooCommerce fields. Click on the Field and Views button to insert fields.

For example, to add the Product price field:

    1. Insert a Tab Element.
    2. Click Fields and Views.

from the top of the screen:

Fields and Views menu from the Top bar

 

  • Locate the WooCommerce Views filter fields section.
  • Choose the WooCommerce Product price field:

 

Choosing WooCommerce Product Price

 

Perform similar steps to insert any other product fields such as image feature and ratings etc. depending on what you want to list on your Shop page and which elements you want to use.

This is how your Content Template will look like:

Template for each product of my Shop Page

When you are done, click on the Save all sections at once button to save your changes.WPBakery and Toolset

 

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

WooCommerce Toolset and WPBakery Page Builder
New Shop page built with WPBakery Page Builder with only 2 columns

 

Beyond the basics – adding a custom search to the Shop page

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

WPBakery Page Builder - Toolset WooCommerce
Custom search for WooCommerce using Toolset

To add a search to your Shop page:

  1. Scroll up the WordPress Archive that you just edited and open Screen Options
  2. Select Display the archive as a custom search, where the following boxes should be automatically checked: Custom Search Setting and Filter editorWPBakery Page Builder - Toolset WooCommerce
  3. Scroll down to the Filter Editor and add your filters and click the submit button, as explained in detail on the Building Custom Searches page.

What’s next?

Next Creating templates for WordPress archive pages using the 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.