How to Create Product Carousel in Divi (Step-by-Step)

To create a product carousel in Divi, you will either need a plugin or write lines of custom code.

Using a plugin like DiviGear’s Product Carousel offers the easiest solution. With this, you can easily create a dynamic product slider without any coding knowledge.

In this guide, you will learn how to create product carousel in Divi with the Product Carousel Plugin.

Let’s get started.

Preview of Our Created Product Carousel

Take a look at the product carousel we have designed in this guide using DiviGear’s Product Carousel plugin:

Required Setup

• Divi theme is installed and activated.
• Divi Product Carousel is installed and activated.
• WooCommerce is installed and activated.

Step 1: Create Your Products

Start with creating your product by navigating to WordPress Dashboard > Products > Add New Product. After that, input necessary information like:

• Product name
• Product price
• Product short description
• Product image

Our demo design has 5 products and we added all of them one by one.

Note: To know how to add products, you can check out how to build an eCommerce website with Divi content’s step 6.

Step 2: Insert Divi Product Carousel Module

After creating products, it’s time to show them in a carousel format. For that, you have to insert the module by following below steps:

• Navigate to the page/post where you want to add the carousel
• Enable Visual Builder, click the + (Add Section) button and select a single column.

Note: To create a product carousel similar to ours, adjust the following section and row settings as follows:

• Section Setting: Design tab > Spacing and these padding spacing: 80px (top) and 86px (bottom).
• Row Setting: Design tab > Sizing and change these (width and max width 100%). Then click on “Spacing,” then customize these row spacing settings: 0px (top and bottom) and 37px (left and right).

• Click the gray “+” button to open the module library.
• In the module library, search for “Product Carousel” and click on it.

Step 3: Configure Product Display Settings

Once you have inserted the module, make the following changes inside the “Content” settings:

• Type: Product Category
• Product Count: 10
• Add to Cart Button: Enable it

Step 4: Configure Carousel Settings

To configure carousel-related settings, click on “Carousel Settings” from the module’s setting panel. Then make the following changes:

• Show Item Desktop: 5 columns
• Item Spacing: 24
• Loop: Enable it
• Autoplay: Enable it
• Pause on Hover: Enable it
• Arrow Navigation: Enable it
• Dot Navigation: Enable it
• Equal Height Product: Enable it

Step 5: Design and Style the Product Carousel

So far, we have set up the functionality of the carousel. Now, it’s time to focus on its design and styling. Here is how you will do it:

5.1: Change Background Color:

To change the background color of the entire module, click on Background setting in the Content tab. Then add the following background and hover color:

• Background Color: #734df2 and hover color: #f1edfe

Once you add the background color, next you have to customize other elements by going to the Design tab.

Here are what customizations you have to make:

5.2: Customize Title

To customize the product’s title, click on “Title” and make these changes:

• Title Font: Inter
• Title Text Alignment: Middle
• Title Text Color: #ffffff and hover color: #110a2c
• Title Text Size: 18px
• Title Line Height: 1.2em

5.3: Customize Price

To style the product pricing, click on “Price” in the Design tab,

• Price Font: Inter
• Price Font Weight: Bold
• Price Text Alignment: Middle
• Price Text Color: #e3dbfc and hover color: #734df2
• Price Text Size: 32px
• Price Line Height: 1.2em

5.4: Customize Cart Button

You can also customize the button by clicking on “Add to Cart Button” in the Design tab.

• Cart Button Background: #734df2
• Cart Button Background Hover: #734df2

5.5: Customize Arrow Display

To style the arrow navigation, simply click on “Arrow Settings” and make the following changes:

• Font Size: 40px
• Arrow Color: #ffffff
• Arrow Background: #734df2
• Arrow Position Inside: Enable it

5.6: Customize Spacing

To make the product carousel visually cohesive, add the following spacing by clicking on “Spacing”setting,

• Content Padding: 24px (top and bottom), 16px (left and right)
• Padding: 0px (top), 30px (bottom)

5.7: Style Border

To style the carousel item’s border to make them visually distinct, make the following adjustments in the Design tab’s “Border” setting:

• Rounded Corners: 8px
• Border Width: 1px
• Border Color: #e3dbfc and hover color: #ab94f7

5.8: Style Title with CSS

In the Advanced tab, click on Custom CSS and make the following changes:

• Click on “Module Elements”
• In the Title field, input this class:
  • padding-bottom: 16px;
  • font-weight: 400 !important;

Note: If you find any settings are tough to understand, look at the product carousel documentation for guidance.

Final Preview of Our Created Product Carousel

Have a look at the final preview of our product carousel that we created with DiviGear’s Product Carousel plugin:

Bonus: Make the Product Carousel Responsive

To ensure your product carousel looks perfect on all device types, implement responsive design principles. Inside the Product Carousel plugin, you will find responsive settings options for all elements. 

Simply play with those settings to give your visitors an optimal viewing experience. If you are uncertain about responsive-related things, follow Elegant Themes’ guide on responsive settings for additional help.

Conclusion

So now you know how to create product carousel in Divi. We showed you the process using the Product Carousel plugin that cost just $19 for a lifetime.

Once you get the plugin, you can create as many product carousels as you want on your site. The best part is this plugin also has dozens of free pre-made templates. 

As a result, you can download, import, make necessary changes, and you are done.