{"id":506,"date":"2020-06-18T10:26:13","date_gmt":"2020-06-18T10:26:13","guid":{"rendered":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/?page_id=506"},"modified":"2020-06-18T10:26:13","modified_gmt":"2020-06-18T10:26:13","slug":"change-product-image-based-on-select-attribute","status":"publish","type":"page","link":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/change-product-image-based-on-select-attribute\/","title":{"rendered":"Change Product Image Based On Select Attribute"},"content":{"rendered":"<p>Generally, WooCommerce variation gallery images get changed when all it\u2019s attribute variations are matched. With this feature, the variation gallery can be changed selecting single attribute variation like Amazon and AliExpress.<\/p>\r\n<p style=\"text-align: center;\"><a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/04\/swatches-color-change.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4504\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/04\/swatches-color-change.gif\" alt=\"\" width=\"750\" height=\"420\" \/><\/a> <strong>Preview Images<\/strong><\/p>\r\n<div class=\"wp-block-buttons aligncenter\">\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/product\/nike-react-vision\/\" target=\"_blank\" rel=\"noreferrer noopener\">Live Demo<\/a><\/div>\r\n\r\n\r\n\r\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background has-vivid-red-background-color\" href=\"https:\/\/bit.ly\/unlock-all-features-color-swatches-catalog\" target=\"_blank\" rel=\"noreferrer noopener\">Unlock Premium Features<\/a><\/div>\r\n<\/div>\r\n<p><br \/><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/31WR96-9kuQ?rel=0\" width=\"1080\" height=\"420\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\r\n<p style=\"text-align: center;\"><strong>Video Tutorial<\/strong><\/p>\r\n<h4>Step 01: Plugin Installation<\/h4>\r\n<p>It&#8217;s the premium feature WooCommerce Variation Swatches plugin. Make sure you have WooCommerce Variation Swatches Pro plugin besides the free version.<\/p>\r\n<p style=\"text-align: center;\">[button style=&#8221;rounded-btn&#8221; text=&#8221;Live Demo&#8221; button_link=&#8221;http:\/\/bit.ly\/change-gallery-image-on-single-attribute-demo-doc&#8221; link_target=&#8221;_blank&#8221; type=&#8221;medium-btn&#8221; bg_color=&#8221;#333333&#8243; text_color=&#8221;#FFFFFF&#8221;] [button style=&#8221;rounded-btn&#8221; text=&#8221;Upgrade to Premium Version&#8221; button_link=&#8221;http:\/\/bit.ly\/change-gallery-image-on-single-attribute-pro-doc&#8221; link_target=&#8221;_blank&#8221; type=&#8221;medium-btn&#8221; bg_color=&#8221;#56bfd4&#8243; text_color=&#8221;#FFFFFF&#8221;]<\/p>\r\n<h4><strong>Step 02: Configure Global Settings<\/strong><\/h4>\r\n<p>To enable global settings for changing variation image gallery based on only selected variation, head to the <strong>Special Attribute &gt;&gt; Single Variation Image Preview<\/strong> from <strong>Swatches Settings<\/strong>. Enable <strong>Variation Image preview<\/strong> settings and select your desired variation from <strong>Choose attribute <\/strong>settings. The variation you select from here, will change variation gallery image without selecting other attribute variations. <a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/09\/doc-image-01.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-4556\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/09\/doc-image-01-1024x400.png\" alt=\"Change Image Like Amazon Product Gallery\" width=\"1024\" height=\"400\" \/><\/a><\/p>\r\n<h4><strong>Step 02.01: Arrange Attribute Variations\u00a0<\/strong><\/h4>\r\n<p>To enable settings, check the following screenshot to set product attribute variation. As I select <strong>Color<\/strong> variation globally,\u00a0 color variations have been set individually and left other variation to <strong>Any<\/strong>. <a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/09\/doc-image-02.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-4557\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/09\/doc-image-02-1024x397.png\" alt=\"Change Image Like Amazon Product Gallery\" width=\"1024\" height=\"397\" \/><\/a><\/p>\r\n<h4><strong>Step 03: Individual Product Settings<\/strong><\/h4>\r\n<p>If your globally selected variation is connect with your entire store variable product. you may not need this option. You may need the following option in the given situation. <strong>Some products may not have the attribute connected with that you would select globally<\/strong>. Or <strong>For some product you want to change product gallery based other attribute without following global settings<\/strong>. In this case this settings would be helpful. Get to the product edit mode and head into <strong>Swatches Settings.\u00a0\u00a0<\/strong>Select your desired attribute(<strong>Not Globally Selected<\/strong>) from\u00a0<strong>Single variation preview attribute.\u00a0\u00a0<\/strong>In the screenshot, I&#8217;ve added not globally selected <strong>Image<\/strong> Attribute. <a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/09\/doc-image-03.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-4558\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/09\/doc-image-03-1024x305.png\" alt=\"Change Image Like Amazon Product Gallery\" width=\"1024\" height=\"305\" \/><\/a><\/p>\r\n<h4>Step 03.01: Arrange Attribute Variations<\/h4>\r\n<p>To enable settings, check the following screenshot to set product attribute variation. As I select <strong>Image<\/strong> variation,\u00a0 image variations have been set individually and left other variation to <strong>Any<\/strong>. <a href=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/09\/doc-image-04.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-4559\" src=\"https:\/\/getwooplugins.com\/wp-content\/uploads\/2018\/09\/doc-image-04-1024x309.png\" alt=\"\" width=\"1024\" height=\"309\" \/><\/a> \u00a0<\/p>","protected":false},"excerpt":{"rendered":"<p>Generally, WooCommerce variation gallery images get changed when all it\u2019s attribute variations are matched. With this feature, the variation gallery can be changed selecting single attribute variation like Amazon and AliExpress. Preview Images Video Tutorial Step 01: Plugin Installation It&#8217;s the premium feature WooCommerce Variation Swatches plugin. Make sure you have WooCommerce Variation Swatches Pro &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/change-product-image-based-on-select-attribute\/\"> <span class=\"screen-reader-text\">Change Product Image Based On Select Attribute<\/span> Read More &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/pages\/506"}],"collection":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/comments?post=506"}],"version-history":[{"count":1,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/pages\/506\/revisions"}],"predecessor-version":[{"id":507,"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/pages\/506\/revisions\/507"}],"wp:attachment":[{"href":"https:\/\/demo.getwooplugins.com\/woocommerce-variation-swatches\/wp-json\/wp\/v2\/media?parent=506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}