{"id":9821,"date":"2024-02-27T13:41:23","date_gmt":"2024-02-27T11:41:23","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=9821"},"modified":"2025-09-10T17:31:28","modified_gmt":"2025-09-10T14:31:28","slug":"variation-swatches","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/woocommerce\/variation-swatches\/","title":{"rendered":"Variation Swatches"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/02\/Screen-Recording-2024-02-27-at-13.53.02.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Turning on the <strong>Variation Swatches<\/strong> module.<\/figcaption><\/figure>\n\n\n\n<p>Blocksy Pro, paired with the&nbsp;<strong>Shop Extra<\/strong>&nbsp;extension, unlocks the&nbsp;<strong>Variation Swatches<\/strong>&nbsp;module &#8211; a visual upgrade to WooCommerce product variations. Instead of the default dropdown selector, you can show variations as swatches:&nbsp;<strong>buttons, colours, images, or a mix<\/strong>&nbsp;of images and colours.<\/p>\n\n\n\n<p>This makes the shopping experience more intuitive and visually engaging, helping your visitors pick the version of a product that best suits their needs at a glance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Activating the Module<\/h2>\n\n\n\n<p>To enable the&nbsp;<strong>Variation Swatches<\/strong>&nbsp;module:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open your&nbsp;<strong>WordPress dashboard<\/strong>.<\/li>\n\n\n\n<li>Click on&nbsp;<strong>Blocksy<\/strong>&nbsp;from the sidebar.<\/li>\n\n\n\n<li>Navigate to the&nbsp;<strong>Extensions<\/strong>&nbsp;tab.<\/li>\n\n\n\n<li>Find the&nbsp;<strong>Shop Extra<\/strong>&nbsp;extension.<\/li>\n\n\n\n<li>Locate&nbsp;<strong>Variation Swatches<\/strong>&nbsp;and toggle it&nbsp;<strong>on<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Additional Configuration<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/Screen-Recording-2024-04-12-at-19.27.06.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Configuring product attributes<\/figcaption><\/figure>\n\n\n\n<p>The module introduces several swatch types you can apply to your product attributes. You can assign these styles globally or customise them for each product individually.<\/p>\n\n\n\n<p>Here are the available types:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Button<\/strong>&nbsp;\u2013 Shows variation options as clickable buttons.<\/li>\n\n\n\n<li><strong>Colour<\/strong>&nbsp;\u2013 Perfect for products available in different colours.<\/li>\n\n\n\n<li><strong>Image<\/strong>&nbsp;\u2013 Ideal for variations that use patterns, textures, or product-specific designs.<\/li>\n\n\n\n<li><strong>Mixed<\/strong>&nbsp;\u2013 Combines colour and image swatches for added flexibility.<\/li>\n\n\n\n<li><strong>Select<\/strong>&nbsp;\u2013 Retains the default WooCommerce dropdown style.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Colour Variation Swatches<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/Screen-Recording-2024-04-11-at-16.22.25.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Configuring colour variation swatches.<\/figcaption><\/figure>\n\n\n\n<p>If your products vary by colour, you can assign a&nbsp;<strong>visual colour indicator<\/strong>&nbsp;to each variation. Go to the&nbsp;<strong>Products \u2192 Attributes \u2192 Configure Terms<\/strong>&nbsp;section in your dashboard. From there, choose the \u201cColour\u201d type and use the built-in colour picker to assign a shade to each variation.<\/p>\n\n\n\n<p>You can also set&nbsp;<strong>dual colour swatches<\/strong>, useful for multi-coloured products like shoes or clothing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Image Variation Swatches<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted preload=\"auto\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/02\/Screen-Recording-2024-02-27-at-14.38.22.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Configuring <strong>Image<\/strong> variation swatches.<\/figcaption><\/figure>\n\n\n\n<p>If a product comes in different&nbsp;<strong>styles or designs<\/strong>, the \u201cImage\u201d swatch type is the way to go. Head to the&nbsp;<strong>Configure Terms<\/strong> section, and instead of a colour, upload an image that represents each variation. This gives users a clearer sense of what they\u2019re selecting.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mixed Variation Swatches<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/Screen-Recording-2024-04-12-at-19.32.16.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Configuring <strong>Mixed<\/strong> variation swatches.<\/figcaption><\/figure>\n\n\n\n<p>Sometimes, a single visual indicator isn\u2019t enough. The \u201cMixed\u201d swatch type blends both&nbsp;<strong>colour and image<\/strong>&nbsp;in one layout, giving you the flexibility to create a more dynamic display for your product options.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tooltip Options<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/Screen-Recording-2024-04-12-at-19.37.16.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Tooltip options in action.<\/figcaption><\/figure>\n\n\n\n<p>On the front end, each variation swatch can display a&nbsp;<strong>tooltip<\/strong>&nbsp;when hovered over. This helps visitors better understand what each swatch represents &#8211; especially useful when swatches look similar.<\/p>\n\n\n\n<p>You can control how the tooltip behaves using the following options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>None<\/strong>&nbsp;\u2013 Disables the tooltip entirely.<\/li>\n\n\n\n<li><strong>Text<\/strong>&nbsp;\u2013 Displays a small text bubble. You can use plain text or dynamic placeholders like&nbsp;<code>{term_name}<\/code>&nbsp;to automatically insert the variation name.<\/li>\n\n\n\n<li><strong>Image<\/strong>&nbsp;\u2013 Replaces the text with an image, ideal for visually distinguishing swatches in more detail.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/Screen-Recording-2024-04-12-at-19.41.38.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Tooltip types in action.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Swatches Look and Feel Options<\/h3>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2064\" style=\"aspect-ratio: 3456 \/ 2064;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/02\/Screen-Recording-2025-07-04-at-13.44.00.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Customising the look and feel of variation swatches.<\/figcaption><\/figure>\n\n\n\n<p>For further personalisation, head over to the&nbsp;<strong>Customiser \u2192 WooCommerce General \u2192 Variation Swatches<\/strong>&nbsp;panel. Here, you\u2019ll find options for setting the available swatch types &#8211; including&nbsp;<strong>Colour<\/strong>,&nbsp;<strong>Image<\/strong>,&nbsp;<strong>Button<\/strong>, and&nbsp;<strong>Mixed<\/strong>&nbsp;&#8211; allowing you to tailor the selection experience to best fit your store\u2019s needs.<\/p>\n\n\n\n<p>From here, you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Adjust the size<\/strong>&nbsp;of each swatch to better match your design and product presentation needs.<\/li>\n\n\n\n<li><strong>Change the shape<\/strong>&nbsp;of the swatches &#8211; choose between&nbsp;<strong>round<\/strong>&nbsp;or&nbsp;<strong>square<\/strong>&nbsp;styles.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Limiting Swatches<\/h3>\n\n\n\n<p>You can choose to limit how many variation swatches are shown by default when a page loads. This helps keep things tidy, especially when there are many options. An additional toggle will appear, allowing users to reveal the rest on demand.<\/p>\n\n\n\n<p>This feature works on both product archive and single product pages. You\u2019ll find the option under&nbsp;<strong>Customiser \u2192 WooCommerce General \u2192 Variation Swatches<\/strong>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e1aaf0b7be3&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e1aaf0b7be3\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2064\" 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\/02\/Screenshot-2025-06-27-at-15.10.52.png\" alt=\"\" class=\"wp-image-13567\" \/><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><figcaption class=\"wp-element-caption\">Limiting Variation Swatches on the single product page.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Bonus Features<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Automatically inherit the variation image<\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e1aaf0b80df&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e1aaf0b80df\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"1800\" 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\/02\/FireShot-Capture-008-Customize_-Quis-Eleifend-\u2013-Blocksy-blocksy.local_.png\" alt=\"\" class=\"wp-image-14201\" \/><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><figcaption class=\"wp-element-caption\">&#8220;Use Variation Image&#8221; option.<\/figcaption><\/figure>\n\n\n\n<p>If an attribute term doesn\u2019t have an image assigned to it, the&nbsp;<strong>Variation Swatches<\/strong>&nbsp;module can automatically inherit the image from the product variation instead of leaving the swatch blank. This ensures your product options always look complete and consistent.<\/p>\n\n\n\n<p>This setting applies only to&nbsp;<strong>image swatch types<\/strong>&nbsp;and can be found in: <strong>Customiser \u2192 WooCommerce General \u2192 Variation Swatches \u2192 Image Swatches<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Get unique shareable URLs with variations pre-selected<\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e1aaf0b851d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e1aaf0b851d\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2064\" 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\/02\/Screenshot-2025-07-04-at-13.45.48.png\" alt=\"\" class=\"wp-image-13632\" \/><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><figcaption class=\"wp-element-caption\">Generating shareable URLs with variations pre-selected.<\/figcaption><\/figure>\n\n\n\n<p>At the bottom of the&nbsp;<strong>Variation Swatches<\/strong>&nbsp;panel in the Customiser, you\u2019ll find an option to enable&nbsp;<strong>shareable URLs<\/strong>&nbsp;for product variations.<\/p>\n\n\n\n<p>When this feature is turned on, the URL of the product page will automatically update to reflect the selected variation. This makes it easy to&nbsp;<strong>share direct links<\/strong>&nbsp;to specific product variations &#8211; perfect for social media, email, or messaging apps.<\/p>\n\n\n\n<p>For example, a URL might look like this: &#8211; <code>http:\/\/blocksy.local\/product\/quis-eleifend\/?attribute_pa_skin-condition=damaged<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Out of Stock Swatch Design Type<\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e1aaf0b89b4&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e1aaf0b89b4\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"3456\" height=\"2064\" 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\/02\/Screenshot-2025-07-04-at-13.47.13.png\" alt=\"\" class=\"wp-image-13633\" \/><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><figcaption class=\"wp-element-caption\">Out of Stock Swatches &#8220;Crossed&#8221; Style.<\/figcaption><\/figure>\n\n\n\n<p>You can choose how out-of-stock variation swatches are displayed to your visitors. Two design options are available:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Faded<\/strong>&nbsp;\u2014 lowers the opacity of the swatch, giving it a dimmed appearance.<\/li>\n\n\n\n<li><strong>Crossed<\/strong>&nbsp;\u2014 adds a red cross overlay to clearly indicate that the variation is unavailable.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Independently Configured Swatches per Product<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/04\/Screen-Recording-2024-04-12-at-20.04.10.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Override each product&#8217;s variation swatch types<\/figcaption><\/figure>\n\n\n\n<p>For extra flexibility, Blocksy lets you override the default variation swatches defined in your attributes &#8211; on a per-product basis. This is useful when you want to customise the look of specific products without affecting the global setup.<\/p>\n\n\n\n<p>For example, you might use colour swatches across most of your clothing items. But for a limited edition product, you could switch to image swatches to better highlight unique patterns or textures.<\/p>\n\n\n\n<p>To access this feature, open the product editor and scroll to the&nbsp;<strong>Product Data<\/strong>&nbsp;section. On the left side, you\u2019ll see a new&nbsp;<strong>Swatches<\/strong>&nbsp;tab. From here, you can adjust how the attribute terms are displayed just for that product, giving you full control over its visual presentation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Quick Demo<\/h2>\n\n\n\n<p>Experience the transformative impact of &#8220;Variation Swatches&#8221; firsthand! Explore this sample showcasing various product variations equipped with different swatch types. Notice how each product leverages a unique approach.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2056\" style=\"aspect-ratio: 3456 \/ 2056;\" width=\"3456\" autoplay loop muted src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2024\/02\/Screen-Recording-2024-02-27-at-14.46.47.mov\" playsinline><\/video><figcaption class=\"wp-element-caption\">Different <strong>Variation Swatches<\/strong> in action.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Blocksy Pro, paired with the&nbsp;Shop Extra&nbsp;extension, unlocks the&nbsp;Variation Swatches&nbsp;module &#8211; a visual upgrade to WooCommerce product variations. Instead of the default dropdown selector, you can show variations as swatches:&nbsp;buttons, colours, images, or a mix&nbsp;of images and colours. This makes the shopping experience more intuitive and visually engaging, helping your visitors pick the version of a [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[117],"class_list":["post-9821","documentation","type-documentation","status-publish","hentry","doc_categories-woocommerce"],"blocksy_meta":{"docs_item_badge":"PRO","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/9821","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=9821"}],"version-history":[{"count":42,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/9821\/revisions"}],"predecessor-version":[{"id":14204,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/9821\/revisions\/14204"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=9821"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=9821"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}