{"id":76869,"date":"2017-11-06T10:59:16","date_gmt":"2017-11-06T10:59:16","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/variation-swatches-style\/"},"modified":"2026-09-13T17:15:49","modified_gmt":"2026-09-13T17:15:49","slug":"variation-swatches-style","status":"publish","type":"plugin","link":"https:\/\/bal.wordpress.org\/plugins\/variation-swatches-style\/","author":15653327,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.0.1","stable_tag":"trunk","tested":"7.2","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"Smart Variation Swatches for WooCommerce","header_author":"aThemeArt","header_description":"An extension of WooCommerce that make variable products be more beauty and friendly with customers.","assets_banners_color":"f0fcf3","last_updated":"2026-09-13 17:15:49","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/athemeart.com\/downloads\/variation-swatches-style-woocommerce-pro\/","header_author_uri":"https:\/\/athemeart.com\/","rating":3.2,"author_block_rating":0,"active_installs":3000,"downloads":198670,"num_ratings":13,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.3.9":{"tag":"1.3.9","author":"athemeart","date":"2025-07-25 06:22:17","revision":3333985},"1.4.0":{"tag":"1.4.0","author":"athemeart","date":"2025-07-25 06:20:35","revision":3333983}},"upgrade_notice":{"2.0.0":"<p>Major UI and settings update. Review Variation Swatches \u2192 Settings after upgrading. For Radio\/Checkbox types, advanced archive options, enhanced filter widget, and priority support, see the Pro version.<\/p>"},"ratings":{"1":5,"2":1,"3":0,"4":0,"5":7},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":2345984,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128}},"assets_banners":{"banner-772x250.png":{"filename":"banner-772x250.png","revision":2455653,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.3.9","1.4.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3695122,"resolution":"1","location":"assets","locale":"","width":1155,"height":566},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3695122,"resolution":"2","location":"assets","locale":"","width":623,"height":2506},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3695122,"resolution":"3","location":"assets","locale":"","width":1146,"height":419},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3695122,"resolution":"4","location":"assets","locale":"","width":1017,"height":457},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3695122,"resolution":"5","location":"assets","locale":"","width":1017,"height":457},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3695122,"resolution":"6","location":"assets","locale":"","width":524,"height":296}},"screenshots":{"1":"Frontend variation swatches for WooCommerce (color and label)","2":"Products \u2192 Attributes \u2013 set Color or Image type","3":"Term color picker for WooCommerce color attribute","4":"Image attribute term upload","5":"Style and tooltip settings"}},"plugin_section":[],"plugin_tags":[37395,280509,183755,280508,142374],"plugin_category":[45],"plugin_contributors":[146580],"plugin_business_model":[],"class_list":["post-76869","plugin","type-plugin","status-publish","hentry","plugin_tags-color-swatches","plugin_tags-image-attribute","plugin_tags-variation-swatches-for-woocommerce","plugin_tags-woocommerce-color-attribute","plugin_tags-woocommerce-swatches","plugin_category-ecommerce","plugin_contributors-athemeart","plugin_committers-athemeart"],"banners":{"banner":"https:\/\/ps.w.org\/variation-swatches-style\/assets\/banner-772x250.png?rev=2455653","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/variation-swatches-style\/assets\/icon-128x128.png?rev=2345984","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/variation-swatches-style\/assets\/screenshot-1.png?rev=3695122","caption":"Frontend variation swatches for WooCommerce (color and label)"},{"src":"https:\/\/ps.w.org\/variation-swatches-style\/assets\/screenshot-2.png?rev=3695122","caption":"Products \u2192 Attributes \u2013 set Color or Image type"},{"src":"https:\/\/ps.w.org\/variation-swatches-style\/assets\/screenshot-3.png?rev=3695122","caption":"Term color picker for WooCommerce color attribute"},{"src":"https:\/\/ps.w.org\/variation-swatches-style\/assets\/screenshot-4.png?rev=3695122","caption":"Image attribute term upload"},{"src":"https:\/\/ps.w.org\/variation-swatches-style\/assets\/screenshot-5.png?rev=3695122","caption":"Style and tooltip settings"},{"src":"https:\/\/ps.w.org\/variation-swatches-style\/assets\/screenshot-6.png?rev=3695122","caption":""}],"raw_content":"<!--section=description-->\n<p><strong>Variation swatches for WooCommerce<\/strong> replace plain attribute dropdowns with clear, clickable <strong>WooCommerce swatches<\/strong>. Shoppers can pick colors and images at a glance instead of reading long select lists\u2014better UX and fewer abandoned carts.<\/p>\n\n<p>This free <strong>WooCommerce swatches<\/strong> plugin focuses on the attributes stores use most: <strong>WooCommerce color attribute<\/strong> swatches and <strong>image attribute<\/strong> swatches, plus text button\/label options for sizes and materials.<\/p>\n\n<h4>Why use variation swatches for WooCommerce?<\/h4>\n\n<p>Standard variable products force customers to open a dropdown for every option. With <strong>variation swatches for WooCommerce<\/strong>, each option becomes a visual chip:<\/p>\n\n<ul>\n<li><strong>Color<\/strong> \u2013 Hex-based circles or squares for a true <strong>WooCommerce color attribute<\/strong><\/li>\n<li><strong>Image<\/strong> \u2013 Thumbnails for patterns, fabrics, or styles (<strong>image attribute<\/strong>)<\/li>\n<li><strong>Button \/ Label<\/strong> \u2013 Short text chips for size, material, or pack type<\/li>\n<li><strong>Select<\/strong> \u2013 Native dropdown when a list is still the best fit<\/li>\n<\/ul>\n\n<p>Whether you sell apparel, cosmetics, furniture, or electronics, <strong>WooCommerce swatches<\/strong> make variable products easier to understand and faster to buy.<\/p>\n\n<h4>WooCommerce color attribute<\/h4>\n\n<p>Set any global attribute type to <strong>Color<\/strong> under <strong>Products \u2192 Attributes<\/strong>. Then assign a color to each term (e.g. Red, Navy, Olive). On the product page, the <strong>WooCommerce color attribute<\/strong> appears as color swatches instead of a dropdown. Global settings apply store-wide so you configure once and reuse everywhere.<\/p>\n\n<h4>Image attribute<\/h4>\n\n<p>For prints, finishes, or product photos, use the <strong>image attribute<\/strong> type. Upload a small image per term; customers see visual <strong>WooCommerce swatches<\/strong> that match the real product. Ideal for wallpapers, fabrics, phone cases, and similar catalogs.<\/p>\n\n<h4>Free features at a glance<\/h4>\n\n<ul>\n<li><strong>Variation swatches for WooCommerce<\/strong> \u2013 Color, Image, Button\/Label, Select<\/li>\n<li>Global attribute types for <strong>WooCommerce color attribute<\/strong> and <strong>image attribute<\/strong><\/li>\n<li>Modern admin: Dashboard, guided Settings, Help<\/li>\n<li>Style controls: shape, size, gap, borders, button colors<\/li>\n<li>Tooltips, out-of-stock display styles, hide original dropdown<\/li>\n<li>Shop \/ archive swatches (basic)<\/li>\n<li>Custom Swatches product tab with global-first logic<\/li>\n<li>Filter widget (classic and block widget editor)<\/li>\n<li>Compatible with latest WordPress and WooCommerce, including HPOS and Cart\/Checkout Blocks<\/li>\n<\/ul>\n\n<h4>How to get started<\/h4>\n\n<ol>\n<li>Install and activate <strong>Smart Variation Swatches for WooCommerce<\/strong>.<\/li>\n<li>Open <strong>Variation Swatches \u2192 Dashboard<\/strong> for a quick overview.<\/li>\n<li>Go to <strong>Products \u2192 Attributes<\/strong> and set Type to Color, Image, or Button\/Label.<\/li>\n<li>Edit terms and set colors or upload images for your <strong>WooCommerce color attribute<\/strong> \/ <strong>image attribute<\/strong>.<\/li>\n<li>Add the attribute to variable products and create variations.<\/li>\n<li>Optionally fine-tune Style and Tooltip under <strong>Variation Swatches \u2192 Settings<\/strong>.<\/li>\n<\/ol>\n\n<p>Documentation: <a href=\"https:\/\/docs.athemeart.com\/docs\/smart-variation-swatches-plugins-documentation\/\">Smart Variation Swatches docs<\/a><\/p>\n\n<h4>Who is this for?<\/h4>\n\n<p>Store owners who want <strong>variation swatches for WooCommerce<\/strong> without complexity: fashion and apparel (color + size), home and d\u00e9cor (<strong>image attribute<\/strong> for patterns), beauty (shade <strong>WooCommerce color attribute<\/strong>), and any shop with variable products that benefit from visual <strong>WooCommerce swatches<\/strong>.<\/p>\n\n<p><strong>Pro highlights<\/strong><\/p>\n\n<ul>\n<li><strong>Radio &amp; Checkbox attribute types<\/strong> \u2013 Form-style choices when chips are not ideal.<\/li>\n<li><strong>Advanced archive options<\/strong> \u2013 Fuller control of where and how <strong>WooCommerce swatches<\/strong> appear on shop and category pages.<\/li>\n<li><strong>Enhanced filter widget<\/strong> \u2013 Filter the catalog by color, image, and other attributes with richer swatch UI in sidebars and widget areas.<\/li>\n<li><strong>Priority support<\/strong> \u2013 Faster help when you need it.<\/li>\n<li><strong>Single attribute swatches<\/strong> and multi-attribute setups with Pro-level overrides and flexibility.<\/li>\n<\/ul>\n\n<p>Upgrade: <a href=\"https:\/\/athemeart.com\/downloads\/smart-variation-swatches-woocommerce-pro\/\">Smart Variation Swatches for WooCommerce Pro<\/a><\/p>\n\n<h3>Video Documentation:<\/h3>\n\n<p>https:\/\/www.youtube.com\/watch?v=DX2Jfh-h2SA<\/p>\n\n<h3>How to create Variation Swatches For Custom Attribute :<\/h3>\n\n<p>https:\/\/www.youtube.com\/watch?v=7GA9RYtYvRo<\/p>\n\n<p>Theme Compatibility\nSmart Variation Swatches for WooCommerce works with most WooCommerce-ready themes, including Hello Elementor, OceanWP, Hestia, Joyas Shop, Storefront, XStore, eMart, Shoper, Kadence, Avada, The9 Store, Prime Shopping Cart and Divi. Because some themes use custom variation templates, light CSS or template tweaks may be needed for a perfect match. In typical setups, color, image, and label swatches display correctly without extra work.<\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin folder to <code>\/wp-content\/plugins\/<\/code> or install via <strong>Plugins \u2192 Add New<\/strong>.<\/li>\n<li>Activate <strong>Smart Variation Swatches for WooCommerce<\/strong>.<\/li>\n<li>Open <strong>Variation Swatches \u2192 Dashboard<\/strong>.<\/li>\n<li>Under <strong>Products \u2192 Attributes<\/strong>, set each attribute\u2019s Type (Color, Image, Button\/Label, or Select).<\/li>\n<li>Configure term colors or images, then assign attributes to variable products.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"what%20are%20variation%20swatches%20for%20woocommerce%3F\"><h3>What are variation swatches for WooCommerce?<\/h3><\/dt>\n<dd><p><strong>Variation swatches for WooCommerce<\/strong> are visual alternatives to attribute dropdowns\u2014color dots, images, or text buttons\u2014so customers select variations without using a select menu.<\/p><\/dd>\n<dt id=\"how%20do%20i%20create%20a%20woocommerce%20color%20attribute%3F\"><h3>How do I create a WooCommerce color attribute?<\/h3><\/dt>\n<dd><p>Go to <strong>Products \u2192 Attributes<\/strong>, add or edit an attribute, set Type to <strong>Color<\/strong>, then under Configure terms assign a color to each term. That <strong>WooCommerce color attribute<\/strong> will show as color <strong>WooCommerce swatches<\/strong> on variable products.<\/p><\/dd>\n<dt id=\"how%20do%20i%20use%20an%20image%20attribute%3F\"><h3>How do I use an image attribute?<\/h3><\/dt>\n<dd><p>Set the attribute Type to <strong>Image<\/strong>, then upload an image for each term. The <strong>image attribute<\/strong> displays as image <strong>WooCommerce swatches<\/strong> on the product page.<\/p><\/dd>\n<dt id=\"will%20this%20work%20with%20my%20theme%3F\"><h3>Will this work with my theme?<\/h3><\/dt>\n<dd><p>Yes. The plugin works with most WooCommerce-ready themes (Storefront, Astra, OceanWP, Kadence, Hello Elementor, and others). Some highly customized templates may need light CSS.<\/p><\/dd>\n<dt id=\"is%20it%20compatible%20with%20the%20latest%20woocommerce%3F\"><h3>Is it compatible with the latest WooCommerce?<\/h3><\/dt>\n<dd><p>Yes. It supports current WordPress and WooCommerce releases, including High-Performance Order Storage (HPOS) and Cart\/Checkout Blocks.<\/p><\/dd>\n<dt id=\"free%20vs%20pro%20%E2%80%93%20which%20should%20i%20choose%3F\"><h3>Free vs Pro \u2013 which should I choose?<\/h3><\/dt>\n<dd><p>Use <strong>Free<\/strong> for Color, Image, Button\/Label, and Select <strong>variation swatches for WooCommerce<\/strong>. Choose <strong>Pro<\/strong> for <strong>Radio &amp; Checkbox attribute types<\/strong>, <strong>advanced archive options<\/strong>, an <strong>enhanced filter widget<\/strong> (filter by color, image, and other attributes), <strong>priority support<\/strong>, and richer single-attribute and multi-attribute workflows.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>2.0.0<\/h4>\n\n<ul>\n<li>Pro-style admin UI: Dashboard, Settings tabs, Help<\/li>\n<li>Settings applied on frontend (Style, Tooltip, Swatch Types, Availability)<\/li>\n<li>Swatch Types can hide types from Attributes and frontend<\/li>\n<li>HPOS and Cart\/Checkout Blocks compatibility<\/li>\n<li>Security: prepared statements for attribute queries<\/li>\n<li>Block-editor compatible filter widget<\/li>\n<li>Custom Swatches product tab with global-first logic<\/li>\n<li>Tested with WordPress 6.8 and WooCommerce 10.9<\/li>\n<\/ul>\n\n<h4>1.4.0<\/h4>\n\n<ul>\n<li>HPOS compatibility<\/li>\n<\/ul>","raw_excerpt":"Variation swatches for WooCommerce that turn dropdowns into color, image, and label swatches. Easy WooCommerce color attribute and image attribute set &hellip;","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/76869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=76869"}],"author":[{"embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/athemeart"}],"wp:attachment":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=76869"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=76869"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=76869"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=76869"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=76869"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=76869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}