Search Divi Plus Documentation

Search for answers or browse our knowledge base.

< All Topics
Print

WooCommerce Products Carousel

woo-commerce-products-carousel

How to Add Woo Products Carousel Module to your webpage

Once Divi Plus is activated, it adds several modules to the Divi builder. To add a 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 Carousel module.
divi-woo-products-carousel

Content Options

Content

  1. Product View Type: Here you can choose which type of product view you would like to display. divi woo product carousel module
  2. Layout: Two layout options are given here. Choose anyone to display products.
  3. How to choose the number of products on the slider: Go to the Content settings >> Number of Products >> input your desired number.
  4. Offset Number: Using this setting you can define how many number of products you would like to skip to display.
  5. Hide Out of Stock Products: To hide out of stock products set as YES.
  6. 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.)divi-woo-product-select-category
  7.  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.
  8. Taxonomies Relation: Here you can define relation(OR, AND) between taxonomies.

Display

  1. Display Quickview Link: To show the quickview link of product set this option as YES.
  2. Quickview Link Text: Here you can define the text for Quickview link.
  3. Show Thumbnail: Using this you can control thumbnail should be visible or not.
  4.  Thumbnail Size: Here you can define the size of product image. It can be either WooCommerce Thumbnail or WooCommerce Single.
  5. Show Star Rating: If you want to show star rating set as YES.
  6. Hide Price: Go to the Display settings >> Show Price >> check as NO.
  7. Hide Add to Cart: Go to the Display settings >> Show Add to Cart >> check as NO.
  8. Simple Product Add to Cart Text: Define Add to Cart button text here for Simple Product.
  9. Variable Product Add to Cart Text: Define Add to Cart button text here for Variable Product.
  10. Grouped Product Add to Cart Text: Here you can specify Add to Cart button text for Grouped Product.
  11. External Product Add to Cart Text: Specify Add to Cart button text for External Product.
  12. Out of Stock/Unpurchaseable Add to Cart Text: Write Add to Cart button text for Out of Stock or Unpurchaseable product.
  13. Hide Sale Badge: Go to the Display settings >> Show Sale Badge >> check as NO.
  14. How to change Sale Badge text into “%” sign: Go to the Display settings >> Badge Text >> Select >> Sale Percentage.
  15. Sale Label: Here you can define sale label text.

Slider

  1. Choose WooCommerce Products Carousel Slide Effect: Go to the Slider >> Slide Effect >> choose one >> SlideCubeCoverflow, or Flip. slide effect in divi woo carousel
  2. How many products you want to display per slide: Go to the Slider >> Slide Effect >> choose >> Slide >> Products Per View >> choose from 1 to 10.
  3. How many products you want to display per slide: Go to the Slider >> Slide Effect >> choose >> Coverflow >> Products Per View >> choose from 1 to 10.
  4. Space between Slides: Using this setting option you can adjust space between slides.
  5. Enable Slide Shadow: To enable slide shadow for Coverflow effect set this option as YES.
  6. How to rotate the view of the products:  Go to the Slider >> Slide Effect >> choose >> Coverflow >> Coverflow Rotate >> move the slider or input the value.
  7. How to increase/decrease zoom on products:  Go to the Slider >> Slide Effect >> choose >> Coverflow >> Coverflow Depth >> move the slider or input the value.
  8. How to Enable Slide Shadow on the WooComerce Products Carousel: Go to the Slider >> Slide Effect >> choose >> Coverflow >> Enable Slide Shadow >> YES.
  9. Equalize Slides Height: Set as YES to equalize slides height.equalize slide height
  10. Apply Loop on the WooComerce Products Carousel: Go to the Slider >> Enable Loop >> YES
  11. Disable Autoplay, Adjust Transition Duration, and more: Go to the Slider >> Autoplay >> NO. Under this option, you also get the Autoplay Delay option, which allows you to delay the products’ carousel to work after a complete cycle. Moreover, the Transition Duration allows you to set a time for the slider to complete a sliding cycle.
  12. How to disable products’ carousel pause on hover: Go to the Slider >> Pause On Hover >> NO.
  13. How to display carousel arrows: Go to the Slider >> Show Arrows >> YES. display arrow in divi woo product carousel
  14. How to enable arrows on hover: Go to the Slider >> Show Arrows Only On Hover >> Yes.
  15. Show Dots Pagination: Go to the Slider >> Show Dots Pagination >> YES.
  16. How to change pagination style: Go to the Slider >> Dots Pagination Style >> select one >> Solid Dot/ Transparent Dot/ Line/ Strecthed Dot/ Rounded Line/ Squared Dot.
  17. How to adjust products’ carousel background: Go to the Background settings >> Product Background >> Apply background customizations as needed.

Design WooCommerce Products Carousel’s Elements

  1. How to customize Title text of the products: Go to the Design >> Title >> Apply changes as required. design-tab-woo-carousel
  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. Change slider arrow size: Go to the Design tab >> Slider >> Arrow Font Size >> move the slider or input the value.
  7. How to change the slider arrow’s icon color: Go to the Slider >> Arrow Color >> choose any color.
  8. Apply different colors to slider dots: Go to the Design tab >> Slider >> Active Dot Pagination Color / Inactive Dot Pagination Color >> choose any appropriate color.
  9. Customize Quickview LightboxGo to the Design tab >> Quickview Lightbox >> Apply customizations as required.customization-setting-of-divi-woo-product-carousel-module
  10. Customize Quickview LinkGo to the Design tab >> Quickview Link >> Apply customizations as required.setting-in-divi-woo-carousel-module
  11. Customize Quickview Product TitleGo to the Design tab >> Quickview Product Title >> Apply customizations as required.
  12. Customize Product PriceGo to the Design tab >> Quickview Product Price >> Apply customizations as required.
  13. Customize Quickview Product DescriptionGo to the Design tab >> Quickview Product Description >> Apply customizations as required.
  14. Customize Quickview Product QuantityGo to the Design tab >> Quickview Product Quantity >> Apply customizations as required.
  15. Customize Quickview Add to CartGo to the Design tab >> Quickview Add to Cart >> Apply customizations as required.
  16. Customize Quickview Product MetaGo to the Design tab >> Quickview Product Meta >> Apply customizations as required.
  17. Customize Quickview Product AttributesGo to the Design tab >> Quickview Product Attributes >> Apply customizations as required.
  18. Customize Loader Icon TextGo to the Design tab >> Loader>> Apply customizations as required.
  19. Customize WooCommerce NoticeGo to the Design tab >> WooCommerce Notice >> Apply customizations as required.woo-commerce-notice-customization-setting-in-divi-module
  20. Adjust Product’s Content Padding: Go to the Design tab >> Spacing >> Product Content Padding >> Apply the padding as required. product-content-padding-in-divi-woo-commerce-carousel-module
  21. Adjust Product’s Image Padding: Go to the Design tab >> Spacing >> Product Image Padding >> Apply the padding as required.
  22. Add Rounded Corners to Products: Go to the Border settings >> Product Rounded Corners >> Make changes as required.
  23. Add Borders to Products: Go to the Border settings >> Product Border Styles >> Make the changes as required.
  24. 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 out Of 5 Stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Previous WooCommerce Products
Next Woo Products Categories