SwatchKit – Variation Swatches

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: https://www.youtube.com/watch?v=Bhk81zbX9x4 🎯 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.

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 covers every setting, image swatches, troubleshooting and the developer API.

1.2.0

• Out-of-stock styling: choose the cross-out colour and thickness, the blur amount and how far dimmed swatches fade.
• Optional "Sold out" caption under out-of-stock swatches, for shoppers who do not read a cross-out as sold out.
• Attribute name position: beside the swatches, above them, or hidden (still announced to screen readers).
• Checkmark colour, when the automatic black-or-white is not what you want.
• Elementor widget and Bricks element: place swatches in a builder layout with a product field, no shortcode needed.
• For developers: swatchkit_normalize_type lets an add-on add its own attribute type.

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.