WooCommerce Products Slider for Elementor: Setup and Tips

Sometimes a product needs the whole stage, not a spot in a row. A products slider gives it that: big, full-width slides that each carry one or a few products with room for a strong image, the price, and a clear call to action. This is the Products Slider widget from the Magical Products Display add-on for Elementor, when to use it, how to add it, and how to make it sell.

Type Elementor widget
For WooCommerce
Layout Full-width slider
Best for Spotlighting a product

Why use a products slider

A hero is the first thing shoppers see, and a plain grid does not make an impression there. A slider does: each slide fills the width, so the image is large, the message is clear, and the button is unmissable. It is the difference between listing products and presenting one. When a launch or a flagship deserves attention, the slider is the tool.

Slider vs carousel

They look similar but pull in opposite directions. Match the widget to the goal.

	Products slider	Product carousel
Slide size	Large, full-width	Small, several per view
Items per view	One or a few	Three to five
Best for	Spotlight and hero	Featuring a set to browse
Typical place	Top of page, campaigns	Home rows, related items

How to add a Products Slider in Elementor

With the Magical Products Display add-on active:

Activate the add-on and edit your page with Elementor.
Drag the Products Slider widget onto the canvas, usually near the top.
Choose the products: featured, on-sale, best-selling, a category, or hand-picked.
Set slides and motion: one or a few per view, plus autoplay, loop, arrows, and speed.
Style and publish: backgrounds, overlays, and the call-to-action, then check mobile.

Options worth setting

Product source. Featured, on-sale, best-selling, category, tag, or hand-picked.
Slides per view. One for a true hero, a few for a wider feature.
Motion. Autoplay speed, loop, arrows, and dots.
Card details. Price, rating, sale badge, and add-to-cart on each slide.
Styling. Backgrounds, overlays, and spacing in Elementor.

Tips for a slider that sells

Lead with one message per slide, so the eye is not split between competing offers.
Make the button obvious, with clear label text and strong contrast.
Size images to the slot and use optimized formats to keep the hero fast.
Slow the autoplay or let people control it, so a slide can actually be read.
Limit to a few slides, since shoppers rarely swipe past the first two or three.

See more widgets and themes

Browse the full set of Elementor widgets and WordPress themes in the WP Team X demos.

Open the demos

Frequently asked questions

How is a products slider different from a carousel?

A slider is larger and shows one or a few products per view, so each gets a big image and a clear call to action. A carousel shows several smaller items per view for browsing. Use a slider to spotlight, a carousel to feature a set.

Where should I place a products slider?

Near the top of a page as a hero, on a campaign landing page for a launch, or at the top of a category to spotlight the flagship. It works best where one product at a time deserves attention.

Can I choose which products the slider shows?

Yes. Choose featured, on-sale, best-selling, a specific category or tag, or hand-picked products, and set autoplay, arrows, and dots to taste.

Does a large slider hurt page speed?

A hero slider loads big images, so use optimized formats, size images to the slot, enable lazy loading for lower slides, and run a caching plugin. One well-built slider is fine.

Should the slider autoplay?

If it autoplays, keep it slow and pause on hover so shoppers can read a slide. For hero content, many stores prefer manual control or a long delay to avoid moving the message too soon.