WooCommerce Products Carousel

How to use WooCommerce Products Carousel Widget of Sky Addons for Elementor

The Sky Addons WooCommerce Products Carousel widget shows your WooCommerce products in a sliding carousel that shoppers can swipe or scroll through. It uses the same seven card designs as the WooCommerce Products grid, so a “Featured products” row and your main shop grid can look identical. Shoppers can add products to their cart or open a Quick View popup straight from a slide, without the page reloading. This documentation explains every setting in plain language, step by step.

Features:

Seven Card Designs: Classic, Overlay, Minimal, Soft, Glass, Split, and Focus: the same set as the WooCommerce Products grid, so your shop stays visually consistent.
Touch and Swipe Ready: Shoppers swipe on phones and tablets and drag with a mouse on desktop.
Autoplay, Loop, and Speed: Let the carousel advance on its own, run endlessly, and set how fast each slide moves.
Arrows and Dots: Show navigation arrows, dot pagination, or both, and style each fully.
Different Slide Counts Per Device: Show four products on desktop, two on tablet, and one on mobile.
Add to Cart and Quick View: Both work directly from a slide, with no page reload.
Real Star Ratings and Discount Badges: Gold review stars, and a badge showing the actual percentage saved such as -33%.
Alignment Control: Move all card text and buttons left, centre, or right, with a separate choice per device.
Image Ratio and Image Fit: Force every product photo into the same shape so slides never jump in height as the carousel moves.

Insert WooCommerce Products Carousel Widget

Make sure WooCommerce is installed and active with at least one published product. The widget only appears in Elementor when WooCommerce is running.

Open your page and click Edit with Elementor.
Click the + icon to add a section.
Search for WooCommerce Products Carousel in the widget panel.
Drag it onto the canvas. Your products appear immediately as a carousel.

Choose a Card Design and Layout

Open the Layout section in the Content tab.

Style: Pick one of the seven card designs:
- Classic: Image on top, details below, buttons always visible. The best all-rounder.
- Overlay: Text over the photo. Needs images with calm, empty space.
- Minimal: No borders or shadows, buttons styled as small text links.
- Soft: Rounded corners and gentle shading.
- Glass: A frosted panel over the image. Best over colourful photos.
- Split: Image one side, details the other. Best with only one or two slides visible.
- Focus: Photo only, with everything else appearing on hover. Use it where your visitors are mostly on desktop.
Alignment: Moves the category, rating, title, price, and buttons together to the left, centre, or right. Set it per device.
Show Actions (Classic and Glass only): Keep buttons always visible, or reveal them on hover. Hover reveal is skipped automatically on touch devices and never hides the buttons from keyboard users.
Image Ratio and Image Fit: Force all photos into one shape. This matters more in a carousel than in a grid: without it, slides of different heights make the carousel jump as it moves.

Choose Which Products to Show

Open the Query section.

Source: All products, a Category or Tag, a Manual selection, or Related products.
Products Per Page: How many products the carousel holds in total.
Order By and Order: Sort by date, title, price, popularity, or menu order.
Exclude: Leave specific products out.

Tip: A carousel works best with roughly eight to sixteen products. Fewer than the number of visible slides and there is nothing to scroll; far more and most shoppers never reach the end.

Turn Card Elements On and Off

The Elements section has an on/off switch for every part of a card, in the order they appear: Show Image, Show Sale Badge, Show Category, Show Rating, Show Title (with Title Tag), Show Price, Show Text (with Text Limit and Strip Shortcode), Show Add to Cart, and Show Quick View.

Keep cards short in a carousel. A tall card means fewer products fit on screen, and shoppers have to scroll the page rather than the carousel.

Configure Carousel Settings

Open the Carousel Settings section: this is what makes the carousel behave the way you want.

Slides Per View: How many products are visible at once. Set this separately for desktop, tablet, and mobile: four, two, and one is a reliable combination.
Slides To Scroll: How many products move per swipe or arrow click. One feels the most natural.
Space Between: The gap between slides, in pixels.
Autoplay and Autoplay Speed: Advance slides automatically, and set how long each one stays. Anything under three seconds is too fast to read a price.
Pause on Hover: Stops autoplay while a shopper is pointing at a card, so it does not slide away as they read it. Keep this on.
Loop: When the shopper reaches the end, the carousel continues from the beginning instead of stopping.
Speed: How long the sliding animation takes.
Grab Cursor: Shows a “grab” hand cursor so desktop visitors know the carousel can be dragged.

