SwatchKit – Variation Swatches

Description

SwatchKit replaces WooCommerce’s variable-product attribute dropdowns with color, image and size swatches.

There are already several good swatch plugins. Here is what is actually different about this one:

• Your swatch state stays correct past 30 variations. WooCommerce stops sending variation data to the browser above woocommerce_ajax_variation_threshold (30 by default), which is why out-of-stock and impossible combinations stop graying out on large catalogs. SwatchKit precomputes a compact availability index at save time instead — about 2.8KB gzipped for a 1,200-variation product — so swatch state is right at 1 variation and at 5,000, with no AJAX and no threshold to raise. This is free, and unlimited.
• Built on WooCommerce’s own attribute data. When your store has core’s “Color swatches for attributes” feature enabled, SwatchKit reads and writes core’s own term meta and registers alongside core’s wc-visual attribute type, mirroring the same values into its own keys so nothing breaks if you turn the feature off. Your swatch data is not trapped in one vendor’s proprietary meta.
• No jQuery, and a very small bundle. The frontend is dependency-free vanilla JavaScript: 2.8KB of JS and 1.2KB of CSS, gzipped. Swatches are rendered server-side with their final dimensions, so they contribute no layout shift.

Free, and staying free

Several things other plugins charge for are free here, deliberately:

• Unlimited out-of-stock handling — cross out, blur, dim or hide, at any variation count
• Image swatches picked straight from the Media Library, with fill or fit cropping, hover zoom and image tooltips
• Shop and category page swatches — picking one previews that variation’s image on the card and opens the product with it selected
• One-click import from other swatch plugins, with a preview first and undo
• Tooltips — term name, image, or both
• Per-product swatch type and shape overrides
• Full theme and page-builder compatibility — compatibility is never a paid feature

Accessibility

Swatches are real <button> elements in a role="radiogroup", with a roving tabindex, arrow-key and Home/End navigation, a focus ring that survives theme resets, and out-of-stock state conveyed in text rather than colour alone. The selected-state checkmark picks black or white automatically from the swatch’s computed relative luminance, so it stays visible on white and on black. prefers-reduced-motion disables every transition.

For developers

• No WooCommerce template is ever overridden. SwatchKit filters woocommerce_dropdown_variation_attribute_options_html, which is the single biggest source of theme conflicts avoided structurally rather than patched.
• The original <select> stays in the DOM and remains the source of truth for form 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.
• Every visual value flows through CSS custom properties on .swk-swatches. Restyle by redefining variables; there are no !important declarations to fight.
• Documented filters and actions: 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_default_settings, swatchkit_before_swatches, swatchkit_after_swatches, swatchkit_index_rebuilt.
• add_theme_support( 'swatchkit', array( 'stylesheet' => false ) ) to ship your own styles.
• A single public JS API: window.SwatchKit.refresh(), .on( event, callback ) and .version. Dispatch swatchkit:refresh on document after injecting markup of your own.
• Full documentation: modinatheme.com/swatchkit/docs.
• Source: the unminified JavaScript and SCSS ship in assets/, and npm install && npm run build rebuilds build/.