Shop/Category Page Templates
Divi BodyCommerce allows you to customise the shop/category page templates of WooCommerce using the Divi builder and our custom modules.
Below is a video that demonstrates how to use the category page template in BodyCommerce.
Steps to create a shop or category template:
The shop page is your "homepage" of your eCommerce website. On this page you can have modules such as a product slider, product search and/or a grid of all the products on your store.
Do not create the shop page on the pages section of WordPress. You need to create this page in the Divi library and then assign it in our settings page.
You do not have any specific page for your categories - these get generated automatically for you. You, therefore, create a template that these all look at.
1. Create a custom layout in the Divi Library
Go to Divi > Divi Library and create a new layout. Choose "layout" and call this layout whatever you want and assign it to a category if you wish (for your own personal organisation).
Now here you will need to let your creative juices flow in terms of how you want the page to look. We have added some modules that will help you move or not show various elements of the default WooCommerce template. Below is a visual of the default WooCommerce template and what each section is.
- Product loop (DB Loop Archive)
You can now see how the default template can be broken down and how you can use our modules to manipulate the layout as you want. You can use a mixture of Divi, BodyCommerce and other plugin modules to create your desired template. See all modules
You can see a full list of all our modules and what you can use on the shop page here.
The minimum requirements on this page would be to add the DB Loop Archive - you can read how to use this module here. You can add modules such as the "DB Category Title/Header" which will add the category name at the top as well as the image and description if you want.
2. Assign this layout to overwrite WooCommerce.
Now once you have created the layout, go to Divi Engine > BodyCommerce > Shop/Category Pages. Here you will see the following settings:
- Select Shop Template: This is where you assign this layout you just created.
- Select Category Template: This is where you assign the layout you create for the category pages.
- Different Category Templates Per Category?: This is where it gets interesting. You can create different layouts for different categories. So for category A you can have one layout and then on category B you can have another. You specify these below next to the category name.