What Variation Swatches changes on a WooCommerce product page
On a variable product, WooCommerce shows one dropdown per attribute: shoppers read “Navy” or “XL” without seeing the shade or every available size at a glance. Variation Swatches for WooCommerce replaces those dropdowns with color swatches, image thumbnails or text buttons. As soon as you activate it, dropdowns turn into buttons; for colors or images, you change the attribute’s type under Products > Attributes, then assign a color, image or label to each term.
The plugin adds a hover tooltip, shows the chosen variation next to the attribute name (“Color: Navy”) and handles sold-out variations by crossing them out, blurring them or hiding them. It works with theme quick views, Gutenberg blocks, Multisite, WPML, right-to-left languages and High-Performance Order Storage (HPOS). Swatch data is also exposed through the WooCommerce REST API, which helps with headless stores.
The vendor, GetWooPlugins (lead developer: Emran Ahmed), runs a freemium model: the free version on wordpress.org covers the product page, while the Premium version sold on its site adds swatches on shop and category pages, per-product settings and extra swatch types. Settings live in a separate GetWooPlugins menu, not under WooCommerce.
Stores where variation swatches make a real difference
The plugin pays off when a product has several values per attribute and looks drive the purchase:
- Apparel, shoes and accessories: colors as swatches, sizes as buttons, sold-out sizes crossed out.
- Furniture, home decor, beauty: a thumbnail of the fabric or shade beats a marketing name.
- Dropshipping stores: the vendor states tested compatibility with Printful, AliDropship and Dokan.
- Agencies building stores on classic themes (Astra, Flatsome, Divi, OceanWP and others) that want one global setup, no code.
It adds little if your products are simple or only have one or two variations. On a block theme, look first at the visual attribute type added in WooCommerce 10.9: according to GetWooPlugins, it only displays on block themes and offers neither buttons nor out-of-stock handling. And if what you really want is swatches on the shop page, the free version won’t be enough.
Variation Swatches for WooCommerce: strengths and limits
Strengths
- A free version that stands on its own. Color, image and button swatches, tooltips, round or square shapes and adjustable size on the product page, no license needed.
- Sold-out options are visible. A dropdown can’t cross out an option; here the sold-out variation is crossed out, blurred or hidden.
- Classic themes supported. Since version 2.5.0, WooCommerce’s visual attribute type also works outside block themes.
- An optional, well-scoped external service. Color lookup by name (Color API) is off by default and only sends the name you type, from the admin.
Limits
- Nothing on the shop page for free. Swatches on shop, category and archive pages and in filter widgets are Premium only.
- Global attributes only. An attribute typed directly into a product only becomes a swatch with Premium, as do per-product settings.
- Limited sold-out handling for free. It stops at 30 variations per product and requires hiding out-of-stock items from the catalog.
- Some CSS tweaks possible. The vendor acknowledges that certain themes need a small styling adjustment.
The Variation Swatches settings we recommend
Labels below match the English interface of version 2.6. Global settings are under GetWooPlugins > Swatches Settings; swatch types are chosen attribute by attribute in WooCommerce. Check every change on a variable product in a private browser window.
| Setting | Recommended value | Why |
|---|---|---|
| Attribute type Products > Attributes > Edit | Color for shades, Image for materials, Button for sizes | Each attribute gets its clearest display on the same product page. |
| Dropdowns to Button Swatches Settings > General | On (default) | Unconfigured attributes become buttons that match your swatches. |
| Enable Tooltip Swatches Settings > General | On (default) | The color name shows on hover: a swatch alone doesn’t say “Navy.” |
| Show selected attribute Swatches Settings > Product Page | On (default) | Shoppers see in plain text what they picked before adding to cart. |
| Disabled Attribute style Swatches Settings > Advanced | Blur with cross (default) | The sold-out variation stays visible but unclickable; “Hide” can suggest a size doesn’t exist. |
| Enable Stylesheet Swatches Settings > General | On, unless your theme ships its own styles | Without it, swatches lose their styling; only turn it off if you write your own CSS. |
| Enable Color API Swatches Settings > Color API | Off (default), on only while you enter your colors | Only the typed color name goes to the StorePress service, but an unneeded external service is best avoided. |
| Automatic updates Plugins > Installed Plugins | Enabled | Fixes, including the security fix in version 2.4.0, arrive without delay. |
- Open a variable product: every configured attribute shows swatches, the others show buttons.
- On a staging copy, set a variation to out of stock and confirm it is blurred or crossed out.
- Test your theme’s quick view and the mobile layout.
- If you clear a page cache, place another test order with a variation.
Variation Swatches security: a short public record
For a plugin running on hundreds of thousands of stores, the public record is short. The only flaw listed with an identifier, CVE-2019-14774, was a reflected XSS vulnerability in the settings page (tab parameter) of version 1.0.61, fixed in 1.0.62 in 2019. More recently, the changelog for version 2.4.0 (August 2026) mentions a security issue reported by Fraudless.tech, with no further details published.
The useful move is still to keep the plugin updated, ideally with automatic plugin updates, Premium included if you use it. WP Masquerade Pro renames the woo-variation-swatches folder and its script handles, which makes the plugin harder for bots to spot without replacing updates; the woo_variation_swatches_options variable and the wvs-* classes stay visible. For store-wide security, see our WooCommerce store security guide.
What WP Masquerade hides for Variation Swatches for WooCommerce
Pro Handled by WP Masquerade Pro only
The free version does not know the traces specific to Variation Swatches for WooCommerce: without Pro, only generator tags are removed, as for any plugin.
Free version
Handled by WP Masquerade Pro only
With Pro
- folder name
- tag IDs
Still visible
- JavaScript variables
woo_variation_swatches_options - CSS classes
woo-variation-swatches, wvs-*
These traces stay because the plugin needs them to work (scripts, styles, cookies) or because they come from the server.
Variation Swatches for WooCommerce FAQ
I activated the plugin but still see dropdowns. Why?
An attribute stays a dropdown while its type is “Select” and button conversion is turned off. Change its type under Products > Attributes, then give each term a color, image or label.
Does the free version show swatches on the shop page?
No. The free version works on the product page and in quick view; shop pages, categories and filter widgets need Premium.
How much does Premium cost?
On the GetWooPlugins site: $49 per year for one site, $149 per year for five sites and $299 per year for unlimited sites, renewing automatically. Lifetime licenses cost $149 for one site and $449 for five sites, with a 30-day money-back guarantee.
Doesn’t WooCommerce have its own swatches now?
Since version 10.9, WooCommerce offers a visual attribute type for colors and images, displayed on block themes. Variation Swatches supports it on classic themes and adds buttons, tooltips and sold-out handling.
Will the plugin slow down my store?
Its scripts load alongside WooCommerce’s on product pages, and color lookup only runs in the admin. Still, measure a product page before and after activation if you have many variations.