Colour swatches on the product card, where people choose

How it works on a Morph Card

The swatches come from the product's attributes, and each one leads to the image set on the matching variation. Hovering previews it, and clicking picks it, through the same transition as the image change. On a touch screen, a tap picks. If a variation has no image of its own, there is nothing to change to, so the picture stays put. Good variation images are the whole of this feature.

Where a swatch plugin is better

If what you need is swatches everywhere, including dropdowns replaced on the product page with labels, tooltips, images and size buttons, then a plugin dedicated to swatches will have more options than we do. Ours are colour swatches on cards with a strong picture change. They are not a replacement for a full attribute display system. We compare a few on the alternatives page.

On product pages

The Product Stage block goes further. It shows the gallery and the choices of one product, and a change of variation updates the picture, the price and the stock line together. You can turn it on for every product page in WooCommerce, Settings, Products.

Prepare your products

Set an image on every variation you want a swatch to show. A variation that has the same image as its parent makes a swatch that seems to do nothing. If you have many colours, show the most popular first, because cards do not have room for a dozen dots: the swatches wrap onto another line, which pushes down the price and the button.

Example images on this page

The other colours in our demos are tinted versions of one sample photo, standing in for variation images. Your own photos will look better than our tints.

Questions