WooCommerce Product Carousel in Elementor: Three Ways That Work

Featured image: WooCommerce product carousel with three product cards, prices, a sale badge and add to cart buttons

There is no Master Addons WooCommerce product carousel widget. That’s the honest answer up front, and it saves you an install.

What does work is three routes. Elementor Pro’s Loop Carousel is the only one that runs a live product query, so pick it if the strip should follow your catalogue. The free Quadrant Paged Catalogue design gives you a hand-curated nine-item showcase with no query behind it. And Master Addons’ Featured Product widget spotlights one product, with the free Image Carousel covering product photography. All three sit inside the wider Elementor carousel widget family; if you’re kitting out a whole store, the best Elementor addons for WooCommerce roundup covers the rest.

Below: how each one is built, then the part most tutorials skip, which is where a product carousel actively costs you sales.

Which method to pick

  • You have Elementor Pro and the strip should track stock, price and new arrivals → Loop Carousel. It’s the real answer.
  • You want nine hand-written cards you control down to the last line of copy → Quadrant Paged Catalogue, free.
  • You want to push one product hard → Featured Product, Pro.
  • You just need product photos on a track → Image Carousel, free.

Method 1: Elementor Pro’s Loop Carousel

Elementor Pro solves this natively, so start here. The Loop Carousel takes a Loop Item template, one product card you design once, and points it at a WooCommerce query. Add a product, change a price, sell out of a size, and the carousel reflects it without anyone opening the editor. No addon involved.

  1. Build the Loop Item template. Templates → Theme Builder → Loop Item, source set to Product. Lay out image, title, price, rating and button using dynamic tags.
  2. Drop the Loop Carousel widget on the page and select that template.
  3. Set the query. Source is where the real work happens: all products, a category, a tag, on sale, featured, or manual selection. Then order by date, price, popularity or menu order.
  4. Set how many to load. This is the total the carousel holds, not how many are visible. Eight to twelve suits a related-products strip. Load four with four visible and there’s nothing to scroll to.
  5. Exclude what shouldn’t be there. Out-of-stock items, and on a single product page, the current product. A related-products strip that includes the product you’re already looking at reads as broken.
  6. Set slides-per-view per breakpoint. Four on desktop, three on tablet, one and a half on mobile.

That “one and a half on mobile” isn’t a typo. A full card plus half of the next one is the strongest signal a strip scrolls. One card filling the width looks like a static block and most people never swipe it.

The catch is the licence. Loop Carousel is Pro-only, with no free equivalent in Elementor core. the carousel plugin roundup goes through the query controls and the free workarounds in detail.

Method 2: hand-curated with Quadrant Paged Catalogue (free)

A live query is sometimes exactly wrong. A homepage collection where you want to write every line yourself, or a product showcase on a site that doesn’t run WooCommerce at all, wants hand-picked cards.

Quadrant Paged Catalogue is one of the eight free importable Widget Builder designs: a grid of nine item boxes paged three at a time, with a segment rail that shows where you are and jumps between pages. Each box holds an image, a category label, a title, a line of copy and a stat, all typed in by hand, which is the point.

Quadrant Paged Catalogue Elementor carousel design with nine item boxes paged three at a time and segment rail navigation

Live Demo Download Widget JSON

It imports on the free plugin through Master Addons → Widget Builder → Import Widget, then appears in Elementor under Favorites. The rest of the set, twenty designs with eight of them free, is in the free Elementor slider templates roundup.

The honest caveat: nine items, fixed. It is not a product query. Nothing tracks stock, nothing updates a price, and a sold-out item sits there until you edit the box. Use it for a curated set you rarely change. For anything that has to follow the catalogue, go back to Method 1.

Method 3: Featured Product, and Image Carousel for photos

Master Addons has exactly one WooCommerce widget, and it isn’t a carousel. The Featured Product widget is Pro, and it does a different job: one product, given room, with image, title, price, description and a buy button laid out as a block rather than a card in a strip.

That’s often the better shape anyway. A single product with space around it converts harder than the same product as one of four cards someone has to scroll past. Use it for a launch, a bestseller, or the one item a landing page is built around.

For product photography on a track (six angles of the same jacket, a lookbook, a materials strip) the free Image Carousel handles it. Lightbox, captions, per-device slides-per-view.

Master Addons Image Carousel widget in the Elementor panel, used for product photography carousels

Be clear about what it isn’t: you add the images yourself and they don’t link to products unless you set the links by hand. It is a photo carousel, not a shop feed.

Where a product carousel belongs

Whichever method you use, four positions work reliably:

  • Related products on a single product page. The visitor is already interested in this category. A sliding strip of four alternatives is a service.
  • Cross-sells and “complete the look.” Accessories under a main product. Nobody needs to see all twelve; they need to know twelve exist.
  • A featured or seasonal collection on the homepage. Curated, not exhaustive.
  • Recently viewed. Small, personal, and a carousel is the natural shape for it.

What those share: the products are optional. The page still works if nobody touches the strip.

Where it costs you sales

Never put a carousel on a shop or category page.

This is the one to get right. A category page exists so people can compare: scan a grid, spot the one they want, click. A carousel shows four products and hides the rest behind an arrow, which turns comparison into a memory exercise. The visitor has to hold product two in their head while looking at product six.

There’s a presentation cost too. A carousel and a grid can output the same markup, but a category page that visibly shows six items reads as a thin category, both to shoppers and to anyone judging the page’s depth. Your shop page should look like a shop.

Second bad position: above the fold on mobile. A product carousel is a query, a template render and a slider initialisation before anything paints. At the top of a phone page, that’s your largest contentful paint spent on a spinner. Put a static hero there and start the carousel below it.

