Divi has always been compatible with the WooCommerce plugin and includes the Divi Shop module by default that allows you to display your WooCommerce products into a page using the Divi Builder. You were also able to use the Divi Builder on product pages, but this was limited to use within the product description, rather than the full layout of the page.

The latest WooCommerce update for Divi adds16 new WooCommerce modules that can be used within the Divi Builder to create WooCommerce product pages and also add WooCommerce elements anywhere on a Divi website using the Divi Builder.

  • You can use the Divi Builder and Woo modules on WooCommerce Product Pages
  • You can use any of the 16 New WooCommerce Modules anywhere on your website using the Divi Builder
  • You can NOT (yet) create templates with this update, but this feature will come in the Divi Theme Builder update
  • You can NOT (yet) customize the checkout and cart pages but this feature may come in the Woo Modules V2 (see below/TBC)

divi woocommerce modules

16 new Divi WooCommerce modules

Once you have installed and activated the WooCommerce plugin on your website, you will have access to 16 new Divi modules in addition to the 46 Divi modules that are already included in Divi by default.

Each Woo module will have content, Design and Advanced options like the existing Divi modules. The new Woo Modules are;

  1. Woo Breadcrumbs Module
  2. Woo Title Module
  3. Woo Image Module
  4. Woo Gallery Module
  5. Woo Price Module
  6. Woo Add To Cart Module
  7. Woo Rating Module
  8. Woo Stock Module
  9. Woo Meta Module
  10. Woo Description Module
  11. Woo Tabs Module
  12. Woo Additional Information Module
  13. Woo Related Products Module
  14. Woo Upsell Module
  15. Woo Cart Notice Module
  16. Woo Reviews Module

How to use the WooCommerce modules on product pages

You can now use the Divi Builder to create your WooCommerce product pages the same way you can use it on other pages of your website.

  1. Add a new product or open an existing WooCommerce product and click on the “Use Divi Builder button”.
    Use Divi Builder on product page
  2. Divi will automatically convert the default WooCommerce product page into a Divi layout using the WooCommerce modules.There is a new Product Content dropdown in the page settings. “Build From Scratch” is selected by default and allows you to build the entire product page as a whole. If you choose the “Default” dropdown option the Divi Builder is only used to replace the product description of the product page.
    Divi product page layout
  3. You can then drag-and-drop the WooCommerce elements and create a unique product page in the same way you would design any page using the Divi Builder. You can custom product page layout
  4. Each Woo module will have Content, Design and Advanced settings tabs as you will find in all the default modules. The Content options change with each module but generally allow you to select which product data the module should use along with options for adding custom text and showing/hiding elements.
    woo module settings

 

Use Woo Modules on pages and posts

The new Woo modules are not limited to WooCommerce product pages but can be added to any page on your website.

Just add any of the Woo modules as you would any other Divi module and choose which of your products the module will link to. You can choose any of your WooCommerce products from a list or use the latest product.

Divi WooCommerce modules version 2

This WooCommerce update includes 16 new modules but there is likely to be another update that will include extra modules so that pages like the shopping cart and checkout pages can also be built and customized.

This has not been confirmed, but the comment below from Nick Roach suggests that it may well already be on the to-do-list for Elegant Themes developers.

Until then you may have to use one of the 3rd party Divi WooCommerce plugins.

woocommerce modules version 2

 

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close