{"id":6112,"date":"2020-10-07T08:24:59","date_gmt":"2020-10-07T06:24:59","guid":{"rendered":"https:\/\/www.welaunch.io\/en\/?post_type=faq&#038;p=6112"},"modified":"2020-10-07T08:32:17","modified_gmt":"2020-10-07T06:32:17","slug":"show-second-variation-image-on-hover-woocommerce","status":"publish","type":"faq","link":"https:\/\/www.welaunch.io\/en\/knowledge-base\/faq\/show-second-variation-image-on-hover-woocommerce\/","title":{"rendered":"How to show the second variation image on hover WooCommerce"},"content":{"rendered":"<p>By default WooCommerce does not display single variations in the shop loop. Woo also does not allow to add additional variation images. That is why you will need two plugins<\/p>\n<ol>\n<li><a href=\"https:\/\/www.welaunch.io\/en\/product\/woocommerce-single-variations\/\">Plugin to show single variations in your shop<\/a><\/li>\n<li><a href=\"https:\/\/www.welaunch.io\/en\/product\/woocommerce-variation-gallery-images\/\">Additional Variation Images Plugin<\/a><\/li>\n<\/ol>\n<p>After you have installed both plugins you need to configure them. Go into a variable product, scroll to variations and add the bottom you can add variation images.<\/p>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1315519795\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"611\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/add-additional-variation-images-1024x613.png\" class=\"attachment-large size-large\" alt=\"add additional variation images\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/add-additional-variation-images-1024x613.png 1024w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/add-additional-variation-images-247x148.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/add-additional-variation-images-510x306.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/add-additional-variation-images-300x180.png 300w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/add-additional-variation-images-768x460.png 768w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/add-additional-variation-images-1536x920.png 1536w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/add-additional-variation-images-2048x1227.png 2048w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_1315519795 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n\t<div id=\"gap-1267906159\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1267906159 {\n  padding-top: 50px;\n}\n<\/style>\n\t<\/div>\n\t\n<p>You can check that everything works, when you now open this variable product and select the red tshirt variation.<\/p>\n<p>To show single variations, go to WooCommerce &gt; Single Variations and make sure you click on &#8220;init variations&#8221;-Button. After that you can go into your shop loop. 90% of all themes support to show the 2nd image on hover (e.g. Flatsome). You can now hover over your product and see the 2nd variation gallery image.<\/p>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1872091804\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"403\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/2nd-variation-image-in-woocommerce-shop-loop-1024x405.png\" class=\"attachment-large size-large\" alt=\"2nd variation image in woocommerce shop loop\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/2nd-variation-image-in-woocommerce-shop-loop-1024x405.png 1024w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/2nd-variation-image-in-woocommerce-shop-loop-247x98.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/2nd-variation-image-in-woocommerce-shop-loop-510x202.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/2nd-variation-image-in-woocommerce-shop-loop-300x119.png 300w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/2nd-variation-image-in-woocommerce-shop-loop-768x304.png 768w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/2nd-variation-image-in-woocommerce-shop-loop-1536x608.png 1536w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/2nd-variation-image-in-woocommerce-shop-loop-2048x811.png 2048w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style>\n#image_1872091804 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","product_cat":[],"class_list":["post-6112","faq","type-faq","status-publish","hentry","faq_topics-single-variations-faq","faq_topics-gallery-images"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/6112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq"}],"about":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/types\/faq"}],"author":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/comments?post=6112"}],"version-history":[{"count":2,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/6112\/revisions"}],"predecessor-version":[{"id":6116,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/6112\/revisions\/6116"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/media?parent=6112"}],"wp:term":[{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/product_cat?post=6112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}