• Documentation Search

Woo Product Carousel Module For Divi & WooCommerce

  1. Home
  2. Docs
  3. Woo Product Carousel Module For Divi & WooCommerce

Woo Product Carousel Module For Divi & WooCommerce

The Product Carousel plugin for Divi and WooCommerce will give you the most advanced module for Divi and WooCommerce to help you showcase your products in a beautiful and responsive carousel. The module has tons of cool features and unique sliding effects like Cards, Coverflow, Fade, Flip & Slide.

With the Product Carousel plugin, you can display any kind of product on any page of your website using Divi builder.

The module is 100% compatible with the visual builder and the theme builder templates.

PS: for the plugin to work, you need to have Divi theme and WooCommerce installed. You can also use the Divi Builder plugin or Extra theme.

If you don’t have Divi, you can get it from here.

Install the plugin

  1. After you purchase hte plugin, we will send you 2 emails, one of them will contain the plugin zip file and the license key.
  2. Go to your admin dashboard > Plugins > Add New > Upload Plugin
  3. When you activate the plugin, a box will open asking for the license key, just add the one that arrived to your inbox.
  4. The module will appear in the modules list in Divi builder.
Woo Product Carousel Module For Divi & WooCommerce 1

Now, let’s dig deep into the module’s options…

Products Settings

With the available options, you can display any kind of product.

Products Type

The type of products to display. The available options are:

  • Recent Products
  • Featured Products
  • Sale Products
  • Best Selling Products
  • Top Rated Products

Products From

Display products from all categories, specific categories, or dynamically based on the current archive page.

The available options are:

  • The Entire Shop
  • Specific Categories
  • Current Archive Page

Tip: If you combine the “products type” and the “products from” option, you will be able to display anything you want. For example:

  1. Display the recent products from the entire shop, or from specific categories.
  2. Display the featured products dynamically from the current page. For example; if you are viewing the page of the T-shirts category, the module will display the featured products from this very category.

Total Products Count

It controls how many products to display in the carousel.

Order By

Choose how your products should be ordered. The available options are:

  • Menu Order
  • Popularity
  • Rating
  • Date: Newest To Oldest
  • Date: Oldest To Newest
  • Price: Low To High
  • Price: High To Low

Product Elements

The product carousel plugin gives you the ability to display or hide useful information.

Show Sale Badge

Products under sale will have a sale badge by default on top of the product image. You can hide/display it.

Show Rating

Hide/display the star rating of the product.

Show Price

Hide/display the product price and sale price.

Show Short Description

Hide/display the product’s short description (excerpt).

Show Add To Cart Button

Make it easy for your customers to add the products to the cart by showing the button right under each product.

Carousel Settings

The Product Carousel module has some amazing and unique features that will impress your clients.

Let’s dig right in…

Number of Slides to Show

How many products to display on desktop, tablet, and mobile. By default, they are 4 on desktop, 2 on tablet, and 1 on mobile.

Number of Slides to Scroll

This option controls how many products to scroll on desktop, tablet, and mobile.

Slide Effect

With this option, you can get fantastic and unique views. The available options are:

  • Slide
  • Coverflow
  • Fade
  • Flip
  • Cards

Centered Slides

If enabled, then the active slide will be centered, not always on the left side.

Autoplay

Enables Autoplay.

Autoplay Speed

Autoplay Speed in milliseconds, 3000 means 3 seconds.

Pause On Hover

Pause autoplay on hover.

Show Arrows

Show Prev/Next Arrows.

Show On Hover Only

Show Prev/Next arrows only when you move the cursor over the carousel.

Show Pagination

Show dot indicators.

Infinite Loop

Infinite loop sliding.

Mouse Wheel Control

Enables navigation through slides using the mouse wheel.

Space Between Slides

Set the space between slides.

Design Options

Now, let’s look at the design tab of the module.

The module has all Divi’s regular design options like sizing, padding, margin, animation, filters, conditions, and so on.

Also, you have full control of the design of text like the product title, description, price, add to cart button…

So I’ll not waste any time on this stuff. Let’s look at the unique design options related to the carousel.

Arrows Background

Set the arrows’ background color.

Arrows Color

Set the color of the arrows.

Dots Color

Set the color of the dots pagination.

Active Dot Color

Set the color of the active dot.

Same Height Product

Set all the products to have the same height. This is useful in case your product images do not have the same height.

Product Background

Sets the product’s background color.

Product Padding

Add space around the product.

Product Image Position

By default, the product image sets on the top. But now you can change that very easily. The available options are:

  • Top
  • Left
  • Right
  • Background: The image will be used as a background for the product which gives it a beautiful look.

Fill The Available Space

The image will fill all the available space vertically and horizontally. This option is available if you set the image to the right or the left side.

Product Details Background

The product details container’s background. This section contains the product title, rating, price, short description, and the add to cart button.

Product Details Padding

Give this section inside padding which makes its elements not close to the edges.

Sale Badge Background

Pick a color to use for the sales bade that appears on products that are on sale.