Multi-colour swatches, a shortcode, more style settings, and fixes for the Clear link and for colours disappearing after a product save.<\/p>","1.0.0":"
Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3712258,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3712258,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3712258,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3712258,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.1.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3713566,"resolution":"1","location":"assets","locale":"","width":1248,"height":648},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3713566,"resolution":"2","location":"assets","locale":"","width":1240,"height":820},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3713566,"resolution":"3","location":"assets","locale":"","width":1248,"height":1056},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3713566,"resolution":"4","location":"assets","locale":"","width":1248,"height":781},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3713566,"resolution":"5","location":"assets","locale":"","width":1240,"height":820},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3713566,"resolution":"6","location":"assets","locale":"","width":933,"height":654},"screenshot-7.png":{"filename":"screenshot-7.png","revision":3713566,"resolution":"7","location":"assets","locale":"","width":1240,"height":820},"screenshot-8.png":{"filename":"screenshot-8.png","revision":3713566,"resolution":"8","location":"assets","locale":"","width":993,"height":436}},"screenshots":{"1":"Colour and size swatches on a product page, with a tooltip and a multi-colour swatch","2":"The settings screen, with a live preview that uses your real storefront styles","3":"Swatches on shop and category cards \u2014 pick a colour and the card's image follows","4":"Correct out-of-stock and unavailable states on a 1,200-variation product","5":"Colour swatches on the attribute term screen","6":"Per-product swatch type and shape overrides","7":"Stock behaviour: cross out, blur, dim or hide","8":"System status, for quick support answers"}},"plugin_section":[],"plugin_tags":[66595,65874,130912,206658,142374],"plugin_category":[],"plugin_contributors":[282613],"plugin_business_model":[],"class_list":["post-372142","plugin","type-plugin","status-publish","hentry","plugin_tags-product-attributes","plugin_tags-variable-products","plugin_tags-variation-swatches","plugin_tags-woocommerce-color-swatches","plugin_tags-woocommerce-swatches","plugin_contributors-modinatheme","plugin_committers-modinatheme"],"banners":{"banner":"https:\/\/ps.w.org\/swatchkit-variation-swatches\/assets\/banner-772x250.png?rev=3712258","banner_2x":"https:\/\/ps.w.org\/swatchkit-variation-swatches\/assets\/banner-1544x500.png?rev=3712258","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/swatchkit-variation-swatches\/assets\/icon-128x128.png?rev=3712258","icon_2x":"https:\/\/ps.w.org\/swatchkit-variation-swatches\/assets\/icon-256x256.png?rev=3712258","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/swatchkit-variation-swatches\/assets\/screenshot-1.png?rev=3713566","caption":"Colour and size swatches on a product page, with a tooltip and a multi-colour swatch"},{"src":"https:\/\/ps.w.org\/swatchkit-variation-swatches\/assets\/screenshot-2.png?rev=3713566","caption":"The settings screen, with a live preview that uses your real storefront styles"},{"src":"https:\/\/ps.w.org\/swatchkit-variation-swatches\/assets\/screenshot-3.png?rev=3713566","caption":"Swatches on shop and category cards \u2014 pick a colour and the card's image follows"},{"src":"https:\/\/ps.w.org\/swatchkit-variation-swatches\/assets\/screenshot-4.png?rev=3713566","caption":"Correct out-of-stock and unavailable states on a 1,200-variation product"},{"src":"https:\/\/ps.w.org\/swatchkit-variation-swatches\/assets\/screenshot-5.png?rev=3713566","caption":"Colour swatches on the attribute term screen"},{"src":"https:\/\/ps.w.org\/swatchkit-variation-swatches\/assets\/screenshot-6.png?rev=3713566","caption":"Per-product swatch type and shape overrides"},{"src":"https:\/\/ps.w.org\/swatchkit-variation-swatches\/assets\/screenshot-7.png?rev=3713566","caption":"Stock behaviour: cross out, blur, dim or hide"},{"src":"https:\/\/ps.w.org\/swatchkit-variation-swatches\/assets\/screenshot-8.png?rev=3713566","caption":"System status, for quick support answers"}],"raw_content":"\n
Your customer picks Black, then XXL, and finds out at the cart that the combination was never made.<\/strong> They do not email you about it. They leave.<\/p>\n\n SwatchKit turns WooCommerce's variation dropdowns into colour, image and size swatches \u2014 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.<\/p>\n\n \ud83d\udc49 Try the live demo<\/a><\/strong> \u2014 click real swatches on a 1,200-variation product, change every setting, no install needed.\n\ud83d\udcd6 Read the documentation<\/a><\/strong><\/p>\n\n \ud83c\udfa5 Watch it work in three minutes:<\/strong><\/p>\n\n https:\/\/www.youtube.com\/watch?v=Bhk81zbX9x4<\/p>\n\n WooCommerce stops sending variation data to the browser once a product passes The usual advice is to raise the threshold. That pushes your entire variation table into the page and makes it slower for everyone.<\/p>\n\n SwatchKit does the opposite. When you save a product it builds a compact availability index \u2014 about 2.8KB gzipped for 1,200 variations \u2014 and the browser resolves state from it in under a millisecond, without asking the server anything.<\/p>\n\n Free. At any variation count. No upgrade prompt.<\/strong><\/p>\n\n WooCommerce 10.9 added a first-party Color\/Image attribute type ( Translation: your colours and images belong to your store, not to a plugin you are now stuck with. Everything core left out \u2014 size and label swatches, stock states, tooltips, shop-page swatches, per-product overrides, classic themes \u2014 SwatchKit adds on top.<\/p>\n\n Already using another swatch plugin? Tools \u2192 Import<\/strong> 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. \ud83d\udd04<\/p>\n\n The things this category usually puts behind a licence:<\/p>\n\n 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.<\/p>\n\n Settings export to a file and import on your next site, so your second store takes a minute rather than twenty. \ud83d\udcbe<\/p>\n\n The storefront bundle is dependency-free vanilla JavaScript: 3.9KB of JS and 1.9KB of CSS<\/strong>, 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.<\/p>\n\n 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. \ud83e\udd2b<\/p>\n\n Swatches are real Built by ModinaTheme<\/a>. WordPress 6.2+, WooCommerce 8.0+, PHP 7.4+, HPOS compatible.<\/p>\n\n\n\ud83c\udfaf Why swatches stop being right (and why this one does not)<\/h4>\n\n
woocommerce_ajax_variation_threshold<\/code> \u2014 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.<\/p>\n\n\n
\ud83e\uddec Built on WooCommerce's own data<\/h4>\n\n
wc-visual<\/code>). 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.<\/p>\n\n\ud83c\udf81 Free, and staying free<\/h4>\n\n
\n
\u23f1\ufe0f Set up in 60 seconds<\/h4>\n\n
\n
\u26a1 Light, and quiet in your admin<\/h4>\n\n
\u267f Accessible by construction<\/h4>\n\n
<button><\/code> elements in a role=\"radiogroup\"<\/code> 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<\/code> turns every transition off.<\/p>\n\n\ud83e\uddd1\u200d\ud83d\udcbb For developers<\/h4>\n\n
\n
woocommerce_dropdown_variation_attribute_options_html<\/code> \u2014 the biggest source of theme conflicts, avoided structurally rather than patched.<\/li>\n<select><\/code> stays<\/strong> in the DOM and remains the source of truth for submission. SwatchKit writes to it and dispatches a native change<\/code> event, so WooCommerce's own handlers run normally \u2014 which is why quick view, bundle and composite plugins work without vendor-specific hacks.<\/li>\n.swk-swatches<\/code>. Restyle by redefining variables; there is no !important<\/code> to fight.<\/li>\nswatchkit_swatch_html<\/code>, swatchkit_swatch_classes<\/code>, swatchkit_attribute_type<\/code>, swatchkit_should_render<\/code>, swatchkit_term_color<\/code>, swatchkit_term_image_id<\/code>, swatchkit_index_payload<\/code>, swatchkit_settings<\/code>, swatchkit_card_terms<\/code>, swatchkit_card_placement<\/code>, swatchkit_before_swatches<\/code> and swatchkit_after_swatches<\/code>.<\/li>\nadd_theme_support( 'swatchkit', array( 'stylesheet' => false ) )<\/code> to ship your own styles.<\/li>\nwindow.SwatchKit.refresh()<\/code>, .on( event, callback )<\/code> and .version<\/code>. Dispatch swatchkit:refresh<\/code> on document<\/code> after injecting your own markup.<\/li>\n[swatchkit product_id=\"123\"]<\/code> renders a product's swatches anywhere \u2014 page builders, landing pages, custom grids.<\/li>\nassets\/<\/code>; npm install && npm run build<\/code> rebuilds build\/<\/code>.<\/li>\n<\/ul>\n\n