Good news, to put it mildly! The Divi Builder now includes the "WooCommerce Builder" functionality!
Do you know what this major update means?
In addition to the months of work for the Elegantthemes developers, it is the creators of WordPress sites who will be happy!
As of today, you can have full control over the layout (layout) of an e-commerce product using WooCommerce and Divi.
- 1 - With the old Divi Builder
- 2 - Divi Builder with WooCommerce Builder
3 - The 16 modules of the WooCommerce Builder
- 3.1 - Woo Add To Cart
- 3.2 - Woo Breadcrumb
- 3.3 - Woo Description
- 3.4 - Woo Images
- 3.5 - Woo Additional Info
- 3.6 - Woo Cart Notice
- 3.7 - Woo Gallery
- 3.8 - Woo Meta
- 3.9 - Woo Price
- 3.10 - Woo Related Product
- 3.11 - Woo Stock
- 3.12 - Woo Title
- 3.13 - Woo Rating
- 3.14 - Woo Reviews
- 3.15 - Woo Tabs
- 3.16 - Woo Upsell
- 4 - Divi WooCommerce Builder: how does it work?
- 5 - The WooCommerce Builder in action (video)
- 6 - Examples of product sheet design
Read the official Nick Roach article on the Elegantthemes blog
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
1 - With the old Divi Builder
For your information, here is how a WooCommerce product was built before the 3.29.x version of the Divi theme:
As you can see from this screenshot - or as you may have noticed yourself when creating online shops with Divi - the Divi Builder only worked on the "description" part of the product.
This was rather frustrating as all the rest of the layout could not be changed with the builder.
So we couldn't add Divi modules where we wanted to...
2 - Divi Builder with WooCommerce Builder
Those days are over!
From now on, you will benefit from 16 additional WooCommerce modules, available directly from the Divi Builder.
But the really good news is that you can act anywhere on your product sheet.
Check out this step-by-step tutorial on how to create a template for your WooCommerce product sheets.
You can add sections, lines and place the various modules needed to build the product layout.
In this screenshot, I've displayed the Divi Builder in "grid" mode so you can see where the WooCommerce Builder can come in.
As you can see, it can be used anywhere!
Getting started with Divi, discover all the articles to start with peace of mind!
3 - The 16 modules of the WooCommerce Builder
16 new modules have been added to the 46 modules already present in Divi Builder (see full list).
Let's discover them here:
- Woo Add To Cart
- Woo Breadcrumb
- Woo Description
- Woo Images
- Woo Additional Info
- Woo Cart Notice
- Woo Gallery
- Woo Meta
- Woo Price
- Woo Related Product
- Woo Stock
- Woo Title
- Woo Rating
- Woo Reviews
- Woo Tabs
- Woo Upsell
3.1 - Woo Add To Cart
This module allows you to add and fully customise the "add to cart" button.
By inserting this button and placing it where you want it, you can encourage users to take action.
3.2 - Woo Breadcrumb
This is the breadcrumb trail of your WooCommerce product. By showing the path, the user knows which product he is on and can quickly move up in the product categories.
You can place this module anywhere in your layout.
3.3 - Woo Description
Once you have entered the product description (in the back office), you can display it in your layout in the most appropriate place.
3.4 - Woo Images
This module is used to display the image of your product.
You'll get plenty of options to add a border, transform the image, round the corners, change the colour of the promo badge, add an animation, etc.
3.5 - Woo Additional Info
This module allows you to display the "additional information" section . It is often in this part that you will find product variations.
3.6 - Woo Cart Notice
The Woo Cart Notice module allows you to display the "put in cart" notification. You can easily change the colours, the button etc.
3.7 - Woo Gallery
If you use several images to illustrate your product, the Woo Gallery module will allow you to display them.
3.8 - Woo Meta
The Woo Meta module displays product information linked to "Meta tags". In this case, it will be the category associated with the product.
3.9 - Woo Price
Display and style your product's price quickly and easily with the Woo Price module.
3.10 - Woo Related Product
This module allows you to display other related products in relation to the currently viewed product.
Simply fill in the field "Cross-selling of your WooCommerce product sheet to offer related products to the user.
3.11 - Woo Stock
This module is simply used to display the remaining stock of your product.
To do this, you will need to activate stock management and enter the number of copies you have in stock.
3.12 - Woo Title
This module allows you to display the title of your product sheet.
You will be able to choose its title tag (H1, H2, H3 etc.), add a background colour, change the font size, add a link, change the title colour, add a shadow/animation etc.
3.13 - Woo Rating
This module allows you to display the number of stars (star rating). To do this, you must activate the reviews from your WooCommerce page.
3.14 - Woo Reviews
With the Woo Reviews module, you will be able to display the "text" reviews that have been left by your customers.
3.15 - Woo Tabs
The Woo Tabs module allows you to display the tabbed table which contains additional information such as the "long description", customer reviews or product info.
3.16 - Woo Upsell
The Woo Upsell module allows you to display "upsell" products in order to make additional sales.
You will first need to fill in the upsell products when you create your product file.
Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE
4 - Divi WooCommerce Builder: how does it work?
It's very simple: WooCommerce modules are integrated into the Divi Builder, so it works the same.
To use them, your site must have the WooCommerce plugin.
You create your product sheets from the back office of your site, as usual, from the tab Products > Add.
Once all the necessary fields have been filled in (price, description, image etc.), you can save your product sheet and activate the Visual Builder.
At this point you can start the design/layout of the product page, add or remove modules.
Each module is fully customisable and offers many options (colours, animations, typography, effects, transformations, shadows, backgrounds etc.).
5 - The WooCommerce Builder in action (video)
Nothing better than a short video to better understand the power of this new feature "WooCommerce Builder":
6 - Examples of product sheet design
With the new Divi Builder's WooCommerce modules, there are no limits to your imagination!
Now you can build the most beautiful lay outs for your online shop products, the ones that sell!
Here are 4 layout-product inspirations:
Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!