Maybe you're looking for a solution to display your WooCommerce products in 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 shop products and offers many customizations. Let's take a closer look...
Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.
1 - The importance of customizing your WooCommerce shop
If you sell your products and/or services online directly on your website, you already know how important it is that visitors feel comfortable in your shop.
This obviously requires a good user experience (accessibility, UX, easy navigation, product ranking), 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 shop page with Divi looks like, without any customization being done:
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 subject 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 - Optimise the shop page with the "Product Carousel" extension
We have just seen that it was not possible to create a product carousel natively with Divi but the Product Carousel extension allows you to do this 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 using it...
2.1 - Installation and activation of the plugin
As 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:
- From your account at Aspen Grove or Divi Space, download the Product Carousel plugin.
- You can also use this opportunity to collect the layouts that are available to you.
- In your account details, also retrieve your licence key (copy it).
- Then install the Product Carousel plugin from your site's administration, in the Extensions > Add > Upload extension. Make sure you import the .ZIP folder (unzipped folder). After activation, you will find a new tab at Divi > Product Carousel.
- You just have to paste your license key to make the plugin work.
2.2 - Importing carousel demos
Then you can simplify your life by importing the pre-built layouts provided by the :
- Go to the Divi > Divi Library > Import & Export
- In the pop-up, select the Import
- Choose the file Demo Carousel All.json This file is located in the folder (unzipped folder) of the demos provided by the plugin vendor. By choosing this file, you import all 9 available demos at once. This is quite practical.
In a few seconds, your Divi library has been enriched with 9 new ready-to-use sections...
2.3 - Creating the shop page with the Theme Builder
If you haven't customized your shop page yet, the Divi Theme Builder will be very useful as 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 as a complement to this article.
In short, if you have not yet created this model, here is a quick guide:
- Go to the Divi > Theme Builder > click on "+" 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 training, find out about my ebook WooCommerce which has just been updated.
- Use the builder to insert all the modules your page needs. Then click on the blue "+" to add a new section.
- In the tab "Add from library" tabtab, you should find the 9 pre-built sections we imported earlier.
TaDaaa!!! As you can see on the picture 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 you now want to fully control the appearance of your product carousel, you can simply add the Woo Carousel module to your shop page.
In fact, you can insert this module anywhere you like, not just 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.
As you can see from 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 the product scrolling, the autoplay, the title to be displayed on the buttons, the type of products to be displayed, etc.
- In the Style tab you can define the colours, sizes, margins and spacing etc. of each element such as the shopping cart buttons, 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 certain articles in this blog or contacted me to ask how to load the colour or text of the add to cart button for example. The use of CSS sometimes allows you to correct certain colours in the shop but that's not always enough. Phew, the developers of this plugin have thought of that!
2.5 - Shop design: before and after
So, here are two clicks on how the design of the shop page could be improved:
Don't delay! 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 will 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! Moreover, if you look at the Official ElegantThemes MarketPlaceYou will 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 Divi Carousel Module from Divi GearYou will have to look for it. Because the one presented in this article is only functional for the shop's products.
To go further, please feel free to browse the other articles dedicated to WooCommerce and Divi.
I bought divi last year and it’s great