{"id":11935,"date":"2025-06-26T12:56:51","date_gmt":"2025-06-26T09:56:51","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?p=11935"},"modified":"2025-07-28T11:57:11","modified_gmt":"2025-07-28T08:57:11","slug":"variation-swatch-solutions-woocommerce","status":"publish","type":"post","link":"https:\/\/creativethemes.com\/blocksy\/blog\/variation-swatch-solutions-woocommerce\/","title":{"rendered":"5 Best Variation Swatch Solutions For WooCommerce (+ How to Add Them)"},"content":{"rendered":"\n<p>Are you looking for ways to add product variation swatches to your WooCommerce store?<\/p>\n\n\n\n<p>In WooCommerce, variable products refer to different versions of a single product that differ in attributes such as color, size, material, or style. These variations allow customers to choose the specific option that suits their needs best. Offering variable products in your store will help <strong>increase sales, conversion rates, customer retention, engagement, and brand reputation<\/strong>. <\/p>\n\n\n\n<p>By default, WooCommerce displays variations in basic dropdowns \u2014 not exactly engaging or easy to browse.<\/p>\n\n\n\n<p>Variation swatches are a much better way of displaying variable products because they display products as <strong>color swatches <\/strong>(e.g., for color attributes) or <strong>image swatches <\/strong>(e.g., for texture attributes). For instance, if you&#8217;re selling t-shirts, you could use <em>color swatches <\/em>to show the different colors available or image swatches to display various graphic prints or designs. Similarly, if you&#8217;re selling shoes, you could use <em>image swatches <\/em>to showcase different laces, soles, or materials.<\/p>\n\n\n\n<p>Visual swatches make it easier for customers to compare options and pick what they want faster. It increases the chances of a sale and reduces the likelihood of returns due to incorrect product selection.<\/p>\n\n\n\n<p>Since <strong>WooCommerce does not have a native feature for visual variation swatches<\/strong>, you need to rely on third-party plugins to add them to your product pages. While there are several third-party plugins to choose from, third-party plugins can sometimes introduce compatibility issues with your theme or other plugins. They can slow down your website and affect performance, among other things.<\/p>\n\n\n\n<p>If you&#8217;re looking for a hassle-free solution, consider using <a href=\"https:\/\/creativethemes.com\/blocksy\/\" target=\"_blank\" rel=\"noreferrer noopener\">Blocksy Pro<\/a>. It can easily add visual variation swatches to your product pages without affecting your site\u2019s performance or causing compatibility issues.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"key-takeaways\"><strong>Key Takeaways:<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WooCommerce lacks native variation swatches<\/strong>, so third-party plugins are essential for visual product options like color, image, and button swatches.<\/li>\n\n\n\n<li><strong>Blocksy Pro offers built-in variation swatch functionality<\/strong>, eliminating compatibility issues common with external plugins.<\/li>\n\n\n\n<li><strong>Top 5 variation swatch plugins reviewed<\/strong>&nbsp;include IconicWP, RadiusTheme, Plugin Republic, Swatchly, and Blocksy Pro, with pricing ranging from $39 to $79 annually.<\/li>\n\n\n\n<li><strong>Swatches improve user experience<\/strong>&nbsp;and boost conversions by helping customers make faster, more confident purchase decisions.<\/li>\n\n\n\n<li><strong>Blocksy Pro enables full customization and global\/individual swatch control<\/strong>&nbsp;directly within the WordPress Customizer.<\/li>\n<\/ul>\n\n\n\n<p>Next, we\u2019ll review Blocksy Pro alongside four other top swatch plugins and break down what each one offers. At the end of this article, we are going to demonstrate how to use Blocksy Pro to create variation swatches for your WooCommerce products.<\/p>\n\n\n\n<p>Let\u2019s dive in.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#key-takeaways\">Key Takeaways:<\/a><\/li><li><a href=\"#top-variation-swatch-solutions-for-woo-commerce-stores\">Top Variation Swatch Solutions For WooCommerce Stores<\/a><\/li><li><a href=\"#blocksy-pro\">Blocksy Pro<\/a><\/li><li><a href=\"#adding-variation-swatches-with-blocksy-pro\">Adding Variation Swatches with Blocksy Pro<\/a><ul><li><a href=\"#configure-variation-swatches-globally\">Configure Variation Swatches Globally<\/a><\/li><li><a href=\"#configure-variation-swatches-for-individual-products\">Configure Variation Swatches for Individual Products<\/a><\/li><li><a href=\"#general-variation-swatches-styling-options\">General Variation Swatches Styling Options<\/a><\/li><li><a href=\"#swatches-on-product-archive-pages\">Swatches on Product Archive Pages<\/a><\/li><\/ul><\/li><li><a href=\"#faq-woo-commerce-variation-swatches\">FAQ: WooCommerce Variation Swatches<\/a><\/li><li><a href=\"#conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"top-variation-swatch-solutions-for-woo-commerce-stores\">Top Variation Swatch Solutions For WooCommerce Stores<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>Plugin<\/strong><\/th><th><strong>Swatch Types<\/strong><\/th><th><strong>Unique Features<\/strong><\/th><th><strong>Pricing (Annual)<\/strong><\/th><th><strong>Lifetime Plan<\/strong><\/th><th><strong>Best For<\/strong><\/th><\/tr><\/thead><tbody><tr><td><strong>WooCommerce Attribute Swatches (IconicWP)<\/strong><\/td><td>Color, Image, Text, Buttons<\/td><td>Hover preview, attribution fees<\/td><td>$79\/year<\/td><td>$489 (30 sites)<\/td><td>Advanced Woo stores needing image previews<\/td><\/tr><tr><td><strong>Variation Swatches for WooCommerce (RadiusTheme)<\/strong><\/td><td>Color, Image, Text, Buttons<\/td><td>Quick view, &#8216;more&#8217; button, hide OOS items<\/td><td>$39\/year<\/td><td>$119 (1 site)<\/td><td>Budget-conscious stores needing display flexibility<\/td><\/tr><tr><td><strong>WooCommerce Variation Swatches (Plugin Republic)<\/strong><\/td><td>Color, Image, Text, Mixed<\/td><td>Global\/per-product config, shop page swatches<\/td><td>$59\/year<\/td><td>$179 (1 site)<\/td><td>Shops needing mixed\/global swatch control<\/td><\/tr><tr><td><strong>Swatchly (HasThemes)<\/strong><\/td><td>Color, Image, Label, Mixed<\/td><td>Blur OOS, swatch limit, quick view, more link<\/td><td>$49\/year<\/td><td>$99 (1 site)<\/td><td>Mid-level stores focused on UX tweaks<\/td><\/tr><tr><td><strong>Blocksy Pro<\/strong><\/td><td>Color, Image, Mixed<\/td><td>Native theme integration, unified styling options<\/td><td>$69\/year<\/td><td>$199 (1 site)<\/td><td>Stores using Blocksy theme for seamless UX<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"woo-commerce-attribute-swatches-iconic-wp\">WooCommerce Attribute Swatches (IconicWP)<\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3b9c8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3b9c8\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-21.40.59.png\" alt=\"\" class=\"wp-image-11940\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>IconicWP\u2019s <a href=\"https:\/\/iconicwp.com\/products\/woocommerce-attribute-swatches\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Attribute Swatches plugin<\/a> replaces the default WooCommerce variation dropdown menu with visual variation swatches like color swatches, image swatches, and text buttons for your variable product pages.<\/p>\n\n\n\n<p>You can choose between two button swatches, text and radio buttons, and decide how the selected swatch will appear, with a tick or a border. You can also enable a larger preview of image swatches when a customer hovers over one and fine-tune your product pricing by adding attribution fees.<\/p>\n\n\n\n<p>WooCommerce Attribute Swatches by IconicWP come at an annual cost of $79 for a single website license. You can also get 3 and 30 website plans for recurring yearly fees of $159 and $489, respectively. Find the pricing plans <a href=\"https:\/\/iconicwp.com\/products\/woocommerce-attribute-swatches\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"variation-swatches-for-woo-commerce-radius-theme\">Variation Swatches for WooCommerce (RadiusTheme)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-21.44.21.png\" alt=\"\" class=\"wp-image-11942\"\/><\/figure>\n\n\n\n<p>Radius Themes\u2019 <a href=\"https:\/\/www.radiustheme.com\/downloads\/woocommerce-variation-swatches\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Variation Swatches plugin<\/a> allows you to add color, images, text, and radio button swatches to your product pages.<\/p>\n\n\n\n<p>Like Blocksy, you can change the style of the color swatches (round or square) with this plugin. That said, it also offers some unique features, including the ability to define how many swatches are displayed on the product page and hide the rest with a &#8220;more&#8221; button in your store\u2019s archive pages.<\/p>\n\n\n\n<p>You can display variation swatches in their quick view window, choose to blur or hide out-of-stock products, and even add custom URLs that automatically change to match the selected variations.&nbsp;<br>The Variation Swatches for WooCommerce by RadiusTheme has three annual plans, the cheapest of which costs $39 for a single website license. There are three lifetime plans; the cheapest one costs $119 for a single website license. Find the pricing plans <a href=\"https:\/\/www.radiustheme.com\/downloads\/woocommerce-variation-swatches\/#pricing\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"woo-commerce-variation-swatches-plugin-republic\">WooCommerce Variation Swatches (Plugin Republic)<\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3c93f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3c93f\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-21.47.09.png\" alt=\"\" class=\"wp-image-11944\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>With the Plugin Republic\u2019s <a href=\"https:\/\/pluginrepublic.com\/wordpress-plugins\/woocommerce-variation-swatches\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Variation Swatches plugin<\/a>, you can create color, image, radio, text\/label, and mixed swatches. The plugin offers the usual features like configuring swatches globally, per attribute, or per product, and displaying swatches on the archive and shop pages of your WooCommerce store.<\/p>\n\n\n\n<p>Plugin Republic offers a basic plan that costs $59 annually for a single website license, and the pro plan costs $99 annually for an <strong>unlimited website license<\/strong>. The lifetime deal for the basic plan costs $179, and the pro plan costs $299. Find the pricing plans <a href=\"https:\/\/pluginrepublic.com\/wordpress-plugins\/woocommerce-variation-swatches\/#plugin-prices\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"swatchly-has-themes\">Swatchly (HasThemes)<\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3ce33&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3ce33\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-21.52.59.png\" alt=\"\" class=\"wp-image-11948\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p><a href=\"https:\/\/hasthemes.com\/plugins\/swatchly-product-variation-swatches-for-woocommerce-products\/\" rel=\"nofollow noopener\" target=\"_blank\">Swatchly<\/a> offers image, color, label, and mix variation swatches along with the ability to add blur, hide or add cross signs to out-of-stock products, limit the number of swatches being displayed, and add a &#8220;more&#8221; link to show more swatches, add variation swatches to archive pages and quick view windows, among other things.<\/p>\n\n\n\n<p>Swatchly by HasThemes offers three annual recurring pricing plans, the cheapest of which costs $49 for a single website license. You can try out the plugin for a month for $1. Their lifetime plan starts at $99 for a single website license. Find the pricing plans <a href=\"https:\/\/hasthemes.com\/plugins\/swatchly-product-variation-swatches-for-woocommerce-products\/#pricing-swatchly\" rel=\"nofollow noopener\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"blocksy-pro\">Blocksy Pro<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1492\" height=\"796\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/CleanShot-2024-11-27-at-10.54.44.png\" alt=\"\" class=\"wp-image-11993\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/creativethemes.com\/blocksy\/premium\/\" target=\"_blank\" rel=\"noreferrer noopener\">Blocksy Pro<\/a> (our product) is a powerful package that lets you add variation swatches to product pages along with dozens of other WooCommerce-specific features, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/woocommerce\/quick-view\/\" target=\"_blank\" rel=\"noreferrer noopener\">Quick View option<\/a> allows customers to instantly preview product details without leaving the shop page.<\/li>\n\n\n\n<li><a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/coming-soon-maintenance-mode-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Custom Maintenance<\/a> and <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/create-thank-you-page-woocommerce-ultimate-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Thank-You pages<\/a> that allow store owners to create personalized pages for scheduled maintenance and post-purchase thank-you messages.<\/li>\n\n\n\n<li>A <a href=\"https:\/\/creativethemes.com\/blocksy\/blog\/best-woocommerce-wishlist-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">Wishlist<\/a> that allows customers the ability to save products for later and share their desired items, among <a href=\"https:\/\/creativethemes.com\/blocksy\/premium\/#features\" target=\"_blank\" rel=\"noreferrer noopener\">other things<\/a>.<\/li>\n<\/ul>\n\n\n\n<p>With Blocksy Pro, you can add variation swatches to product attributes and configure them <strong>globally <\/strong>or on <strong>individual product pages <\/strong>when you want to override global settings. You can <strong>style <\/strong>them differently and change color, shape, and size from the theme\u2019s Customizer.<\/p>\n\n\n\n<p>Since Blocksy Pro is built to work natively with the Blocksy theme, it eliminates common plugin compatibility issues. That\u2019s because the Blocksy Pro includes the Blocksy theme and the Companion Pro plugin.<\/p>\n\n\n\n<p>Blocksy Pro\u2019s purposefully designed combination provides a more <strong>reliable solution <\/strong>than generic third-party plugins. The theme and companion plugin are built to work together seamlessly so that you get perfect compatibility, optimized performance, and a unified settings interface in the WordPress Customizer.<\/p>\n\n\n\n<p>Blocksy Pro has three license plans, the cheapest of which costs <strong>$69 per year <\/strong>for a single website. It also offers three lifetime plans; the cheapest one costs $199 for a single website license. Find the pricing plans <a href=\"https:\/\/creativethemes.com\/blocksy\/pricing\/?plan=yearly\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-variation-swatches-with-blocksy-pro\">Adding Variation Swatches with Blocksy Pro<\/h2>\n\n\n\n<p>We will show you how to add variations swatches (button, color, image, and mixed swatches) to your WooCommerce products using Blocksy Pro. There\u2019s a lot to cover, so let\u2019s just dive right in.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-install-and-activate-blocksy-pro\">Step 1: Install and Activate Blocksy Pro<\/h3>\n\n\n\n<p>As we mentioned in the previous section, Blocksy Pro includes the Blocksy theme and the Companion plugin.<\/p>\n\n\n\n<p>So, to install and activate the Blocksy Pro package, <a href=\"https:\/\/creativethemes.com\/blocksy\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">purchase<strong> <\/strong>the package<\/a> and download the <strong>Companion <\/strong>plugin to your local computer.<\/p>\n\n\n\n<p>Next, upload, install, and <strong>activate <\/strong>the plugin in your WooCommerce store. Then, select the <strong>Hit Install &amp; Activate the Blocksy Theme<\/strong> button, and that\u2019s it. You now have Blocksy Pro installed on your WooCommerce store.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3d597&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3d597\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.14.33.png\" alt=\"\" class=\"wp-image-11958\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>There\u2019s just one thing left to do \u2013 activate your unique Blocksy plugin license.<\/p>\n\n\n\n<p>Find the license key in your Blocksy account and then go to <strong>Plugins \u2192 Installed Plugins \u2192 Blocksy Companion (Premium) \u2192 Activate License<\/strong>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3d9b4&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3d9b4\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.18.15.png\" alt=\"\" class=\"wp-image-11960\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2-enable-the-variation-swatches-module\">Step 2: Enable the Variation Swatches Module<\/h3>\n\n\n\n<p>To start using variation swatches, you need to enable the module by going to <strong>Blocksy \u2192 Extensions \u2192 Shop Extra <\/strong>and toggling on the Shop Extra option.<\/p>\n\n\n\n<p>As soon as you do that, the page will be populated with several modules. Find the <strong>Variation Swatches<\/strong> module and toggle it on.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3ddda&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3ddda\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.21.54.png\" alt=\"\" class=\"wp-image-11964\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-add-variation-swatches-to-products\">Step 3: Add Variation Swatches to Products<\/h3>\n\n\n\n<p>Blocksy allows you to add four types of variation swatches to your products: button, color, image, and mixed.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Button swatches <\/strong>are ideal for products where the variation is not visually distinct, like a book that is available in different formats.<\/li>\n\n\n\n<li><strong>Color swatches <\/strong>are required when the product color is a key differentiator, like a dress in five different colors.<\/li>\n\n\n\n<li><strong>Image swatches <\/strong>are Ideal for products where the image helps to convey the variation, like a phone case in different designs.<\/li>\n\n\n\n<li><strong>Mixed swatches <\/strong>are ideal for products where the combination of color and image helps to convey the variation, like a scarf that comes in different colors and patterns.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"configure-variation-swatches-globally\">Configure Variation Swatches Globally<\/h4>\n\n\n\n<p>Go to <strong>Products \u2192 Attributes<\/strong>, <strong>edit <\/strong>any of the attributes, and <strong>select a variation swatch <\/strong>from the dropdown menu adjacent to the <strong>Type <\/strong>option.<\/p>\n\n\n\n<p>Remember to hit the Update button.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3e2da&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3e2da\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2056\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.27.16.png\" alt=\"\" class=\"wp-image-11967\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>To configure the variation swatch you just added to a product attribute, go back to <strong>Attributes<\/strong> and select <strong>Configure terms<\/strong>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3e68a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3e68a\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.29.47.png\" alt=\"\" class=\"wp-image-11970\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Inside <strong>Configure terms<\/strong>, the configuration options you see largely depend on which variation swatch you added to the attribute. For instance, if you added color swatches to the attribute, you have the option to choose between single or dual colors and even define which colors to use.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3e9fc&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3e9fc\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.31.50.png\" alt=\"\" class=\"wp-image-11973\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Likewise, adding an image swatch to the attribute allows you to select an image in the configure terms page.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3ed7d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3ed7d\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.34.10.png\" alt=\"\" class=\"wp-image-11975\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Adding a mixed swatch to the attribute allows you to choose a subtype between color or image and configure the subtype depending on which one you choose.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3f121&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3f121\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.36.01.png\" alt=\"\" class=\"wp-image-11977\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>The button swatch is fairly straightforward, so there are no settings to configure.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"configure-variation-swatches-for-individual-products\">Configure Variation Swatches for Individual Products<\/h4>\n\n\n\n<p>The global configurations of the variation swatches may not reflect on all products because some products might not use your globally saved attributes. In that case, you need to edit individual products and add and configure the variation swatches on the product editor.<\/p>\n\n\n\n<p>Editing individual products is also useful when you want to override global settings and specify what kind of swatch you want to use for a specific product.<\/p>\n\n\n\n<p>To configure variation swatches for individual products, go to <strong>Products \u2192 All Products<\/strong> and then <strong>edit <\/strong>a product of your choice. Then scroll down to <strong>Product Data \u2192 Attributes<\/strong>, proceed to <strong>add a product attribute<\/strong>, and hit the <strong>Save<\/strong> button.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3f559&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3f559\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.39.03.png\" alt=\"\" class=\"wp-image-11981\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Next, a <strong>Swatches<\/strong> tab will appear below Attributes. In that tab, you can <strong>configure the variation swatches<\/strong> for that specific product. The configuration will override the global settings.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3f968&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3f968\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.42.48.png\" alt=\"\" class=\"wp-image-11982\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-4-variation-swatches-styling-options\">Step 4: Variation Swatches Styling Options<\/h3>\n\n\n\n<p>You can modify how the variation swatches look on the front end and on the product pages.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"general-variation-swatches-styling-options\">General Variation Swatches Styling Options<\/h4>\n\n\n\n<p>Open your site\u2019s <strong>Customizer <\/strong>and go to <strong>WooCommerce \u2192 General \u2192 Variation Swatches<\/strong>. Here, you can change the shape of the swatch from round to square and modify its size and color.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da3fdf5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da3fdf5\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.57.48.png\" alt=\"\" class=\"wp-image-11983\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"swatches-on-product-archive-pages\">Swatches on Product Archive Pages<\/h4>\n\n\n\n<p>You can also modify the look of the variation swatches on your Shop\/Store and all other product archive pages.<\/p>\n\n\n\n<p>On the Customizer, go to <strong>WooCommerce \u2192 Product Archive \u2192 Card Options <\/strong>and enable <strong>Swatches <\/strong>by clicking on the adjacent <strong>eye <\/strong>button.<\/p>\n\n\n\n<p>Expanding it gives you a few options, such as limiting the number of swatches being displayed, modifying bottom spacing, adding new custom attributes, and repositioning the variation swatch elements in the product archive pages.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da40241&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da40241\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-22.59.22.png\" alt=\"\" class=\"wp-image-11985\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>That\u2019s it. Now you know how to add variation swatches in your WooCommerce store.<\/p>\n\n\n\n<p><em>We created a mixed swatch (with colors and images) on our test site with the help of Blocksy Pro. Here\u2019s how the swatches look on our product page:<\/em><\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d312da4061a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d312da4061a\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2058\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/11\/Screenshot-2024-11-26-at-23.02.46.png\" alt=\"\" class=\"wp-image-11987\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"faq-woo-commerce-variation-swatches\">FAQ: WooCommerce Variation Swatches<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. What Are Variation in WooCommerce <strong>Swatches<\/strong>?<\/strong><\/h3>\n\n\n\n<p>Variation swatches are a visual replacement for the default dropdowns in WooCommerce product pages. They allow users to select product attributes like woocommerce color swatches, size, or texture using color blocks, images, or buttons, making the selection process more intuitive.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Why Should I Use a Swatch Plugin Instead of The Default WooCommerce Variation Options?<\/strong><\/h3>\n\n\n\n<p>The default WooCommerce interface uses dropdowns, which can be clunky and less user-friendly. Swatch plugins improve product presentation, increase conversion rates, and reduce return rates by providing clearer visual options.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Are Variation Swatch Plugins Compatible With All WooCommerce Themes?<\/strong><\/h3>\n\n\n\n<p>Not always. Some third-party swatch plugins may conflict with specific themes or page builders. However, Blocksy Pro is built for full compatibility within its ecosystem, ensuring better performance and styling control.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Can I Display Swatches on Archive And Shop Pages?<\/strong><\/h3>\n\n\n\n<p>Yes, most advanced plugins like Blocksy Pro, Plugin Republic, and RadiusTheme support displaying variation swatches on product archive and shop listing pages. This allows customers to view available variations before clicking into product detail pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. What\u2019s The Easiest Way to Add Variation Swatches to my Store?<\/strong><\/h3>\n\n\n\n<p>If you&#8217;re using the Blocksy theme, Blocksy Pro offers the simplest native solution. You just activate the module, configure global or per-product swatches, and customize their appearance directly in the WordPress Customizer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>Variation swatches are a smarter, more visual way to display product options in WooCommerce.<\/p>\n\n\n\n<p>Since WordPress does not offer a visual display of your variation products, you need a third-party plugin to add variation swatches to your products, or you can use our carefully crafted solution with the help of <a href=\"https:\/\/creativethemes.com\/blocksy\/\" target=\"_blank\" rel=\"noreferrer noopener\">Blocksy Pro<\/a>.<\/p>\n\n\n\n<p>Whether you go with a plugin like IconicWP or opt for the native solution in Blocksy Pro, adding variation swatches is one of the fastest ways to improve your WooCommerce shopping experience. If you have questions or need help choosing the right setup, drop us a comment \u2014 we\u2019d love to help.<\/p>\n\n\n\n<p>Leave us a comment below if you have any questions about Blocksy or WooCommerce variation swatches.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you looking for ways to add product variation swatches to your WooCommerce store? In WooCommerce, variable products refer to different versions of a single product that differ in attributes such as color, size, material, or style. These variations allow customers to choose the specific option that suits their needs best. Offering variable products in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11995,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[],"class_list":["post-11935","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"blocksy_meta":{"header_scripts":"<style>\nfigure > img {\nbox-shadow: 0px 0px 50px -10px rgba(0,0,0,0.1);\n}\n<\/style>","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/11935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=11935"}],"version-history":[{"count":45,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/11935\/revisions"}],"predecessor-version":[{"id":13751,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/posts\/11935\/revisions\/13751"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/11995"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=11935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/categories?post=11935"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/tags?post=11935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}