Product Slider BlockFree downloadMenu

How to add a WooCommerce product slider without a shortcode

You do not need a shortcode any more, and you may not need a plugin at all. Here are the three real options, in the order we would try them, and what each one cannot do.

A product slider block. Drag it, or add a product to the cart. Sample products.

Pair of red leather low-top sneakers with white laces and soles on a light grey background
Red court low€129Soft leather upper, cushioned sole. Comes with a spare set of laces.
Navy pebbled leather sneaker with a white sole, suspended against a grey wall
Navy pebble low€149Soft leather upper, cushioned sole. Comes with a spare set of laces.
Silver metallic sneakers worn with blue jeans, legs raised against a grey backdrop
Silver foil low€139Soft leather upper, cushioned sole. Comes with a spare set of laces.
Pair of white chunky sneakers with taupe panels lying on red satin
White chunk runner€135Soft leather upper, cushioned sole. Comes with a spare set of laces.
Pair of pale grey suede trainers with lugged soles on a dark glass plinth
Pebble trainer€155Soft leather upper, cushioned sole. Comes with a spare set of laces.

Option one: the Product Collection block

Since version 10.2, WooCommerce's own Product Collection block has a carousel layout. Add the block, pick a collection such as On Sale Products or Featured, and choose the Carousel layout. No plugin, and no shortcode.

That is a horizontal row that scrolls, with arrows. If that is all you want, stop here. WooCommerce maintains it, and it inherits your theme. At the time of writing it has no autoplay and no per-device slide counts, so check the current block settings before you decide those are a problem.

Option two: a block from a plugin

Plugins add what the core block leaves out: autoplay with a pause, products per device, transitions. Search the plugin directory for a slider that lists a block in its description, as a number of well-known ones are still shortcode-first. Then test it for three things: does it load scripts on every page, or only pages with a slider? Does add to cart work on a cached page? And does it stay readable with JavaScript off?

Ours is one such plugin. Product Slider is a block with products from any source, and the free version has rows, autoplay with a pause button, and the stretch and parallax effects. Since we made it, you should weigh that recommendation accordingly.

Option three: a few lines of code, and no plugin

If you search for "woocommerce product slider without plugin", this is what you are after. Render products with wc_get_products(), wrap them in a scroll container, and let CSS scroll snap do the sliding:

.products-row { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; }
.products-row > * { flex: 0 0 min(70%, 18rem); scroll-snap-align: start; }

Scroll snap gives you dragging on touch screens, keyboard scrolling and no JavaScript at all. What you give up: autoplay, arrows unless you add them, and mouse dragging on a desktop. For a small related-products row on a simple site, that is often a fair trade.

What about shortcodes you already have?

The older shortcode plugins keep working, and there is no urgency to rip them out. The usual reason to move is editing: with a block you see the result in the editor and pick products from a list, instead of remembering IDs. If nobody edits that part of the page, leave it alone.

Questions

Does WooCommerce have a product slider built in?

Yes, since version 10.2 the Product Collection block has a carousel layout. Older versions do not.

Can I add a product slider without a plugin?

Yes. Use the core carousel, or a small template with CSS scroll snap. Both work without any extra plugin.

Do I need Elementor for a product carousel?

No. The block editor is enough, either with the core block or with a block plugin.

More guides