Search Divi Plus Documentation

Search for answers or browse our knowledge base.

< All Topics

WooCommerce Products

How to add module on page


Once Divi Plus is activated, it adds several modules to the Divi builder. To add the module on the page, use the following steps:

  1. Create/Edit a Page/Post that uses Divi builder.
  2. Create/Edit a row.
  3. Click on Add New Module option; choose the DP Woo Products module.

Content Options


  1. Product View Type: This setting under the content option allows you to display product according to type of product. It gives 5 options including default.
WooCommerce product display according to its type

2. Layout: Here you can select a layout type for displaying product from two given options.

layout for divi WooCommerce products

3. Offset Number: Using this setting you can define how many number of products you would like to skip to display.

4. Hide Out of Stock Products: To hide out of stock products set as YES.

5. Include Categories: Tick the checkboxes next to the categories you want to include. (If you leave all categories unchecked, it will display products from all the categories.)

6. Include Tags: Select the tags and product associated with those tags will be display. If you will not select any one it will display all products.

7. Taxonomies Relation: Here you can define relation(OR, AND) between taxonomies.

WooCommerce module for divi


1. Select Number of Columns for WooCommerce Products: Go to the Display settings >> Number Of Columns >> select your preferred number of columns up to 6.

2. Adjust product columns space: Go to the Content tab >> Display settings >> Column Spacing >> move the slider or input the value.

3. How to display products in Masonry Format: Go to the Display settings >> Enable Masonry >> check as YES.

4. Display Quickview Link: To show the quickview link of product set this option as YES.

5. Quickview Link Text: Here you can define the text for Quickview link.

6. Show Thumbnail: Using this you can control thumbnail should be visible or not.

7. Thumbnail Size: Here you can define the size of product image it can be either WooCommerce Thumbnail or WooCommerce Single.

8. Show Star Rating: If you want to show star rating set as YES.

9. Hide Price: Go to the Display settings >> Show Price >> check as NO.

10. Hide Add to Cart: Go to the Display settings >> Show Add to Cart >> check as NO.

11. How to display Add to Cart on Hover: Go to the Display settings >> Show Add to Cart >> check as YES >> Show Add to Cart on Hover >> YES.

12. Simple Product Add to Cart Text: Define Add to Cart button text here for Simple Product.

13. Variable Product Add to Cart Text: Define Add to Cart button text here for Variable Product.

14. Grouped Product Add to Cart Text: Here you can specify Add to Cart button text for Grouped Product.

15. External Product Add to Cart Text: Specify Add to Cart button text for External Product.

16. Out of Stock/Unpurchaseable Add to Cart Text: Write Add to Cart button text for Out of Stock or Unpurchaseable product.

17. Hide Sale Badge: Go to the Display settings >> Show Sale Badge >> check as NO.

18. How to change Sale Badge text into “%” sign: Go to the Display settings >> Badge Text >> Select >> Sale Percentage.

19. How to style products background: Inside the Content tab >> Background >> Product Background >> apply customizations as required.


Show Pagination: To show pagination set as YES.

Show Previous Next Link: To show Previous Next link set YES.

Design Options

  1. How to customize Title text of the products: Go to the Design >> Title >> Apply changes as required.
  2. How to customize Price text: Go to the Design tab >> Price >> Apply text customizations as required.
  3. Customize Sale Badge text and background color: Go to the Design tab >> Sale Badge >> Apply customizations as required.
  4. Customize Add to Cart text and backgroundGo to the Design tab >> Add to Cart >> Apply customizations as required.
  5. Customize Star RatingGo to the Design tab >> Star Rating >> Apply customizations as required.
  6. Customize Pagination linkGo to the Design tab >> Pagination >> Apply customizations as required.
  7. Customize Quickview LightboxGo to the Design tab >> Quickview Lightbox >> Apply customizations as required.
  8. Customize Quickview LinkGo to the Design tab >> Quickview Link >> Apply customizations as required.
  9. Customize Quickview Product TitleGo to the Design tab >> Quickview Product Title >> Apply customizations as required.
  10. Customize Product PriceGo to the Design tab >> Quickview Product Price >> Apply customizations as required.
  11. Customize Quickview Product DescriptionGo to the Design tab >> Quickview Product Description >> Apply customizations as required.
  12. Customize Quickview Product QuantityGo to the Design tab >> Quickview Product Quantity >> Apply customizations as required.
  13. Customize Quickview Add to CartGo to the Design tab >> Quickview Add to Cart >> Apply customizations as required.
  14. Customize Quickview Product MetaGo to the Design tab >> Quickview Product Meta >> Apply customizations as required.
  15. Customize Quickview Product AttributesGo to the Design tab >> Quickview Product Attributes >> Apply customizations as required.
  16. Customize Loader Icon TextGo to the Design tab >> Loader>> Apply customizations as required.
  17. Customize WooCommerce NoticeGo to the Design tab >> WooCommerce Notice >> Apply customizations as required.
  18. Adjust Product’s Content Padding: Go to the Design tab >> Spacing >> Product Content Padding >> Apply the padding as required.
  19. Adjust Product’s Image Padding: Go to the Design tab >> Spacing >> Product Image Padding >> Apply the padding as required.
  20. Add Rounded Corners to Products: Go to the Border settings >> Product Rounded Corners >> Make changes as required.
  21. Add Borders to Products: Go to the Border settings >> Product Border Styles >> Make the changes as required.
  22. Add Box Shadow to Products: Go to the Box Shadow settings >> Product Box Shadow >> select any box shadow from available options.

Was this article helpful?
0.5 out Of 5 Stars

2 ratings

5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 100%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.