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 — click real swatches on a 1,200-variation product, change every setting, no install needed.
📖 Read the documentation

🎥 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. WordPress 6.2+, WooCommerce 8.0+, PHP 7.4+, HPOS compatible.