Amazon-style variation swatches for WooCommerce, free

Two shoppers, one bag

Picture a leather tote in four colours: Black, Tan, Sage and Burgundy. Burgundy costs a little more because the leather does. Two people want it on the same evening, both on their phones.

The first shopper finds it on Amazon

Under the title is a row of small photos, one per colour, each with its price underneath. They tap Sage, and the big photo turns sage. Burgundy shows its higher price before they touch it. Black is crossed out, because it sold out this morning. They pick Sage, choose a size, and it is in the basket in about ten seconds. Nobody had to explain anything.

The second shopper finds it on your store

Under the title is a box that says Choose an option. They tap it, and a picker covers half the screen with four words. Which green is Sage? They guess, close the picker, open the size box, choose Medium. The photo changes and so does the price, now that both are chosen. Then the message appears: Out of stock. They try Tan instead. It works, but it isn’t the colour they wanted, and the price is different from the one they saw on the shop page.

Same bag, same price, same stock. One store showed the shopper what they were choosing; the other made them find out. The second store hasn’t done anything wrong. It is running WooCommerce the way WooCommerce works out of the box.

Why WooCommerce works like this

WooCommerce stores each colour-and-size combination as a variation with its own photo, price and stock. Its product page asks for one attribute at a time with dropdown menus, and only once every attribute is chosen does it know which variation the shopper means. That is when the photo, price and stock finally appear.

Two more things make it worse on real catalogues. Shop pages show a “Select options” button instead of colours, so choosing means opening the product and coming back. And once a product has more than 30 variations, WooCommerce stops sending variation data to the page at all, so even marking sold-out options gets hard. Why the 30-variation limit breaks out-of-stock marking →

What Amazon-style swatches actually need

“Swatches” covers a lot of plugins that only swap dropdowns for coloured dots. To work the way shoppers expect, a variation picker needs all six of these:

1. A photo for every option. Not a coloured dot or the word “Sage”: the actual bag in that colour, taken from the variation’s own image so nobody has to upload it twice.
2. A price under every option. When colours cost different amounts, the shopper should see it before choosing, not after. And the price should follow what is already picked.
3. The main photo follows. Pointing at an option shows it in the big product image. Choosing one keeps it there.
4. Sold-out options marked. Crossed out before the shopper chooses, so “Out of stock” never arrives as a surprise at the end.
5. The same on the shop page. Swatches on the product card, with the card’s photo and price following the choice, and add to cart without opening the product.
6. Works on big products. A product with six colours and eight sizes already has 48 variations. Past 30, WooCommerce stops sending variation data to the page, and many plugins quietly stop marking stock.

Most swatch plugins cover the first and fourth. The rest is where free and Pro split, and the second item, a price under each option, is the one almost nobody lists at all.

Variation swatches plugins compared: free vs Pro

The roundups that rank for “best variation swatches plugin” mostly compare swatch shapes and tooltip styles. This table compares the six items above instead, across the largest swatch plugins on WordPress.org. Each cell comes from that plugin’s own listing, not from a roundup, because the roundups don’t always agree with the listings.

From each plugin’s own WordPress.org listing, checked October 2026. — means the listing does not mention the feature. “Raises limit” means it handles big products by raising WooCommerce’s 30-variation limit, which makes those pages heavier.

Two things the table shows:

• Shop page swatches are the most common Pro feature. Five of the six plugins list them under Pro. CartFlows is the exception, and it is free throughout.
• No listing mentions a price under each option. One swatch-plugin vendor states plainly in its support forum that displaying price is not a feature of its plugin, but of WooCommerce itself.

For how each plugin handles out-of-stock options on bigger products, see the full out-of-stock comparison.

How KABAA Swatches does it, free

I built KABAA Swatches because the Amazon pattern shouldn’t be a paid add-on for a store that already has its photos and prices. It has no Pro version, no licence key and no locked settings. Here is the same tote with it installed.

Tile swatches: a photo and a price for every option

A tile shows the photo of the first variation with that option and, under it, the price of the variations it can still lead to. While another option still changes the price, the tile shows a range, which narrows to one price as the shopper chooses. Sale prices show the regular price struck through. The photos come from the variations, so nothing has to be uploaded twice.

The main photo follows

Pointing at a tile, or tabbing to it with the keyboard, shows its photo in the main product image. Moving away puts the previous photo back, and a chosen tile keeps its photo. On a phone there is no hover, so a tap chooses the tile.

Sold-out options marked, on products of any size

Options with nothing in stock alongside the current choice are crossed out, blurred or hidden, before the shopper picks them. That includes products past WooCommerce’s 30-variation limit, without raising the limit: KABAA asks the server only about the swatches on screen.

The same on the shop page, with add to cart

Swatches show on shop, category, tag and search pages. Choosing one changes the card’s photo to that variation and narrows its price. When the card shows every attribute the product varies by, its button becomes Add to cart and adds the chosen variation without leaving the page. Shop cards never call back to the server just to show swatches, so they keep working on pages served from a full-page cache.

Set up Amazon-style swatches in four steps

1. Install KABAA Swatches

   Plugins › Add New, search for KABAA Swatches, install and activate. Nothing on your store changes yet.

2. Set the colour attribute to Tile

   Under Swatches › Attributes, set the attribute whose options look different, usually Colour, to Tile (photo and price). Set sizes to Button.

3. Give the variations their photos

   In the product’s Variations tab, each variation needs its featured image, which most stores already have. No image per term is needed.

4. Check the shop page

   Swatches › Settings › Shop page controls which attributes cards show. Show every attribute and the card’s button becomes Add to cart.

Every setting, with a screenshot, is in the tile swatches documentation.

What it doesn’t do

• Classic themes only. It works with themes that use WooCommerce’s standard variation form, which most classic themes do. Block themes are not supported.
• No price under shop-card swatches. On product cards a tile shows as an image swatch, and the card’s own price follows the choice instead. Cards are too small for a price under every option.
• It doesn’t restyle your gallery. The hover preview uses WooCommerce’s own variation image functions, which most theme galleries follow. A theme whose gallery ignores them shows tiles and prices without the preview.

Frequently asked questions