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 WooCommerce||Custom Shop page built with the WPBakery Page Builder|
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:
- Go to Toolset -> WooCommerce Views.
- Locate the Product archive template file section.
- Check the WooCommerce Views plugin default product archive template option.
- Go to Toolset -> WordPress Archive -> Add new and assign this template to “Products”.
- Scroll down to the Loop Output Editor.
- Click 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.
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
- 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.
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.
10. Now, you can use the WPBakery basic building blocks (Columns, Sections, and Elements) to build the content of your product entry:
The first text module (which includes the Product title with a link) has already been inserted using Toolset.
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:
- Insert a Tab Element.
- Click Fields and Views.
from the top of the screen:
- Locate the WooCommerce Views filter fields section.
- Choose the WooCommerce Product price field:
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:
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 (or any other archives) so that users can filter the products by custom fields and taxonomies.
To add a search to your Shop page:
- Scroll up the WordPress Archive that you just edited and open Screen Options
- Select Display the archive as a custom search, where the following boxes should be automatically checked: Custom Search Setting and Filter editor
- 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.
If you need assistance with using Toolset in combination with WPBakery Page Builder, please visit our professional support forum dedicated to this topic.