Product Page Template
Divi BodyCommerce allows you to customise the product page template of WooCommerce using the Divi builder and our custom modules.
Below is a video that demonstrates how to use the product page template in BodyCommerce.
Steps to create a custom product page template:
- Create a custom layout in the Divi Library
- Assign this layout in Divi BodyCommerce's settings
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.
- Breadcrumbs (DB Pro Breadcrumbs)
- Gallery (DB Pro Gallery)
- Title (DB Pro/Loop Product Title)
- Price (DB Pro/Loop Price)
- Short description (DB Pro/Loop Short Description)
- Variation add to cart, this will look different for a simple product (DB Pro/Loop Add To Cart)
- Product meta information (DB Pro Meta)
- Tabs (DB Pro Tabs). The tabs consist of the description, additional information and reviews. Each of these has its own modules so you can show them not in tabs if you want. These are DB Pro Content, DB Pro Additional Information and DB Pro Reviews respectively.
- Related products (DB Pro Related Products)
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 product page here.
2. Assign this layout to overwrite WooCommerce.
Now once you have created the layout, go to Divi Engine > BodyCommerce > Product Page. Here you will see the following settings:
Select Main Product Page Template: This is where you assign this layout you just created. This will be your default template.
Make the Product Page Fullwidth?: If you want to make the page full width so that you can use the Divi fullwidth modules, enable this.
Different Product Templates Per Category?: This is where it gets interesting. You can create different layouts for different categories. So for all products in category A will have a different layout to category B. Below this will have a list of all your categories, assign a template to the ones you want to overwrite the main default template.
Product Page overrides: You can go even further and on the product page itself there is a setting to specify the layout you want to use for each individual product.