1. Home
  2. Docs
  3. Happy Elementor Addons Pro
  4. Premium Widgets
  5. Product Carousel

Product Carousel

Using Product carousel widgets of Happy Elementor Addons Pro, you can easily bring some different flavors to your site’s look & give customers easy navigation to find your products quickly.

So let’s check out how to easily add product carousel widget and customize it step by step:-

Step One:

First of all, you need to add the widget on the working screen. This is where you’ll start working.

Product Carousel

Do make sure that you already have enough products on your store. So it will help product carousel widget to work perfectly.

Well, after adding the widget, you could see that all your products are appearing on the screen.

Products

Step Two:

So here you’ll get the options after adding the widget.

  • Layout
  • Query
  • Carousel Settings
  • Wrapper Link
Product Carousel

Let’s check out them one by one:-

Layout

When you tap on the Layout, you could see the related options that will be available for you. For example, image structure, show or hide image contents and alignment, etc.

Layout

Here you can two types of Skins. Classic and Modern.

Carousel Skins

After you click on the Query section, you’ll have certain things to customize. Here you can exclude or include queries (actually your product tags will work here).

Okay, let’s say you want to include only Hoodie item. So click on the Include and type hoodie. That’s all, item related to the Hoodies will appear on the screen.

Hoodies

On the flip side, if you want to Exclude hoodies, simply click on the exclude and type the product name.

Hoodies with logo

After that you can organize product order either in a ascending view or in a descending view. Also, you can customize the Add to cart button.

Layout

In the carousel settings, you can set the animation speed, duration, auto play option and also determine how to slides do you want to show, etc.

Carousel Settings

To know more about the wrapper link check out our official documentation or you can check out the following video.

Step Three:

Now it’s time to give a stylish look and change the style a bit. To do that, click on the Style section.

Stylize Items

So the first option for giving a style on to your design is Carousel Item. Here you can resize, give a border radius, select the border type, box-shadow and background type.

Happy Features

Next click on the Image Section. Here you’ll have certain things to customize your product images. For example, you can change height and weight, margin, padding, image position, typography, etc.

Product Carousel

Again, click on the Content section. Here you can customize content’s color, typography, price color, typography, rating color, etc.

Product Carousel

Next, you have Add to cart button. Similarly, you can customize its spacing, padding, border-radius, typography, border type, color, etc.

Product Carousel

Next, tap on the Navigation Icon and here you can customize its size, position, colors and other things.

Product Carousel

You can perform the same task to edit the Quick Navigation section. Such as colors, position, etc.

Product Carousel

Lastly, you’ll have Quick Navigation View to edit. So after your customers click on the add to cart button or want to see the overall view of the products, s/he can see the following one.

So you can change the title, text, color, add to cart background color, text, and more.

Product Carousel

Step Four:-

If you want to add motion effects, happy effectsbackground, or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor.

Give a read to this Document to know more about advanced features & functions.

Product Carousel

Finally, after clicking the publish button you will see the beautiful product carousel on your webpage.

Product Carousel

That’s it!

Was this article helpful to you? Yes No

How can we help?