This plugin adds three blocks for showing products in the block editor. They need WooCommerce and work with any theme that supports blocks.

Product Slider shows a row of products that visitors can drag, swipe or move with arrows.

• Choose what it shows: all products, featured, on sale, best sellers, top rated, newest, hand-picked, from categories or from tags. On a product page it can also show that product’s related products, upsells or cross-sells.
• Narrow any source down by categories, tags, brands, attributes or a price range, and leave out categories, tags or products.
• Set how many products to load (up to 50), their order, and whether sold-out products are hidden.
• Set how many are in view on desktop, tablet and mobile.
• Turn arrows, dots, starting over at the end and automatic sliding on or off. Automatic sliding has a pause button.
• Choose the style and place of the arrows, bars, numbers or a progress line for the dots, thumbnails, how many products a step moves, and centring.
• Show the same products as a grid instead of a slider.
• Four styles: Card, Duke, Zoe and Steve. Two image effects: stretch with the speed, and parallax.
• Show or hide the price, rating, sale badge, short description and add to cart button.
• Put the name, price and button below the picture or on a panel over it, always or when pointed at.
• When a card is pointed at, show the second picture or a closer look, and choose the effect that brings the second picture in: fade, ripple, zoom, glitch or zoom through.

Morph Card shows one product, with its gallery and the images of its variations. With two images it changes when pointed at, with more visitors use the arrows and swatches (a setting changes this), with a ripple, fade, zoom or glitch transition. It moves to the next image once and rests there until the pointer leaves. Swatches change the image, and its details can come in over the image.

Product Stage shows the gallery and the choices of one product, with thumbnails, a lightbox, and variations that change the image, the price and the stock. Use it on a product page or anywhere else.

Across the shop. Two switches under WooCommerce > Settings > Products, both off until you turn them on: the changing image on every list of products, and the Product Stage in place of the gallery on every product page.

The plugin also adds ten block patterns under “Product sliders”, such as a sale strip, a row of new arrivals and a product page layout.

Products are part of the page’s HTML, so visitors who aren’t logged in see them, and a slider works without JavaScript as a row that scrolls. Adding to the cart goes through your own shop and updates the mini cart. Keyboard use and reduced motion settings are respected.

How to use

1. Install and activate WooCommerce and this plugin, and add some products.
2. Edit a page or post and add the “Product Slider” block. You can also open the Patterns tab of the inserter and pick one from “Product sliders”.
3. In the block’s settings on the right, pick what to show under “Products”, then adjust “Slider” and “Display”.
4. For one product, add “Morph Card” or “Product Stage”. Leave the product empty to use the product of the page you’re on, or pick one in the settings.
5. Save and view the page.

Source code

The readable source of the JavaScript and styles ships in the plugin, in the src/ folder. To build it, run npm install && npm run build in the plugin’s folder; the output goes to build/. It uses @wordpress/scripts.

The slider itself is the npm package gpuslider (“gpu slider”), under the MIT license. Its source is at github.com/niklasp/gpuslider.

External services

The blocks use nothing outside your site: images, scripts, styles and the cart all come from your own server, through its own WooCommerce. There’s no tracking, no remote font and no remote script.

Freemius. The plugin includes the Freemius SDK, in vendor/freemius, which handles licensing for the separate Pro plugin. It is used only when a Pro license is bought or activated: then the license key, the site’s address, and the PHP and plugin versions go to Freemius to check the license and deliver updates, along with the email address and payment details given at checkout. Without that, nothing is sent to Freemius. Terms, Privacy

1. Install WooCommerce.
2. Install this plugin from the Plugins screen, or upload its folder to /wp-content/plugins/.
3. Activate it, and follow “How to use” above.

1. 

   A product slider with the Panel layout: the name, price and button come up when a card is pointed at.

2. 

   A grid of one category, with the Glitch effect bringing in the second picture.

3. 

   Morph Cards: one product moving through its pictures, with its price and add to cart.

4. 

   The Product Stage: a product’s images, price and add to cart in one block.

5. 

   The switches for the whole shop under WooCommerce > Settings > Products.

6. 

   The slider block in the editor, with its settings.

Does it need WooCommerce?

Yes. The blocks show WooCommerce products, and the plugin can’t be activated without it.

Why doesn’t my slider show anything?

It shows published products that fit its settings. If there are none, for example with “On sale” and no product on sale, it shows nothing to visitors and a short message in the editor. “Related”, “Upsells” and “Cross-sells” only show products on a product page.

Does it work without JavaScript?

Yes. The products are in the page’s HTML, and without JavaScript a slider is a row that scrolls. The add to cart buttons are then plain links.

Do the image effects work in every browser?

They are drawn with WebGPU or WebGL 2 where the browser has them. Elsewhere, and for visitors who ask for reduced motion, the images just move or fade.

I had version 1.0. What happens to my sliders?

They keep working. See the upgrade notice for 2.0.0.

2.0.0

• Arrows on the Morph Card and the Product Stage, with a switch for them.
• A new free transition, Zoom through: the camera flies through the image into the next one.
• The Panel layout is a shade over the picture with light text, instead of a white box.
• With more than two images, a Morph Card no longer changes on hover by itself, unless you set it to.
• Buy buttons show that a product was added: a check draws itself and the words change.
• Narrow any source down: categories, tags, brands, attributes, a price range, and categories, tags or products to leave out.
• New controls for a slider: arrow styles, arrows below it, bars, numbers or a progress line for the dots, products per step, centring, speed, resting anywhere, trackpad and wheel, pause on hover as a choice, thumbnails.
• Show the same cards as a grid instead of a slider.
• A second picture or a closer look when a card is pointed at, with a choice of the effect that brings the second picture in.
• Name, price and button can sit below the picture or on a panel over it, always or when pointed at.
• Hovering a product now morphs to its second image and rests there.
• Rebuilt from the ground up on the current block tools. Sliders made with 1.0 keep working: their block, their style, their order and their count stay.
• Products are now rendered on the server, so visitors who aren’t logged in see them, and a slider works without JavaScript as a row you can swipe.
• New sources: featured, on sale, best sellers, top rated, newest, hand-picked, categories, tags, and on a product page its related products, upsells and cross-sells.
• New slider settings: products in view per device, arrows, dots, start over at the end, slide automatically with a pause button, hide sold-out products.
• New Card style, and two effects on the images: stretch with the speed, and parallax.
• Add to cart works from the slider and updates the mini cart.
• New blocks: Morph Card, one product whose image changes under the pointer, and Product Stage, the gallery and choices of a product.
• Two switches under WooCommerce > Settings > Products: the changing image on every list of products, and the Product Stage on every product page.
• Ten block patterns.
• Requires PHP 7.4 and WooCommerce.

1.0.0

• First version.