Variation Swatches for WooCommerce turns the dull variation dropdowns into clear, clickable swatches: colors, images or text buttons. Shoppers see every option at once, choose with one click and still get the usual price, image and stock updates.
It is built on top of WooCommerce's own variation script, so everything keeps working: the original dropdown stays in the page (hidden), and shoppers without JavaScript simply see it.
Three swatch types
Color: one color or a two-tone swatch
Image: textures, patterns or photos from your media library
Button: text such as S, M, L, XL, with an optional short label for long names
Choose the type per attribute in Products → Attributes, then set the colors, images or labels on the attribute terms (the term list shows a live preview)
Custom attributes typed on a single product can show as buttons too
Clear states, great experience
Unavailable combinations are crossed out and not clickable (or hidden, or left alone: your choice), and out-of-stock options are marked too
The chosen value is shown next to the attribute name, and a second click deselects it
Tooltips with the option name, selected ring or fill, and a visible focus ring for keyboard users
Accessible markup: radio groups, labels and aria-checked
URL preselect works: ?attribute_pa_color=red opens the product with red chosen
Swatches in your shop and category pages
Color and image swatches appear under variable products
A click (or hover) swaps the product image with the variation image, and the product link opens with that color chosen
A "+N" link when a product has more options than you want to show
Works in classic themes and in block-based product grids
Settings that matter
Shape (circle, rounded, square), size, selected color and tooltips
What to do with unavailable options, how to treat custom attributes and when to keep a dropdown
Number of swatches per product in shop pages and the hover or click behaviour
Light and developer friendly
One small script and one small stylesheet, no external libraries, one database query per product for shop swatches. Translation-ready, RTL-friendly, HPOS and block checkout compatible. Swatch values are stored as plain term meta and removed when you uninstall.
What's included
The plugin zip, ready to upload
Full documentation (HTML and PDF), translation template, licence and changelog
Requirements
WordPress 6.0+, WooCommerce 8.0+, PHP 7.4+. Licensed under GPL-2.0-or-later.
Support & updates
Installation help and bug fixes are included for 6 months, with lifetime updates.
What's in the download
The files in the archive you can download after you buy.
update_term_meta( $term_id, 'tqvs_color', '#e11d48' );// optional second color for a two-tone swatchupdate_term_meta( $term_id, 'tqvs_color2', '#ffffff' );
Color (single and two-tone), image and button swatches for global attributes, set per attribute and per term
Custom attributes as buttons, availability and out-of-stock states, chosen value, tooltips, accessible markup
Shop and category page swatches that swap the product image, with preselected product links
Works on classic and block themes, in quick view popups, with the dropdown as a hidden fallback
Settings for shape, size, colors, unavailable behaviour and shop swatches; developer filter
Frequently asked questions
Which swatch types are available?+
Color (single or two-tone), image and button (text). You choose the type for each global attribute under Products → Attributes.
How do I set the colors or images?+
Open the attribute's terms (Products → Attributes → Configure terms). Each term has a color picker, an image picker or a short label field, depending on the attribute's swatch type. The term list shows a live preview.
What about attributes I typed directly on a product?+
They have no swatch type, so they show as buttons (you can keep the dropdown instead in the settings). An attribute with more options than the maximum you set keeps its dropdown.
What happens to combinations that do not exist or are out of stock?+
They are crossed out and cannot be clicked. You can also hide them or leave them as they are. Choosing an option that is not available together with the current choices starts over with that option.
Do swatches work on shop and category pages?+
Yes. Color and image swatches appear under variable products. Clicking one swaps the product image with that variation's image and opens the product with that color chosen. The number of swatches and the click or hover behaviour are in the settings.
Does it work with block themes, quick view and page caching?+
Yes. It works on block-based product pages and grids, inside quick view popups and with page caches, because swatches are built on the server and the choice is made in the browser.
Does it replace WooCommerce's dropdown?+
It hides the original dropdown and keeps it in sync, so WooCommerce's scripts, prices, images and other plugins keep working. Without JavaScript the dropdown is shown.
Can I change the look?+
Yes: shape, size, selected color and tooltips in the settings, or CSS using the plugin's classes and the --tqvs-size and --tqvs-accent variables.
An editorial WooCommerce theme for clothing, shoes and accessories: elegant serif typography, lookbook, quick view, filters drawer, mini cart and a 40-product demo you can import in one click.
Wishlist for WooCommerce – Save for Later, Share & Move to Cart
A fast, lightweight wishlist: heart buttons, guest and logged-in lists, a wishlist page with share link and a most-wishlisted report, with no account required.
Wishlist for WooCommerce – Save for Later, Share & Move to Cart
A fast, lightweight wishlist: heart buttons, guest and logged-in lists, a wishlist page with share link and a most-wishlisted report, with no account required.
