Search Divi Plus Documentation

Search for answers or browse our knowledge base.

< All Topics
Print

WooCommerce Products

How to Add Woo Products Module to your webpage

divi-woo-product

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.
divi-WooCommerce-products

Content Options

Content

  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

Display

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.

Pagination

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.
Previous Twitter Timeline
Next WooCommerce Products Carousel