WooCommerce Products Carousel

How to add module on page

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.

Content Options

Content

1. Product View Type: Here you can choose which type of product view you would like to display.
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.)
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 >> Slide, Cube, Coverflow, or Flip.
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.
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.
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.
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 background: Go to the Design tab >> Add to Cart >> Apply customizations as required. 
5. Customize Star Rating: Go 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 Lightbox: Go to the Design tab >> Quickview Lightbox >> Apply customizations as required.
10. Customize Quickview Link: Go to the Design tab >> Quickview Link >> Apply customizations as required.
11. Customize Quickview Product Title: Go to the Design tab >> Quickview Product Title >> Apply customizations as required.
12. Customize Product Price: Go to the Design tab >> Quickview Product Price >> Apply customizations as required.
13. Customize Quickview Product Description: Go to the Design tab >> Quickview Product Description >> Apply customizations as required.
14. Customize Quickview Product Quantity: Go to the Design tab >> Quickview Product Quantity >> Apply customizations as required.
15. Customize Quickview Add to Cart: Go to the Design tab >> Quickview Add to Cart >> Apply customizations as required.
16. Customize Quickview Product Meta: Go to the Design tab >> Quickview Product Meta >> Apply customizations as required.
17. Customize Quickview Product Attributes: Go to the Design tab >> Quickview Product Attributes >> Apply customizations as required.
18. Customize Loader Icon Text: Go to the Design tab >> Loader>> Apply customizations as required.
19. Customize WooCommerce Notice: Go to the Design tab >> WooCommerce Notice >> Apply customizations as required.
20. Adjust Product’s Content Padding: Go to the Design tab >> Spacing >> Product Content Padding >> Apply the padding as required.
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.