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.

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:

Divi Builder sans WooCommerce Builder
Building an e-commerce product with the Divi Builder without the functionality of WooCommerce Builder

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.

WooCommerce Builder pour construire une fiche produit
WooCommerce Builder to build your entire product sheet

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:

Les modules du Divi Builder pour WooCommerce
Divi Builder modules for WooCommerce
  1. Woo Add To Cart
  2. Woo Breadcrumb
  3. Woo Description
  4. Woo Images
  5. Woo Additional Info
  6. Woo Cart Notice Notice
  7. Woo Gallery
  8. Woo Meta
  9. Woo Price
  10. Woo Related Product
  11. Woo Stock
  12. Woo Title
  13. Woo Rating
  14. Woo Reviews
  15. Woo Tabs
  16. Woo Upsell

3.1 - Woo Add To Cart

Woo Add to Cart
Woo Add to Cart module

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

Woo Breadcrumbs
Woo Breadcrumbs Module

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

Woo Description
Woo Module 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

Woo Image module
Woo Image Module

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

Woo Additional Info
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

Woo Cart Notice
Woo Cart Notice 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

Woo Meta
Woo Meta Module

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

Woo Price Module
Woo Price Module

Display and stylize the price of your product quickly and easily with the Woo Price module.

3.10 - Woo Related Product

Woo Related Product
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.

gestion des stock WooCommerce
Enable WooCommerce stock management to display the number of copies remaining.

To do this, you will need to activate inventory management and enter the number of copies you have in stock.

3.12 - Woo Title

Woo Title
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

activer les avis WooCommerce
To use the Woo Rating module, you must enable WooCommerce notifications

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

Woo Reviews
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

Woo Tabs
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.

Woo Upsell

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:

Mise en page produit avec Divi et WooCommerce Builder
Product layout with Divi and WooCommerce Builder
Mise en page produit macaron
Product layout: go to the end of your imagination
Mise en page produit sobre
Original and sober product layout
Layout Produit Divi
Build the Layout of a product with the Divi Builder

Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!

layout WooCommerce Divi
WooCommerce Builder Divi

Pin It on Pinterest

Shares
Share This