Divi WooCommerce Modules

Divi has always been compatible with the WooCommerce plugin and has always included a Divi Shop module to display your WooCommerce products on any page using the Divi Builder.

The latest WooCommerce update for Divi means there are also now 24 WooCommerce modules in addition to the Divi Shop module (Now the Divi Woo Products) included by default.

These modules can be used anywhere within Divir to create custom product pages and templates in the Theme Builder and to create custom Woo check-out and cart pages.

The Shop module is now called the Woo Product module and is available in the Woo modules collection when you add a new module in Divi.

• You can use the Divi Builder and Woo modules on WooCommerce Product Pages.
• You can use any of the 25 WooCommerce Modules + Products modules anywhere on your website using the Divi Builder.
• You can create WooCommerce product templates with the Divi Theme Builder.
• You can customize the WooCommerce checkout and cart pages without a 3rd party plugin

25 Divi WooCommerce modules

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

Each WooCommerce module will have the usual Content, Design, and Advanced options like the existing Divi modules.

The 25 WooCommerce Modules are;

1. Woo Products module / Shop module
   The Woo Products module allows you to add your shop products anywhere on your website and was previously named the Divi Shop module.
2. Woo Breadcrumbs module
   The Woo Breadcrumb module allows users to add and modify the WooCommerce Breadcrumb links that help users to navigate your website and view their location within the site hierarchy.
3. Woo Product Title module
   The Woo Product Title Module allows you to add and modify the WooCommerce Product Title for the current product for a particular product page, or any other existing product on any page, product, or post.
4. Woo Product Images module
   The Woo Image Module allows you to add and modify the WooCommerce Product Images element to display the single main product image and/or a gallery of product images.
5. Woo Product Gallery module
   The Woo Gallery Module allows you to add the WooCommerce Product Gallery to any regular page/post or product page and will display any product gallery images associated with the selected product.
6. Woo Product Price module
   The Woo Price Module allows you to add the WooCommerce Product Price to any regular page/post or product page and will display the product price and variable price associated with the selected product.
7. Woo Product Add To Cart module
   The Woo Add to Cart Module allows you to add the WooCommerce add to cart button, product stock, and the product quantity.
8. Woo Product Rating module
   The Woo Rating module allows you to add the WooCommerce product rating for the selected product to any page in Divi and it will display the average star rating given to the product by customers along with the count of customer reviews.
9. Woo Product Stock module
   The Woo Stock module allows you to add the WooCommerce product stock of any product to any page in Divi and it shows if the product is in or out of stock and/or how many items are available
   
10. Woo Product Meta module
    The Woo Meta module allows you to add the WooCommerce product meta of any product to any page in Divi and will display the product SKU, Categories, and Tags associated with a particular product.
11. Woo Product Description module
    The Woo Description module allows you to add the WooCommerce product description or short description of any product to any page in Divi.
12. Woo Product Tabs module
    The Woo Tabs module allows you to add the WooCommerce product tabs element of any product to any page in Divi to include tabs for the product description, additional information, and reviews.
13. Woo Product Information module
    The Woo Additional Info module allows you to add the WooCommerce product additional info element of any product anywhere on your Divi sites such as the product including weight, dimensions, or attributes.
14. Woo Related Products module
    The Woo Related Products module allows you to add the WooCommerce related products element/section to a regular page/post or product page and displays products from your store that share the same category or tag(s).
15. Woo Product Upsell module
    The Woo Upsell Module allows you to add the WooCommerce upsell element to a regular page/post or product page and displays products that you have added as a product’s upsell product.
16. Woo Cart Notice module
    The Woo Cart Notice Module allows you to add the WooCommerce Cart Notice element to any WooCommerce product page in Divito show a notification that pops up on the page whenever a user successfully adds a product to the cart by clicking the Add to Cart button.
17. Woo Product Review module
    The Woo Reviews Module allows you to add the WooCommerce Product Reviews element to any regular page/post or product page on your Divi site which will display the reviews of the selected product along with a form for submitting new reviews.
18. Woo Cart Products module
    The Woo Cart Products module allows you to display the list of products that have been added to the shopping cart.
19. Woo Cart Totals module
    The Woo Cart Totals module allows you to display the current subtotal, shipping, and total price for the products that have been added to the shopping cart.
20. Woo Cart Cross-Sells module
    The Woo Cart Cross-Sells module allows you to display cross-sells and related products on the Woo cart page.
21. Woo Checkout Billing module
    The Woo Checkout Billing module allows you to display the billing details form used during the WooCommerce checkout.
22. Woo Checkout Shipping module
    The Woo Checkout Shipping module allows you to display the shipping details form used during the WooCommerce checkout.
23. Woo Checkout Information module
    The Woo Checkout Information module allows you to display the additional information form used during the WooCommerce checkout.
24. Woo Checkout Details module
    The Woo Checkout Details module allows you to display order details, including the products being purchased and their prices, during the WooCommerce checkout.
25. Woo Checkout Payment module
    The Woo Checkout Payment module allows you to display the payment type selection and payment form details during the WooCommerce checkout.

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”.
   
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.
   
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 
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.