Product Carousel for Divi and WooCommerce

Updated on 14/01/2021 | Published on 04/01/2021 | 1 comment

Maybe you're looking for a solution to display your WooCommerce products as a stylish carousel? Perfect, I've tested "Product Carousel for Divi and WooCommerce" for you. This extension indeed allows you to scroll through your WooCommerce store products and offers many customizations. Let's take a closer look...

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - The importance of customizing your WooCommerce store

If you sell your products and/or services online directly on your website, you already know how important it is that your customers feel comfortable in your shop.

This obviously requires a good user experience (accessibility, UX, easy navigation, product classification), display performanceetc.) but also by an elegant and attractive design.

Of course, the images of your products are very important, it is one of the first things to do to make your customers want to take action, but the aesthetics of the shop is just as important...

Take a look at what a WooCommerce store page with Divi looks like, without any customization done:

Boutique WooCommerce Basique
Basic WooCommerce Store

Let's be honest, it's pretty gross 🤣 !

But fortunately the Divi Theme Builder allows you to customize almost all of this very important page for your business... However, one of the things that is not possible to do natively with Divi is a product carousel, and that's the purpose of this article...

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

2 - Optimize the shop page with the "Product Carousel" extension

We just saw that it was not possible to create a product carousel natively with Divi but the Product Carousel extension allows you to do that easily...

The good news is that this extension does not require any additional settings, once you activate it, it simply adds a new module to the list of Divi modulesmodule, it is the Woo Carousel.

This module looks like the other Divi modules, so you won't get lost in its use...

2.1 - Installation and activation of the plugin

Since Product Carousel is a premium extension, you will need to purchase it on one of the official platforms (links at the end of the article).

For my part, I have a Lifetime license with Aspen Grove Studios since 2018, so it is from my account on this platform that I get the official plugin as well as the ready-to-use layouts :

Achat Plugin Product Carousel
Get the Product Carousel plugin
  1. From your account at Aspen Grove or Divi Space, download the Product Carousel plugin.
  2. Take advantage of this opportunity to get the layouts you have at your disposal.
  3. In your account details, also retrieve your license key (copy it).
Installer le plugin et activer la licence
Install the plugin and activate the license
  1. Then install the Product Carousel plugin from your site's administration, in the Extensions > Add > Upload extension. Be sure to import the .ZIP folder (unzipped folder). After activation, you will find a new tab at Divi > Product Carousel.
  2. You will just have to paste your license key for the plugin to become functional.

2.2 - Importing carousel demos

Then, you can simplify your life by importing the pre-built layouts provided by the :

  1. Go to the Divi > Divi Library > Import & Export
  2. In the pop-up, select the Import
  3. Choose the file Demo Carousel All.json : this one is present in the demos folder (unzipped folder, this time) provided by the plugin vendor. By choosing this file, you can import all 9 demos at once. It's quite convenient.
Importer les démos de carrousels
Import carousel demos

A few seconds later, your Divi library has been enriched with 9 new sections ready to use...

2.3 - Creating the shop page with the Theme Builder

If you haven't customized your store page yet, the Divi Theme Builder will be very useful because it allows you to change the entire look of the page.

A previous tutorial explains in detail how to create the shop page with the Theme Builder... I invite you to consult it in addition to this article.

In short, if you haven't created this template yet, here's a quick step-by-step guide:

Page Boutique avec le Divi Thème Builder
Shop page with Divi Theme Builder
  1. Go to the Divi > Theme Builder > click "+" to add a new template tab and assign it the Store page. Note that this template is only present if WooCommerce is already installed and active on your site. If you need to train, discover my ebook WooCommerce which has just been updated.
  2. Use the builder to insert all the modules your page needs. Then click on the blue "+" to add a new section.
  3. In the tab "Add from library" tabtab, you should find the 9 pre-built sections we imported earlier.
9 démo de Product Carousel
Product Carousel comes with 9 demos to import

TaDaaa!!! As you can see on the image above, I had fun importing several layouts and the result is amazing: in 2 clicks my shop page displayed my products as a carousel. Everything was set up.

See the live demos of these carousels.

2.4 - Alternative: create the carousel from scratch

If now you want to fully control the appearance of your product carousel, you can simply add the Woo Carousel module within your shop page.

In fact, you can insert this module anywhere you want, not only on the shop page! For example, you can insert it in your global footer so that a product highlight is available on the entire site, or in the middle of your blog posts if you want to add calls to action, etc.

Module Woo Carousel
Woo Carousel Module

As you can see in the image above, the Woo Carousel module settings use the same structure as the other Divi modules:

  • In the Content tab, you can decide which elements to display: the product title, the main image, the price, the votes, etc. This is also where you can set the speed of product scrolling, autoplay, the title to be displayed on the buttons, the type of products to be displayed, etc.
  • In the Style tab, you will be able to define the colors, sizes, margins and spacing, etc. of each element such as the shopping cart buttons, the carousel arrows and even the position of the promotion badge.

In short, in addition to offering a product carousel, the extension allows to improve some options that are cruelly missing in Divi natively. Many of you have commented on some of the articles in this blog or contacted me to ask how to load the color or text of the add to cart button for example. The use of CSS sometimes allows to correct some colors of the shop but it's not always enough. Phew, the developers of this plugin have thought of that!

2.5 - Store design: before and after

So, here is in two clicks how the design of the shop page could be improved:

Boutique avant-après
Before and after shop

Don't wait any longer! Discover the Divi theme here !

3 - Where can I find "Product Carousel for Divi and WooCommerce"?

This premium (paid) extension is compatible with Divi and Extra themes and WordPress sites with the WooCommerce extension. So to use it, you'll need to have a site with WooCommerce and Divi (or Extra).

You can get it on :

Pricing starts at $39/year for 1 site, other licenses are available for lifetime or unlimited sites.

4 - Other ideas to go further...

The extension Product Carousel extension is not the only one that exists. I chose to test this one because I own the license but there are many others! By the way, if you look on the Official ElegantThemes MarketPlaceYou'll see that other plugins of this kind are not bad either...

However, if you are looking for an extension to create carousels of images, customer reviews, logos or blog posts, you should look at the Divi Gear Carousel ModuleYou will have to look for it. Because the one presented on this article is only functional for the products of the shop.

To go further, do not hesitate to browse the other articles dedicated to WooCommerce and Divi.

Carrousel de produits WooCommerce avec Divi
Carrousel de produits WooCommerce
Product Carousel For Divi Woocommerce

1,371 words

5

You should like it too:

Popups for Divi : un plugin gratuit très malin !

Popups for Divi: a smart free plugin!

Free plugins for Divi are pretty rare, but "Popups for Divi" is pretty effective and easy to use. This plugin converts any Divi section into a popup. I explain how to use it.

1 Commentaire

  1. Daniel

    I bought divi last year and it’s great

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This