{"id":4150,"date":"2021-12-18T21:44:12","date_gmt":"2021-12-18T19:44:12","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=4150"},"modified":"2026-09-22T13:09:08","modified_gmt":"2026-09-22T10:09:08","slug":"product-variations-gallery","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/woocommerce\/product-variations-gallery\/","title":{"rendered":"Product Variations Gallery"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Starting with WooCommerce 10.9, the <strong>Product Variations Gallery<\/strong> feature is part of WooCommerce core. Blocksy fully supports this functionality and works with it out of the box.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Product Variations Gallery feature lets you assign a dedicated gallery of images to each product variation. Unlike the traditional setup, where a variation can have only a single featured image, each variation can now have its own ordered collection of images.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When a shopper selects a variation on the product page, Blocksy automatically updates the gallery to display the images assigned to that variation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From the WordPress dashboard, each variation&#8217;s featured image and gallery are managed together as a single ordered list. The first image in the list is automatically treated as the primary image for that variation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since the feature is provided by WooCommerce and supported natively by Blocksy, there is nothing additional to configure. Once available in your WooCommerce installation, it works automatically.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configuring Product Variations Gallery<\/h2>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad27f83c4812&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad27f83c4812\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"4320\" height=\"2700\" 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--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/12\/FireShot-Capture-001-Edit-product-Dolor-Magna-\u2039-Blocksy-\u2014-WordPress-blocksy.local_.png\" alt=\"\" class=\"wp-image-15178\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\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.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\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\">Configuring the Variation Gallery for a product variation.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To configure a gallery for a product variation, edit the product as you normally would and open the <strong>Variations<\/strong> tab in the <strong>Product Data<\/strong> section. Expand the variation you want to configure, then locate the <strong>Variation Gallery<\/strong> section and click <strong>Manage<\/strong> to select the images you want to use.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can arrange the images in the desired order, with the first image automatically becoming the primary image for the variation.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ad27f83c50b6&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ad27f83c50b6\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"4320\" height=\"2700\" 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--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2021\/12\/FireShot-Capture-002-Dolor-Magna-\u2013-Blocksy-blocksy.local_.png\" alt=\"\" class=\"wp-image-15179\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\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.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\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\">Displaying the Variation Gallery on the front end when a product variation is selected.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once the images have been assigned, they will automatically be displayed on the front end whenever the corresponding variation is selected.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Starting with WooCommerce 10.9, the Product Variations Gallery feature is part of WooCommerce core. Blocksy fully supports this functionality and works with it out of the box. The Product Variations Gallery feature lets you assign a dedicated gallery of images to each product variation. Unlike the traditional setup, where a variation can have only a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4152,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[117],"class_list":["post-4150","documentation","type-documentation","status-publish","has-post-thumbnail","hentry","doc_categories-woocommerce"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/4150","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=4150"}],"version-history":[{"count":5,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/4150\/revisions"}],"predecessor-version":[{"id":15180,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/4150\/revisions\/15180"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/4152"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=4150"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=4150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}