Good news, and that's a euphemism! The Divi Builder now includes the "WooCommerce Builder" feature!
Do you know what this major update represents?
In addition to the months of work for Elegantthemes developers, it is the WordPress site creators who will be happy!
As of today, you can fully control the layout (layout) of an e-commerce product using WooCommerce and Divi.
- 1 - With the former 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 - WooCommerce Builder in action (video)
- 6 - Design examples of product sheets
Read Nick Roach's official article on Elegantthemes' blog
Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.
1 - With the former Divi Builder
For information, here is how the construction of a WooCommerce product behaved before version 3.29.x of the Divi theme:
As you can see on this screenshot - or as you noticed for yourself when you created your online shops with Divi - the Divi Builder only acted on the "description" part of the product.
It was rather frustrating because the whole rest of the layout could not be modified with the manufacturer.
So we couldn't add Divi modules where we wanted....
2 - Divi Builder with WooCommerce Builder
That time is over!
From now on, you will benefit from 16 additional WooCommerce modules, available directly from the Divi Builder.
But the real good news is that you can act anywhere in your product sheet.
Discover this step-by-step tutorial that explains how to create a template for your WooCommerce product sheets.
You can add sections, lines and place the various modules necessary to build the product layout.
On this screenshot, I displayed the Divi Builder in "grid" mode so you can see where the WooCommerce Builder can intervene.
As you can see, it can be used anywhere!
To get started with Divi, discover all the articles to start serenely!
3 - The 16 modules of the WooCommerce Builder
16 new modules are added to the 46 modules already present in the Divi Builder (see the complete list).
Let's discover them here:
- Woo Add To Cart
- Woo Breadcrumb
- Woo Description
- Woo Images
- Woo Additional Info
- Woo Cart Notice 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 customize the "add to cart" button in its entirety.
By inserting this button and placing it where you want, you can encourage Internet users to take action.
3.2 - Woo Breadcrumb
This is the breadcrumb trail of your WooCommerce product. By showing the way, 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
As soon as you have entered the product description (in the back office), you can make it appear in your layout, in the most appropriate place.
3.4 - Woo Images
This module is used to display the image of your product's prominence.
You will get lots of options to add a border, transform the image, round corners, change the color 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 section that you will find product variations.
3.6 - Woo Cart Notice
The Woo Cart Notice module displays the "placing in the basket" notification. You can easily change the colors, 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 related to "Meta tags". In this case, it will be the category associated with the product.
3.9 - Woo Price
Display and stylize the price of your product quickly and easily with the Woo Price module.
3.10 - Woo Related Product
This module allows you to display the other related products in relation to the product currently being viewed.
Just fill in the field "Cross-selling" of your WooCommerce product sheet so that related products can be offered to the Internet 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 inventory 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 can choose its title tag (H1, H2, H3 etc.), add a background color, change the font size, add a link, change the title color, add a shadow/animation etc.
3.13 - Woo Rating
This module displays the number of stars (star notification). To do this, you must activate the notices from your WooCommerce file.
3.14 - Woo Reviews
With the Woo Reviews module, you will be able to view the "text" notices that have been left by your customers.
3.15 - Woo Tabs
The Woo Tabs module displays the tab table that contains additional information such as "long description", customer reviews or product information.
3.16 - Woo Upsell
The Woo Upsell module allows you to display "upmarket" (or Upsell) products in order to make additional sales.
You will first have to fill in the upsell products when you create your product sheet.
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 its operation remains the same.
To be able 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.
As soon as all the necessary fields are filled in (price, description, image etc.), you can save your product sheet and activate the Visual Builder.
At that point you can start the design/layout of the product page, add or remove modules.
Each module is fully customizable and offers many options (colors, animations, typographies, effects, transformations, shadows, backgrounds etc.)
5 - WooCommerce Builder in action (video)
There's nothing better than a short video to better understand the power of this new "WooCommerce Builder" feature:
6 - Design examples of product sheets
With the WooCommerce modules of the new Divi Builder, your imagination will have no limit!
You can now build the most beautiful layouts for the products in your online store, the ones that sell!
Here are 4 inspirations of layout-product:
Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!