Configure Arrows and Dots

Navigation: Turn the previous and next arrows on or off, choose their icons, and set their size and position.
Pagination: Turn the dots on or off and choose their type: bullets, fraction, or progress bar.

Show at least one of the two. Without arrows or dots, many visitors never realise there are more products to see.

Configure the Buttons and Quick View Popup

Add to Cart: Leave the icon empty to use the built-in shopping bag, or pick your own. You can hide the wording for an icon-only button. The button text comes from WooCommerce, so products with options read Select options and open the product page.
Quick View: Leave the icon empty for the built-in eye icon. The popup loads a product’s details only when clicked, so the carousel stays light.
Modal settings: Control the popup’s width, background, and close button.

Style Your WooCommerce Products Carousel

Switch to the Style tab. Sections are listed in the order the pieces appear on a card, followed by the carousel controls.

Item: The card: background, padding, border, corner rounding, and shadow, with normal and hover states.
Image: Corner rounding and hover zoom.
Badge, Category, Rating, Title, Price, and Text: Colours, typography, and spacing for each. The Rating section has both a Star Color and an Empty Star Color.
Add to Cart Button and Quick View Button: Typography, padding, border, corner rounding, icon size, and normal and hover colours.
Modal: Styling for the Quick View popup.
Navigation and Pagination: Colours, sizes, backgrounds, and positions for the arrows and dots.

Save and Preview

Click Update to save.
Check the carousel on tablet and mobile with the responsive icons at the bottom of the panel.
On the live page, swipe or drag the carousel, then test Add to Cart and Quick View on a slide.

Best Practices

Always set Image Ratio. Mismatched photo heights are far more obvious in a carousel than in a grid.
Keep Pause on Hover switched on. Nothing is more frustrating than a product sliding away mid-read.
Show one slide on mobile. Two cramped cards on a phone are harder to use than one clear one.
Do not autoplay too fast. Four to six seconds per slide gives shoppers time to actually look.
Match the card design to your product grid so your shop feels like one coherent site.
Use a carousel for a highlight row, not your whole catalogue. A grid with pagination is better for browsing everything.

Troubleshooting

The widget is missing from Elementor. WooCommerce must be active, and the widget must be enabled in Sky Addons → Widgets.
The carousel does not slide. You probably have fewer products than Slides Per View, so there is nothing to scroll to. Add more products or reduce Slides Per View.
Slides jump or change height while sliding. Set Image Ratio and Image Fit so all cards are the same height.
Loop mode shows a product twice. That is normal: looping needs duplicate slides at the ends to create a seamless join. Add more products and the duplicates stop being noticeable.
A style change does not show on the live page. Clear your caching plugin and your CDN.
Add to Cart or Quick View does nothing. Check the browser console: a JavaScript error from another plugin or your theme can stop all scripts on the page.
Arrows sit in an odd place. Adjust their position in the Navigation style section; a very tall or very short card changes where the middle of the carousel is.

Frequently Asked Questions

What is the difference between WooCommerce Products and WooCommerce Products Carousel?

They share the same card designs and the same product settings. The grid lays products out in rows with optional pagination; the carousel puts them in a single sliding row. Use the grid for browsing a catalogue and the carousel for a highlight row such as “Featured” or “New arrivals”.

Can shoppers swipe on a phone?

Yes. Touch swiping is built in and needs no configuration.

Why do I see the same product twice?

Loop is enabled and you have only a few products. Looping copies slides to the ends so the carousel can run continuously. Add more products, or turn Loop off.

Does the carousel have pagination like the grid?

Not page numbers, no: a carousel scrolls instead. The Pagination setting here refers to the carousel’s dot indicators. If you need numbered pages, use the WooCommerce Products grid.

Can I show a different number of products on mobile?

Yes. Slides Per View is a responsive setting with its own value for desktop, tablet, and mobile.

Does autoplay hurt accessibility?

Content that moves on its own can be hard for some visitors to use. If you enable autoplay, keep Pause on Hover on and use a slower speed so nobody is rushed.

Conclusion

The WooCommerce Products Carousel widget puts a polished, swipeable product row anywhere on your store, using the same card designs as your product grid so everything matches. Set the slide counts per device, keep the images a consistent shape, and shoppers can buy straight from a slide. If you have any questions or need help, visit the Sky Addons support center.

Sky Addons for Elementor