Check out the following live demos to see what is possible when designing product pages with Divi's Woo Modules.

Divi’s WooCommerce Modules allow you to edit and style WooCommerce elements using the Divi Builder. This will allow you to utilize the power of Divi to add, remove, and style the WooCommerce Elements that make up a product page layout to create completely custom product pages from scratch.

No more having to resort to external CSS or modifying woocommerce page templates with custom code.

WooCommerce Modules aren’t limited to product pages either. You can add Woo Modules anywhere on your site to:

If that wasn’t enough, WooCommerce data is also available via Divi’s dynamic content feature built into all Divi Modules.

That means you can easily pull in woocommerce elements and product information to any module in Divi.

WooCommerce Modules work like dynamic content already within the Divi Builder.

Each WooCommerce Module requires you to select a product to generate dynamic content associated with that product.

The dynamic content is pulled from the database and includes the information you entered when setting up your product in woocommerce.

Once a product is selected, you can use the Divi Builder settings to style the dynamic WooCommerce product content like any regular Divi module.

WooCommerce Modules are accessible from within the Divi Builder, just like regular Divi Modules.

Once the Divi Theme has been installed on your website, you will notice a Use Divi Builder button above the post editor whenever you create or edit a new product or page.

Clicking this button will enable the Divi Builder, giving you access to all of the Divi Builder's modules, including WooCommerce Modules.

If you enable the Divi Builder on a WooCommerce Product page, Woo Modules automatically replace the Woo Elements active before enabling Divi.

You can also click the Build On The Front End button to launch the builder in Visual Mode.

In addition to that, you can also click the Enable Visual Builder button on the front end when browsing your website if logged in to your WordPress Dashboard.

Once you have entered the Divi Builder, click the gray plus icon to add a new module to your page.

Locate the Woo Modules within the list of modules and click on one to load the full list of Woo-related modules that can be added to your page.

The module list is searchable, which means you can also type woo to see all Woo Modules or type Woo Title to quickly pull up the Woo Title module.

Once the module has been added, you will be greeted with the module's list of options, just like a normal Divi module. These options are separated into three main groups:

Divi's Woo Modules will work seamlessly with a WooCommerce Product Page. Below is an overview of how to use Woo Modules on a product page in Divi. By default, Divi will use the default WooCommerce Product Page template, which isn’t editable using the Divi Builder.

Here is what the default product page looks like when editing it on the backend.

The only thing you need to do to enable Woo Modules on your page is to enable the Divi Builder on the Product Page by clicking the Use the Divi Builder button.

Once you enable the Divi Builder on a Product Page for a normal product, Divi will automatically convert the product page elements into a collection of WooCommerce modules that mimic the default design.

For each one of the Woo Elements that are relevant to your product, Divi has a corresponding WooCommerce Module that allows you to deploy and design that Woo Element with the Power of the Divi Builder.

For example, the product title is replaced with a new Woo Title module with all the design options available to customize the title with Divi.

Using the Divi builder, the user can customize all WooCommerce elements (like product images, price, description, etc.).

This will allow you to create completely custom product pages. It is important to remember that every Woo Module is dynamic, which depends on existing WooCommerce data you have already entered when building your products.

So, you must ensure the product has the information needed to display the module.

Once the Divi Builder has been deployed on a product page, the Divi Page Settings will contain slightly different options. The two main options to note, especially when working with Woo Modules, are:

Use this option to change the product page layout. The Left and Right Sidebar options will display the default Divi Theme sidebar.

Select the No Sidebar or Fullwidth option if you want to hide the sidebar.

The Product Content settings allow you to choose between two options:

Divi’s WooCommerce Modules can be used on any normal page or post throughout your website (not just WooCommerce Product Pages).

Ensure that you select the product you want to link to the module.

In this case, I want to select a specific product. Therefore, I would need to search the dropdown list of products within the module to find a specific product in the WooCommerce database.

This would, of course, be the product I want featured on the landing page.

The module will then fetch the product data dynamically and, in this case, add the product to the cart when clicking the button.

You can also combine multiple WooCommerce Modules for custom layouts for your product information.

In the following example, a landing page uses 6 Woo Modules that all feature information for the same product dynamically.

And since each Woo Module is styled using Divi’s powerful built-in design settings, you can get a great-looking featured product section for your landing page.

The WooCommerce modules will also work on other WooCommerce Pages as well.