{"id":319681,"date":"2026-05-31T10:05:42","date_gmt":"2026-05-31T10:05:42","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/storzen-product-variation-swatches-for-woocommerce\/"},"modified":"2026-08-17T10:15:23","modified_gmt":"2026-08-17T10:15:23","slug":"sayan-variation-swatches","status":"publish","type":"plugin","link":"https:\/\/ko.wordpress.org\/plugins\/sayan-variation-swatches\/","author":15779958,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0.3","stable_tag":"1.0.3","tested":"7.1","requires":"6.4","requires_php":"7.4","requires_plugins":null,"header_name":"Variation Swatches for WooCommerce \u2013 Color, Image & Label Swatches","header_author":"devhasib","header_description":"Replace WooCommerce variation dropdowns with beautiful color, image, label, and radio swatches. Boost conversions with a better product selection experience.","assets_banners_color":"caccd4","last_updated":"2026-08-17 10:15:23","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/wordpress.org\/plugins\/sayan-variation-swatches\/","header_author_uri":"https:\/\/webtend.net\/","rating":0,"author_block_rating":0,"active_installs":0,"downloads":336,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description"],"tags":{"1.0.0":{"tag":"1.0.0","author":"devhasib","date":"2026-06-18 07:05:24"},"1.0.2":{"tag":"1.0.2","author":"devhasib","date":"2026-06-24 08:51:26"},"1.0.3":{"tag":"1.0.3","author":"devhasib","date":"2026-08-17 10:15:23"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3650671,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3650668,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":516},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3650668,"resolution":"772x250","location":"assets","locale":"","width":772,"height":258}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.0.2","1.0.3"],"block_files":[],"assets_screenshots":{"Screenshot-1.png":{"filename":"Screenshot-1.png","revision":3650748,"resolution":"1","location":"assets","locale":"","width":1200,"height":900},"Screenshot-2.png":{"filename":"Screenshot-2.png","revision":3650748,"resolution":"2","location":"assets","locale":"","width":1200,"height":900},"Screenshot-3.png":{"filename":"Screenshot-3.png","revision":3650748,"resolution":"3","location":"assets","locale":"","width":1200,"height":900},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3650748,"resolution":"4","location":"assets","locale":"","width":1200,"height":900},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3650748,"resolution":"5","location":"assets","locale":"","width":1200,"height":900}},"screenshots":[]},"plugin_section":[],"plugin_tags":[37395,66595,65874,130912,286],"plugin_category":[45],"plugin_contributors":[259418],"plugin_business_model":[],"class_list":["post-319681","plugin","type-plugin","status-publish","hentry","plugin_tags-color-swatches","plugin_tags-product-attributes","plugin_tags-variable-products","plugin_tags-variation-swatches","plugin_tags-woocommerce","plugin_category-ecommerce","plugin_contributors-devhasib","plugin_committers-devhasib"],"banners":{"banner":"https:\/\/ps.w.org\/sayan-variation-swatches\/assets\/banner-772x250.png?rev=3650668","banner_2x":"https:\/\/ps.w.org\/sayan-variation-swatches\/assets\/banner-1544x500.png?rev=3650668","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/sayan-variation-swatches\/assets\/icon-256x256.png?rev=3650671","icon_2x":"https:\/\/ps.w.org\/sayan-variation-swatches\/assets\/icon-256x256.png?rev=3650671","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/sayan-variation-swatches\/assets\/Screenshot-1.png?rev=3650748","caption":""},{"src":"https:\/\/ps.w.org\/sayan-variation-swatches\/assets\/Screenshot-2.png?rev=3650748","caption":""},{"src":"https:\/\/ps.w.org\/sayan-variation-swatches\/assets\/Screenshot-3.png?rev=3650748","caption":""},{"src":"https:\/\/ps.w.org\/sayan-variation-swatches\/assets\/screenshot-4.png?rev=3650748","caption":""},{"src":"https:\/\/ps.w.org\/sayan-variation-swatches\/assets\/screenshot-5.png?rev=3650748","caption":""}],"raw_content":"<!--section=description-->\n<p><strong>Variation Swatches for WooCommerce<\/strong> replaces the default dropdown-based variation selectors with visually rich swatches \u2014 colors, images, labels, and radio buttons. It improves product browsing experience by making variation selection faster, clearer, and more user-friendly.<\/p>\n\n<p>\ud83d\udcd6 <a href=\"https:\/\/storzen.webtend.net\/variation-swatches-docs.html\">View Documentation<\/a> | \ud83c\udf10 <a href=\"https:\/\/webtend.net\/\">WebTend<\/a><\/p>\n\n<p>= \ud83c\udfa8 Features<\/p>\n\n<ul>\n<li>\u2705 <strong>Dual \/ Split Color Swatches<\/strong> \u2014 two-tone color swatches, free (competitors charge Pro for this)<\/li>\n<li>\u2705 <strong>Archive &amp; Shop Page Swatches<\/strong> \u2014 show swatches on category\/shop pages, free (usually a Pro feature)<\/li>\n<li>\u2705 <strong>Color Swatches<\/strong> \u2014 solid hex color swatches for any attribute<\/li>\n<li>\u2705 <strong>Image Swatches<\/strong> \u2014 upload per-term images for visual variation selection<\/li>\n<li>\u2705 <strong>Label \/ Button Swatches<\/strong> \u2014 S, M, L, XL text buttons for size and more<\/li>\n<li>\u2705 <strong>Radio Button Swatches<\/strong> \u2014 classic radio-style selectors<\/li>\n<li>\u2705 <strong>Archive \"+N More\" Indicator<\/strong> \u2014 shows overflow count cleanly on shop pages<\/li>\n<li>\u2705 <strong>Attribute Label Display<\/strong> \u2014 shows \"Color: Red\" inline with swatches<\/li>\n<\/ul>\n\n<h4>\u26a1 Advanced Variation Features<\/h4>\n\n<ul>\n<li>Automatic variation image switching on swatch click (no page reload)<\/li>\n<li>Out-of-stock display control: blur, blur + cross, or hide completely<\/li>\n<li>Per-product swatch type override (global attribute type overridable per product)<\/li>\n<li>Auto-convert all dropdowns to label swatches with one toggle<\/li>\n<li>Show \/ hide selected attribute name alongside swatches<\/li>\n<\/ul>\n\n<h4>\ud83c\udfa8 Design &amp; Customization<\/h4>\n\n<ul>\n<li>Square, rounded, and circle swatch shapes (global setting)<\/li>\n<li>Custom swatch size for product pages and archive pages separately<\/li>\n<li>Tooltip support with customizable background and text colors<\/li>\n<li>Selected state indicator with custom checkmark color<\/li>\n<li>Custom CSS field for advanced styling<\/li>\n<\/ul>\n\n<h4>\ud83c\udfea Shop &amp; Archive Enhancements<\/h4>\n\n<p>Show variation swatches directly on shop and category pages. Customers can preview product color\/size options without opening product pages \u2014 proven to increase click-through rates.<\/p>\n\n<h4>\u267f Accessibility<\/h4>\n\n<ul>\n<li>ARIA roles (<code>role=\"radio\"<\/code>, <code>aria-checked<\/code>) for screen readers<\/li>\n<li>Full keyboard navigation: Arrow keys, Enter, Space, Escape<\/li>\n<li>Screen-reader-friendly markup structure<\/li>\n<\/ul>\n\n<h4>\u2699\ufe0f Performance &amp; Compatibility<\/h4>\n\n<ul>\n<li>Lightweight \u2014 settings cached in memory, no repeated DB queries on archive pages<\/li>\n<li>No unnecessary AJAX requests on the frontend<\/li>\n<li>Fully compatible with WooCommerce HPOS (High-Performance Order Storage)<\/li>\n<li>Compatible with WooCommerce Cart and Checkout Blocks<\/li>\n<li>Works with Astra, Flatsome, OceanWP, Storefront, GeneratePress, Divi, and most WooCommerce themes<\/li>\n<\/ul>\n\n<h4>\ud83c\udfc6 Perfect For<\/h4>\n\n<ul>\n<li>Fashion and clothing stores (color + size swatches)<\/li>\n<li>Furniture and home d\u00e9cor shops (image swatches)<\/li>\n<li>Cosmetics and beauty products (dual-color swatches)<\/li>\n<li>Any WooCommerce store with variable products<\/li>\n<\/ul>\n\n<h4>How It Works<\/h4>\n\n<ol>\n<li>Install and activate the plugin<\/li>\n<li>Go to <strong>Products \u2192 Attributes<\/strong><\/li>\n<li>Edit an attribute term (e.g. \"Red\" under Color)<\/li>\n<li>Choose swatch type: color, image, label, or radio<\/li>\n<li>Assign values and save \u2014 swatches appear automatically<\/li>\n<\/ol>\n\n<h4>Variation Image Switching<\/h4>\n\n<p>When a customer selects a swatch, the product gallery image updates instantly \u2014 no page reload. Smooth, fast, conversion-friendly.<\/p>\n\n<h4>Frequently Asked Questions<\/h4>\n\n<h4>Does this work with all WooCommerce themes?<\/h4>\n\n<p>Yes. The plugin uses standard WooCommerce hooks and works with most modern WooCommerce themes including Astra, Flatsome, OceanWP, Storefront, GeneratePress, and Divi. If your theme uses a heavily customised variation form, you may need to add a small CSS override \u2014 we include a Custom CSS field in Settings \u2192 Advanced for exactly this purpose.<\/p>\n\n<h4>Can I assign different swatches per product?<\/h4>\n\n<p>Yes. Set global swatches per attribute term from <strong>Products \u2192 Attributes<\/strong>, then override the swatch type on a per-product basis from the product edit screen. Per-product overrides take priority over the global setting.<\/p>\n\n<h4>Does it support custom (local) attributes?<\/h4>\n\n<p>Yes. Both global WooCommerce attributes (created in <strong>Products \u2192 Attributes<\/strong>) and custom per-product attributes (created directly on a product) work with swatches. For per-product attributes, select the swatch type from the product edit screen.<\/p>\n\n<h4>What happens to out-of-stock variations?<\/h4>\n\n<p>You can choose how out-of-stock swatches are displayed from <strong>Settings \u2192 General \u2192 Out-of-Stock Display<\/strong>: blur only, blur with a cross-mark, or hide completely. The default is blur with cross.<\/p>\n\n<h4>Does it work on shop and category pages?<\/h4>\n\n<p>Yes \u2014 archive and shop page swatches are available in the free version. Enable them from <strong>Settings \u2192 Shop \/ Archive<\/strong> tab and customers will see swatches directly on product cards without having to open each product page.<\/p>\n\n<h4>Is it translation ready?<\/h4>\n\n<p>Yes. Fully translation ready and compatible with WPML, Polylang, and other multilingual plugins. A .pot file is included in the <code>\/languages\/<\/code> folder so you can create your own translations using Poedit or Loco Translate.<\/p>\n\n<h4>Do the swatches work inside Quick View popups?<\/h4>\n\n<p>Yes. The plugin uses a MutationObserver to detect dynamically loaded product modals (Quick View, popup builders, etc.) and automatically initialises swatches inside them without requiring a page reload.<\/p>\n\n<h4>Will swatches appear in the WooCommerce Cart and Checkout Blocks?<\/h4>\n\n<p>The plugin is compatible with WooCommerce Cart and Checkout Blocks. Swatches control variation selection on the product page; the selected variation data flows into the cart and checkout exactly as it does with the standard WooCommerce experience.<\/p>\n\n<h4>The swatches look smaller or larger than expected. How do I resize them?<\/h4>\n\n<p>Go to <strong>Settings \u2192 Design<\/strong> and adjust the <strong>Swatch Width<\/strong> and <strong>Swatch Height<\/strong> for product pages, or <strong>Archive Swatch Width \/ Height<\/strong> for shop\/category pages. Sizes are set in pixels and changes apply instantly after saving.<\/p>\n\n<h4>Can I add my own custom CSS?<\/h4>\n\n<p>Yes. Go to <strong>Settings \u2192 Advanced<\/strong>, enable the <strong>Custom CSS<\/strong> toggle, and paste your CSS in the text area. This CSS is output inline on the frontend only, and is scoped to the plugin's elements.<\/p>\n\n<h4>Does the plugin slow down my store?<\/h4>\n\n<p>No. Settings are loaded once per request and cached in memory, so there are no repeated database queries \u2014 even on archive pages with dozens of products. Frontend assets (CSS + JS) are enqueued only on pages that need them.<\/p>\n\n<h4>Is it compatible with WooCommerce High-Performance Order Storage (HPOS)?<\/h4>\n\n<p>Yes. The plugin declares full compatibility with HPOS (custom order tables) and WooCommerce Cart &amp; Checkout Blocks.<\/p>\n\n<h4>How do I reset all plugin settings to default?<\/h4>\n\n<p>Go to <strong>Settings \u2192 Advanced<\/strong> and use the Reset Settings button at the bottom of the page. This restores all settings to their default values without affecting your attribute term swatch data.<\/p>\n\n<h4>Where can I get support?<\/h4>\n\n<p>Use the <a href=\"https:\/\/wordpress.org\/support\/plugin\/sayan-variation-swatches\/\">WordPress.org support forum<\/a> for free support. Please include your WordPress version, WooCommerce version, active theme, and a description of the issue when opening a thread.<\/p>\n\n<h4>Screenshots<\/h4>\n\n<ol>\n<li>Product page with color, image, and label variation swatches<\/li>\n<li>Plugin settings panel \u2014 General tab<\/li>\n<li>Design &amp; Style customization options<\/li>\n<li>Archive \/ shop page swatches display<\/li>\n<li>Attribute term edit screen with swatch type selector<\/li>\n<\/ol>\n\n<h4>Changelog<\/h4>\n\n<h4>1.0.3<\/h4>\n\n<ul>\n<li><strong>New:<\/strong> Review notice system \u2014 politely prompts active users to leave a WP.org review after 7 days or 3 admin sessions<\/li>\n<li><strong>New:<\/strong> Archive \"+N more\" overflow badge \u2014 shows remaining swatch count cleanly when there are many variations<\/li>\n<li><strong>New:<\/strong> Attribute label display \u2014 shows \"Color: Red\" inline alongside swatches on product pages<\/li>\n<li><strong>New:<\/strong> Quick View plugin compatibility \u2014 MutationObserver-based reinit for dynamically loaded product modals<\/li>\n<li><strong>Improvement:<\/strong> Settings static cache \u2014 <code>get_option()<\/code> called once per request instead of once per swatch render, significantly reducing DB queries on archive pages with many products<\/li>\n<li><strong>Improvement:<\/strong> Expanded FAQ section \u2014 8 new answers covering Quick View, Blocks, resizing, Custom CSS, HPOS, reset, and support<\/li>\n<li><strong>Compat:<\/strong> Tested with WordPress 7.1 \u2014 no issues found<\/li>\n<li><strong>Compat:<\/strong> Tested with WooCommerce 11.0 \u2014 no issues found<\/li>\n<li><strong>Fix:<\/strong> \"Tested up to\" bumped to WordPress 7.1 and WC 11.0 in both plugin header and readme.txt<\/li>\n<li><strong>Fix:<\/strong> Plugin display name updated to keyword-first title for better WP.org search visibility<\/li>\n<li><strong>Fix:<\/strong> Author URI updated to webtend.net<\/li>\n<\/ul>\n\n<h4>1.0.2<\/h4>\n\n<ul>\n<li>Fixed: saving settings on one tab was resetting settings on other tabs back to defaults. Each tab now saves independently.<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Added compatibility guard so the plugin runs safely alongside Sayan Variation Swatches Pro without function\/class redeclaration conflicts.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release<\/li>\n<\/ul>","raw_excerpt":"Replace WooCommerce dropdowns with color, image, label &amp; radio swatches. Works on product, shop &amp; archive pages.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ko.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/319681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ko.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/ko.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/ko.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=319681"}],"author":[{"embeddable":true,"href":"https:\/\/ko.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/devhasib"}],"wp:attachment":[{"href":"https:\/\/ko.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=319681"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/ko.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=319681"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/ko.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=319681"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/ko.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=319681"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/ko.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=319681"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/ko.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=319681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}