Add to cart: in the carousel or not?

Show the button for simple products. Hide it for variable ones.

A simple product with AJAX add-to-cart in the strip is a real shortcut: one tap, no page load, cart updates. Worth having.

A variable product can’t be added without picking a size or colour, so the button either does nothing or bounces the shopper to the product page. Both feel broken. For variable products, make the whole card a link and skip the button.

If your catalogue mixes both, run two carousels with different queries rather than one compromise layout.

Sale badges and price display

Show the sale badge. It’s the highest-contrast thing in a product card and it’s the reason people stop scrolling.

Show the price, including the struck-through original on sale items, because the comparison is the persuasion.

Variable products display a range (“£20 to £45”). Long ranges wrap and break card alignment, and misaligned cards in a horizontal strip are far more visible than in a grid. Either set a fixed height on the price row or show “From £20.”

Card design that doesn’t look amateur

Three things matter more than the rest.

Equal card heights. Product titles vary wildly in length, and a two-line title beside a one-line title pushes the price row to different heights. Set a fixed title height with truncation, or turn on auto-height so the row levels itself.

One image aspect ratio. Portrait and square product photos in the same strip is the single most common reason a product carousel looks cheap. Set a ratio and let it crop.

Gap between cards. 16 to 24px. Zero gap makes products bleed together; too much and four cards stop reading as a set.

Autoplay for products?

No, and this one isn’t a preference.

Product cards are clickable. Autoplay means a card can move as someone reaches for it, and a shopper who taps the wrong product usually doesn’t go back and try again. They leave. Pause-on-hover covers desktop; on touch there’s no hover at all, and mobile is where most of your shoppers are.

Turn it off.

Performance: what a product carousel actually costs

Every product in the query is a database read plus a template render, and the slider script can’t initialise until that markup exists. Three practical limits:

  • Cap the query at twelve. Beyond that you’re rendering cards nobody reaches.
  • Lazy-load everything except the first row of visible images. Off-screen slides loading eagerly is the usual cause of a slow product page.
  • Serve the card image at card size. A 2000px product photo scaled into a 300px card is the most common wasted download on a WooCommerce site.

One carousel per page section is a reasonable ceiling. Three stacked carousels on a homepage is three sliders competing for the main thread on a phone.

Schema: don’t hand-roll it

WooCommerce already outputs Product structured data on single product pages, and that’s where Google wants it. A carousel of product cards on a homepage or landing page doesn’t need its own Product markup, and adding it by hand is a good way to end up with price or availability data that contradicts the real product page.

If the carousel cards link to the product pages, and they should, the crawl path is intact and the structured data lives where it belongs. Leave it alone.

Frequently asked questions

Does Master Addons have a WooCommerce product carousel widget?

No. Master Addons has one WooCommerce widget, Featured Product, and it spotlights a single product rather than sliding through several. For a real product carousel, use Elementor Pro’s Loop Carousel with a product Loop Item template. For a hand-curated showcase on the free plugin, import the Quadrant Paged Catalogue design and fill in the nine boxes yourself.

Does WooCommerce have a product carousel?

Not natively. WooCommerce outputs products in grids: shop page, category archives, related products. A sliding carousel needs either Elementor Pro’s Loop Carousel with a product template, or a third-party widget that adds one.

How do I make a product carousel in Elementor for free?

Free Elementor has no dynamic product carousel, so the honest free path is a hand-curated one: import the Quadrant Paged Catalogue design through Master Addons → Widget Builder → Import Widget and type in the nine items, or use the free Image Carousel for product photography with manual links. Anything that queries the catalogue automatically needs Elementor Pro.

Should I use a product carousel on my shop page?

No. Category and shop pages exist so people can compare products at a glance, and a carousel hides most of them behind an arrow. Use a grid on listing pages and save carousels for related products, cross-sells and curated collections.

Can a product carousel show add-to-cart buttons?

Yes, if you build the card yourself in a Loop Item template. Put the add-to-cart in the template and every slide gets one. Show it for simple products with AJAX add-to-cart; hide it for variable products, which need a variation selected first, so the button either fails or redirects.

How many products should be in a carousel?

Eight to twelve loaded, four visible on desktop. Fewer than eight and there’s barely anything to scroll to; more than twelve and the tail is never seen. If you need more than that, the content wants a grid.

Why do my product cards have different heights?

Product titles of different lengths push the price and button rows to different positions. Set a fixed title height with truncation, or turn on auto-height so the row matches the tallest card. Set a fixed image aspect ratio too, because mixed portrait and square photos cause the same problem.

Next

Shooting one product from six angles rather than listing six products? That’s the image carousel tutorial, which covers the lightbox and caption side.

Everything carousel-shaped, free and Pro, is on the carousel widget hub, and the free versus Pro breakdown shows exactly what a licence adds.

Quadrant Paged Catalogue imports free. The other twelve designs need a licence, and the pricing page shows which tier each one falls under.

Picture of Roy
Roy
I'm Roy, part of the Master Addons for Elementor team. I write the tutorials, record the videos, and keep the documentation current, so you always know how to use every feature. I also handle support, so if you hit a snag, I'm the person who helps you fix it. Real answers, from someone who uses these tools every day.

Leave a Reply

Your email address will not be published. Required fields are marked *

Master Addons mid-year reset promotion banner offering 40% off

Still On The Fence? We Get It.

Every Master Addons Pro license comes with a 14-day no-questions refund, lifetime updates, and priority support. Try it risk-free this Spring – 40% OFF with “RESET40″ coupon.

No thanks, I'll pay full price later