The WooCommerce Builder plugin gives you full control over product pages. In a few clicks, you can change the design of ALL of your product pages at once. You can find all the options under your admin dashboard -> Wc Builder -> Products tab.
Product layout options
The plugin gives you 3 levels of control:
The general default layout
One layout to be used for all of the products at once so you won’t waste your time building a layout for each product you have. No matter how much products you have; hundreds, thousands or just a few.
Applying this layout is really simple and you don’t have to modify any products at all, just: 1- build a layout in Divi Library and 2- select this layout as the general default layout and you are done, simple, right?
Now, all your products are completely different than before, they are more appealing and modern.
Product layouts based on their category
The general default layout is great, it applies one layout to all the products at once but what if you want for the products from a specific category – music for example – to look different?
We have got you covered! You can: 1- build another layout in Divi Library and 2- select that layout for this – music – category, that’s it!
Now, all of your products are using the general default layout except the products published under the music category, they have their own layout.
A specific layout for a specific product
Let’s review, all your products are using the general default layout. The Music products are using their own layout that overrides the general default one.
But what if you want for a single product to have its own layout that is different than the general default layout and the category layout?
Well, you have the option to do that just: 1- build another layout in Divi Library and 2- on the editing page of that product, select that layout to be used for it, done!
Build a layout from scratch
Now, let’s see how we can build a product layout from scratch and what modules you need to use.
You have 2 places where you can build the product layout: Divi Library and on the product description builder. The recommended place is to build in Divi Library.
Psst! you must know the basics of using Divi Builder, you can read this article as a start and you can always explore all Divi’s documentation.
Build in Divi Library
Get started
1- Go to your admin dashboard -> Divi -> Divi Library.
2- At the very top, click “Add new,” a new layout popup will open. Here you can set the layout name and the layout type.
You can name the layout whatever you want but make sure you select “Layout” as the layout type. And then, click the “Submit” button.
3- Divi Builder will open, you can use the back-end builder or the front-end build, it’s completely up to you.
But for the Product data like the title, description, price… to be displayed on the front-end, you will need to add the product modules to the layout.
Product modules
WooCommerce Builder plugin comes with a lot of product modules, a module for every piece of the page so you can design it as you like.
Here are the most important modules you need to add to your product layout:
1- Woo Notices.
This is a very important module to add to every WooCommerce layout you build using the WooCommerce Builder plugin. This module displays a variety of messages from WooCommerce like when a product is added to the cart or there is no enough stock of a specific product and so on.
This module is required for all WooCommerce pages like the Shop, my account… not just the product pages.
You can place this module anywhere but it is recommended to add it to the top of the layout so it’s very obvious to your clients.
2- Woo Product Title.
Of course, you need to display your product title! this module will add it to your layout.
3- Woo Product Price.
If the product is a simple product, its price will be displayed by this module. If the product is a variable product and the variations are different in prices, the module will display the price range.
4- Woo Add to cart.
The module will display both the quantity input and the add to cart button. If the product is a variable product, it will also display the variations drop-down menus.
5- Woo Product Images Slider.
This module will display the product gallery images. It is essential if your product is a variable product and each variation has its own image. When the client selects a variation, the main image will change to the variation image.
6- Woo Product Description.
This module displays the product description – long description – that you set on the product editing page.
7- Woo Product Tabs.
This module will display the product tabs which are the description, the additional information ( attributes ) & the reviews tab.
Build in the description builder
First, what is the description builder? it is the content area on the product editing page.
This content area is supposed to be the product long description, it is one part of many parts of the product page like the gallery, the short description and so on.
The WooCommerce Builder plugin gives you the ability to use this area to build the entire product page, not just the long description.
Selecting that option will make the description builder works like the builder on “pages” and “posts” so you won’t have to go to Divi Library to build the layout.
In most cases, you don’t need to use this option but it is available in case you need it.
It comes with one disadvantage though; both the “Woo Product Description” and the “Woo Product Tabs” modules are not available inside the description builder for a good reason.
Both modules output the product long description and because we used that “long description area” to build the entire product layout, they can’t be part of it otherwise they will output themselves, again and again, the page will never load…
So, use Divi Library to build the layout especially if you want to use the product tabs module.