Title: SwatchKit – Variation Swatches
Author: Modina Theme
Published: <strong>September 25, 2026</strong>
Last modified: September 25, 2026

---

Search plugins

![](https://ps.w.org/swatchkit-variation-swatches/assets/banner-772x250.png?rev=
3712258)

![](https://ps.w.org/swatchkit-variation-swatches/assets/icon-256x256.png?rev=3712258)

# SwatchKit – Variation Swatches

 By [Modina Theme](https://profiles.wordpress.org/modinatheme/)

[Download](https://downloads.wordpress.org/plugin/swatchkit-variation-swatches.1.1.0.zip)

 * [Details](https://wordpress.org/plugins/swatchkit-variation-swatches/#description)
 * [Reviews](https://wordpress.org/plugins/swatchkit-variation-swatches/#reviews)
 *  [Installation](https://wordpress.org/plugins/swatchkit-variation-swatches/#installation)
 * [Development](https://wordpress.org/plugins/swatchkit-variation-swatches/#developers)

 [Support](https://wordpress.org/support/plugin/swatchkit-variation-swatches/)

## Description

**Your customer picks Black, then XXL, and finds out at the cart that the combination
was never made.** They do not email you about it. They leave.

SwatchKit turns WooCommerce’s variation dropdowns into colour, image and size swatches—
and keeps them honest, so what is sold out looks sold out and what does not exist
cannot be clicked. On a product with 12 variations or 5,000.

👉 **[Try the live demo](https://modinatheme.com/swatchkit/landing/demo/)** — click
real swatches on a 1,200-variation product, change every setting, no install needed.

📖 **[Read the documentation](https://modinatheme.com/swatchkit/docs/)**

🎥 **Watch it work in three minutes:**

#### 🎯 Why swatches stop being right (and why this one does not)

WooCommerce stops sending variation data to the browser once a product passes `woocommerce_ajax_variation_threshold`—
30 variations by default. After that, plugins that lean on that data cannot tell
which combinations are out of stock, or which were never built. Every swatch looks
available.

The usual advice is to raise the threshold. That pushes your entire variation table
into the page and makes it slower for everyone.

SwatchKit does the opposite. When you save a product it builds a compact availability
index — about 2.8KB gzipped for 1,200 variations — and the browser resolves state
from it in under a millisecond, without asking the server anything.

 * ❌ Sold out  crossed out
 * 🚫 Never existed  greyed out and unclickable
 * ⚡ No AJAX, no spinner, no threshold to raise

**Free. At any variation count. No upgrade prompt.**

#### 🧬 Built on WooCommerce’s own data

WooCommerce 10.9 added a first-party Color/Image attribute type (`wc-visual`). SwatchKit
reads and writes that same core term meta and mirrors it into its own keys, so nothing
breaks if you switch the feature off.

Translation: your colours and images belong to your store, not to a plugin you are
now stuck with. Everything core left out — size and label swatches, stock states,
tooltips, shop-page swatches, per-product overrides, classic themes — SwatchKit 
adds on top.

Already using another swatch plugin? **Tools  Import** copies colours and images
from GetWooPlugins, Brainstorm Force, RadiusTheme and WCBoost. It shows a preview
before writing anything, never touches their data, and can be undone. 🔄

#### 🎁 Free, and staying free

The things this category usually puts behind a licence:

 * 🎨 **Colour, image and size/label swatches** — all three types, no limits
 * 🛍️ **Shop and category page swatches** — picking one previews that variation’s
   image on the card and opens the product with it already selected
 * 🖼️ **Image swatches** from your Media Library, with fill or fit cropping, hover
   zoom and image tooltips
 * 🌈 **Multi-colour swatches** — two to four colours per term, for two-tones, stripes
   and marled fabrics
 * 🪄 **Colours from term names** — a built-in table of 300+ names means an imported
   catalog shows colours before you set a single value
 * 📦 **Out-of-stock styles** — cross out, blur, dim or hide, at any variation count
 * 🎛️ **Per-product type and shape overrides** — circles here, pills there
 * ⚙️ **Quick view, AJAX load-more and infinite scroll** — new forms are picked 
   up automatically
 * 🧩 **Theme and page-builder compatibility** — never a paid feature here

A separate Pro add-on is coming for shop-card add to cart and low-stock markers.
Nothing on the list above will ever move into it.

#### ⏱️ Set up in 60 seconds

 1. Activate. Every variation dropdown is already a swatch. 🎉
 2. Want real colours? **Products  Attributes**, set the attribute to Color or Image,
    edit its terms.
 3. Want it to match your theme? **WooCommerce  Swatches** — shape, size, spacing, 
    borders, tooltips, stock styles and shop cards, each with a live preview that uses
    your real storefront stylesheet.

Settings export to a file and import on your next site, so your second store takes
a minute rather than twenty. 💾

#### ⚡ Light, and quiet in your admin

The storefront bundle is dependency-free vanilla JavaScript: **3.9KB of JS and 1.9KB
of CSS**, gzipped, loaded only where swatches appear. Swatches render server-side
at their final size, so nothing jumps while the page loads, and everything works
behind a page cache.

No tracking. No outbound requests of any kind. No dashboard banners, no review nag,
no greyed-out settings advertising an upgrade. The settings screen is the only place
SwatchKit appears in your admin. 🤫

#### ♿ Accessible by construction

Swatches are real `<button>` elements in a `role="radiogroup"` with a roving tabindex,
arrow-key and Home/End navigation, and a focus ring that survives theme resets. 
Stock state is conveyed in text, not colour alone, so a screen reader hears “Blue,
out of stock”. The selected checkmark picks black or white from the swatch’s own
luminance, and `prefers-reduced-motion` turns every transition off.

#### 🧑‍💻 For developers

 * **No WooCommerce template is ever overridden.** SwatchKit filters `woocommerce_dropdown_variation_attribute_options_html`—
   the biggest source of theme conflicts, avoided structurally rather than patched.
 * **The original `<select>` stays** in the DOM and remains the source of truth 
   for submission. SwatchKit writes to it and dispatches a native `change` event,
   so WooCommerce’s own handlers run normally — which is why quick view, bundle 
   and composite plugins work without vendor-specific hacks.
 * **Everything visual is a CSS custom property** on `.swk-swatches`. Restyle by
   redefining variables; there is no `!important` to fight.
 * **Documented hooks**, including `swatchkit_swatch_html`, `swatchkit_swatch_classes`,`
   swatchkit_attribute_type`, `swatchkit_should_render`, `swatchkit_term_color`,`
   swatchkit_term_image_id`, `swatchkit_index_payload`, `swatchkit_settings`, `swatchkit_card_terms`,`
   swatchkit_card_placement`, `swatchkit_before_swatches` and `swatchkit_after_swatches`.
 * **Add-on API** for registering swatch types and adding settings to the same schema-
   driven screen.
 * `add_theme_support( 'swatchkit', array( 'stylesheet' => false ) )` to ship your
   own styles.
 * **JS API:** `window.SwatchKit.refresh()`, `.on( event, callback )` and `.version`.
   Dispatch `swatchkit:refresh` on `document` after injecting your own markup.
 * **Shortcode:** `[swatchkit product_id="123"]` renders a product’s swatches anywhere—
   page builders, landing pages, custom grids.
 * Unminified JavaScript and SCSS ship in `assets/`; `npm install && npm run build`
   rebuilds `build/`.

Built by [ModinaTheme](https://modinatheme.com/). WordPress 6.2+, WooCommerce 8.0
+, PHP 7.4+, HPOS compatible.

## Screenshots

[⌊Colour and size swatches on a product page, with a tooltip and a multi-colour 
swatch⌉⌊Colour and size swatches on a product page, with a tooltip and a multi-colour
swatch⌉[

Colour and size swatches on a product page, with a tooltip and a multi-colour swatch

[⌊The settings screen, with a live preview that uses your real storefront styles⌉⌊
The settings screen, with a live preview that uses your real storefront styles⌉[

The settings screen, with a live preview that uses your real storefront styles

[⌊Swatches on shop and category cards — pick a colour and the card's image follows⌉⌊
Swatches on shop and category cards — pick a colour and the card's image follows⌉[

Swatches on shop and category cards — pick a colour and the card’s image follows

[⌊Correct out-of-stock and unavailable states on a 1,200-variation product⌉⌊Correct
out-of-stock and unavailable states on a 1,200-variation product⌉[

Correct out-of-stock and unavailable states on a 1,200-variation product

[⌊Colour swatches on the attribute term screen⌉⌊Colour swatches on the attribute
term screen⌉[

Colour swatches on the attribute term screen

[⌊Per-product swatch type and shape overrides⌉⌊Per-product swatch type and shape
overrides⌉[

Per-product swatch type and shape overrides

[⌊Stock behaviour: cross out, blur, dim or hide⌉⌊Stock behaviour: cross out, blur,
dim or hide⌉[

Stock behaviour: cross out, blur, dim or hide

[⌊System status, for quick support answers⌉⌊System status, for quick support answers⌉[

System status, for quick support answers

## Installation

 1. Install and activate the plugin.
 2. Every variable-product attribute dropdown becomes a swatch immediately — there 
    is nothing to configure.
 3. To set colours or images per term, go to Products  Attributes, set an attribute’s
    type to Color or Image swatch, then edit its terms. Colours use a colour picker;
    images are chosen from the Media Library.
 4. Global settings live under WooCommerce  Swatches, also linked as “Settings” on 
    the Plugins screen.

The [documentation](https://modinatheme.com/swatchkit/docs/) covers every setting,
image swatches, troubleshooting and the developer API.

## FAQ

### Are image swatches free?

Yes. Colour, image and size/label swatches are all free, including image tooltips,
hover zoom and fill/fit cropping.

### Do I have to configure anything?

No. On activation every variation dropdown becomes a button swatch. Setting an attribute’s
type to Color or Image is optional.

### Does it really work with thousands of variations?

Yes, and that is the main reason it exists. Availability is computed once when a
product is saved and stored in its own database table, then read back as a single
cached query and resolved in the browser with integer set intersection. A 1,200-
variation product inlines about 14.7KB of JSON, roughly 2.8KB gzipped.

### Will it conflict with my existing swatch plugin?

Two swatch plugins filtering the same dropdown will conflict. Deactivate the other
one first. WooCommerce  Swatches  Tools lists any it detects.

### Does it work with my theme?

It does not override any WooCommerce template, which is what usually breaks themes.
If your theme still needs a CSS nudge, open a support thread and it will ship as
a compatibility stylesheet.

### Is my data locked in?

No. Where your WooCommerce version supports core’s visual attributes, SwatchKit 
writes to core’s own term meta as well as its own. Uninstalling removes nothing 
unless you explicitly enable cleanup in Advanced settings, and core’s meta is never
deleted.

## Reviews

There are no reviews for this plugin.

## Contributors & Developers

“SwatchKit – Variation Swatches” is open source software. The following people have
contributed to this plugin.

Contributors

 *   [ Modina Theme ](https://profiles.wordpress.org/modinatheme/)

[Translate “SwatchKit – Variation Swatches” into your language.](https://translate.wordpress.org/projects/wp-plugins/swatchkit-variation-swatches)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/swatchkit-variation-swatches/),
check out the [SVN repository](https://plugins.svn.wordpress.org/swatchkit-variation-swatches/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/swatchkit-variation-swatches/)
by [RSS](https://plugins.trac.wordpress.org/log/swatchkit-variation-swatches/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.1.0

 * Multi-colour swatches: two to four colours per term, as a diagonal split or wedges.
 * Colours you never set are read from the term name, so imported catalogs show 
   colours immediately.
 * `[swatchkit]` shortcode for showing a product’s swatches anywhere.
 * Shop cards: new “Before the title” position, optional attribute name, and correct
   placement in Astra.
 * Settings: spacing, alignment, label and tooltip colours, image fit and tooltip
   image size.
 * Tools: export and import settings as a file.
 * Fixed: WooCommerce’s “Clear” link left swatches looking selected.
 * Fixed: product colours could disappear after saving a product.
 * Fixed: a PHP notice about translations loading too early.
 * For developers: new hooks for add-ons — see the documentation.

#### 1.0.0

 * Initial release.
 * Color, image and size/label swatches.
 * Availability index: correct swatch state at any variation count, with no AJAX.
 * Unlimited out-of-stock handling — cross out, blur, dim or hide.
 * Distinct handling for unavailable combinations.
 * Native WooCommerce `wc-visual` attribute interoperability, with mirrored fallback
   meta.
 * Tooltips, hover zoom, selected-term display and clear-selection link.
 * Shop and category page swatches.
 * Per-product swatch type and shape overrides.
 * Tabbed settings dashboard with a live preview.
 * WCAG 2.1 AA keyboard and screen-reader support.
 * Dependency-free frontend: 2.8KB JS, 1.2KB CSS gzipped.

## Meta

 *  Version **1.1.0**
 *  Last updated **2 hours ago**
 *  Active installations **Fewer than 10**
 *  WordPress version ** 6.2 or higher **
 *  Tested up to **7.1.2**
 *  PHP version ** 7.4 or higher **
 * Tags
 * [product attributes](https://wordpress.org/plugins/tags/product-attributes/)[Variable Products](https://wordpress.org/plugins/tags/variable-products/)
   [variation swatches](https://wordpress.org/plugins/tags/variation-swatches/)[woocommerce color swatches](https://wordpress.org/plugins/tags/woocommerce-color-swatches/)
   [woocommerce swatches](https://wordpress.org/plugins/tags/woocommerce-swatches/)
 *  [Advanced View](https://wordpress.org/plugins/swatchkit-variation-swatches/advanced/)

## Ratings

No reviews have been submitted yet.

[Your review](https://wordpress.org/support/plugin/swatchkit-variation-swatches/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/swatchkit-variation-swatches/reviews/)

## Contributors

 *   [ Modina Theme ](https://profiles.wordpress.org/modinatheme/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/swatchkit-variation-swatches/)