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)
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;
- Woo Breadcrumbs Module
- Woo Title Module
- Woo Image Module
- Woo Gallery Module
- Woo Price Module
- Woo Add To Cart Module
- Woo Rating Module
- Woo Stock Module
- Woo Meta Module
- Woo Description Module
- Woo Tabs Module
- Woo Additional Information Module
- Woo Related Products Module
- Woo Upsell Module
- Woo Cart Notice Module
- 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.
- Add a new product or open an existing WooCommerce product and click on the “Use Divi Builder button”.
- 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.
- 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
- 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.
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.