{"id":6090,"date":"2020-10-06T11:08:52","date_gmt":"2020-10-06T09:08:52","guid":{"rendered":"https:\/\/www.welaunch.io\/en\/?post_type=faq&#038;p=6090"},"modified":"2021-03-22T14:06:08","modified_gmt":"2021-03-22T13:06:08","slug":"setup-woocommerce-gallery-images","status":"publish","type":"faq","link":"https:\/\/www.welaunch.io\/en\/knowledge-base\/faq\/setup-woocommerce-gallery-images\/","title":{"rendered":"Setup WooCommerce Gallery Images"},"content":{"rendered":"<div class=\"row\"  id=\"row-710578265\">\n\n\t<div id=\"col-538636394\" class=\"col medium-7 small-12 large-7\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<p>When you have correctly installed our WooCommerce Attribute Gallery images plugin, we can start setting it up. Open up the admin panel, that you can find in WooCommerce &gt; Gallery Images. If you can not see that menu make sure our <a href=\"https:\/\/www.welaunch.io\/en\/2021\/01\/switching-from-redux-to-our-own-framework\/\" target=\"_blank\" rel=\"noopener\">weLaunch Framework plugin<\/a>\u00a0is installed! It is free.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-575570353\" class=\"col medium-4 small-12 large-4\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1443754361\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"646\" height=\"620\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/woocommerce-gallery-images-menu-item.png\" class=\"attachment-large size-large\" alt=\"woocommerce gallery images menu item\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/woocommerce-gallery-images-menu-item.png 646w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/woocommerce-gallery-images-menu-item-247x237.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/woocommerce-gallery-images-menu-item-510x489.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2021\/03\/woocommerce-gallery-images-menu-item-300x288.png 300w\" sizes=\"auto, (max-width: 646px) 100vw, 646px\" \/>\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_1443754361 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n<div class=\"row\"  id=\"row-2004239244\">\n\n\t<div id=\"col-691221131\" class=\"col small-12 large-12\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<h2>General Plugin Settings<\/h2>\n<p>In the general plugin settings of our variation additional images plugin you have can turn it on or off. Most important is, that the container selectors are 100% correct. By default you can use:<\/p>\n<ul>\n<li><strong>Image Container Selector<\/strong><br \/>\nThe main image selector (css class or id). Example: .woocommerce-product-gallery__wrapper (flatsome) OR .woocommerce-product-gallery<\/li>\n<li><strong>Gallery Images Container Selector<\/strong><br \/>\nThe gallery images selector (css class or id). Example: .product-thumbnails (flatsome) or .woocommerce-product-gallery<\/li>\n<\/ul>\n<p>If none of the above options work. You need to find the surrounding container in your theme yourself.<\/p>\n<ol>\n<li>Visit a product page on your site.<\/li>\n<li>Right click on the product image and inspect element<\/li>\n<li>You will see a div parent object of that you can use the class selector<\/li>\n<li>Repeat that for the gallery ONLY if it is not the same, if it is the same selector put them into the gallery image field also.<\/li>\n<\/ol>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1269119960\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner box-shadow-2 dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"522\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-1024x524.png\" class=\"attachment-large size-large\" alt=\"how to find the woocommerce gallery images selector\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-1024x524.png 1024w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-247x126.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-510x261.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-300x154.png 300w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector-768x393.png 768w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/how-to-find-the-woocommerce-gallery-images-selector.png 1293w\" 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_1269119960 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<p>Furthermore you can<\/p>\n<ul>\n<li><strong>Override default WooCommerce Gallery<\/strong><br \/>\nBy default our plugin only changes the gallery when a variation is selected. Enable this to always use our gallery features.<\/li>\n<li><strong>Show Variation Gallery images in Variable Product Gallery<\/strong><br \/>\nShow all variation gallery images in the default variable product image gallery.<\/li>\n<li><strong>Still show Variable Gallery Images<\/strong><br \/>\nBeside variation gallery images, still show the variable gallery images.<\/li>\n<li><strong>Show Variation Gallery images in Categories<\/strong><br \/>\nAdd support for gallery images to show in listings. You will need our Single Variations Plugin and your theme must support 2nd image in listings (e.g. Flatsome).<\/li>\n<\/ul>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_837815679\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner box-shadow-2 dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"742\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/general-variation-images-options-1024x745.png\" class=\"attachment-large size-large\" alt=\"general variation images options\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/general-variation-images-options-1024x745.png 1024w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/general-variation-images-options-247x180.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/general-variation-images-options-510x371.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/general-variation-images-options-300x218.png 300w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/general-variation-images-options-768x559.png 768w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/general-variation-images-options.png 1123w\" 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_837815679 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n\t<div id=\"gap-1726993918\" class=\"gap-element clearfix\" style=\"display:block; height:auto;\">\n\t\t\n<style>\n#gap-1726993918 {\n  padding-top: 50px;\n}\n<\/style>\n\t<\/div>\n\t\n<h2>Variation &amp; Thumbnail Image Options<\/h2>\n<p>The variation image &amp; thumbnail gallery images can have both total separate options. For example by default the variable main product has 1 column and the gallery thumbnails 4. But you can also change that to 6 columns if you want.<\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-1655253162\" class=\"col medium-6 small-12 large-6\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<ul>\n<li>Columns<\/li>\n<li>Margin Right<\/li>\n<li>Cell Align<br \/>\nAlignment of cells<\/li>\n<li>Fullscreen<br \/>\nEnables fullscreen view of carousel. Adds button to view and exit fullscreen. In fullscreen view, pressing ESC will exit fullscreen.<\/li>\n<li>Accessibility<br \/>\nEnable keyboard navigation, pressing left &amp; right keys<\/li>\n<li>Adaptive Height<br \/>\nSet carousel height to the selected slide<\/li>\n<li>Auto Play<br \/>\nadvances to the next cell<\/li>\n<li>Contain<br \/>\nWill contain cells to container so no excess scroll at beginning or end has no effect if wrap Around is enabled<\/li>\n<li>Free Scroll<br \/>\nEnables content to be freely scrolled and flicked without aligning cells<\/li>\n<\/ul>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-1770526694\" class=\"col medium-6 small-12 large-6\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n<ul>\n<li>Lazy Load<br \/>\nEnable lazy-loading images<\/li>\n<li>Percent Position<br \/>\nsets positioning in percent values, rather than pixels<\/li>\n<li>Prev \/ Next Buttons<br \/>\nCreates and enables buttons to click to previous &amp; next cells<\/li>\n<li>Page Dots<br \/>\nCreate and enable page dots<\/li>\n<li>Resize<br \/>\nListens to window resize events to adjust size &amp; positions<\/li>\n<li>Right to Left<br \/>\nEnables right-to-left layout<\/li>\n<li>Set Gallery Size<br \/>\nSets the height of gallery disable if gallery already has height set with CSS<\/li>\n<li>Watch CSS<br \/>\nWatches the content of :after of the element<\/li>\n<li>Wrap Around<br \/>\nAt end of cells, wraps-around to first for infinite scrolling<\/li>\n<\/ul>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n\n\t<div id=\"col-1261511750\" class=\"col small-12 large-12\"  >\n\t\t\t\t<div class=\"col-inner\"  >\n\t\t\t\n\t\t\t\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_129807722\">\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=\"545\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/main-image-thumbnbail-settings-1024x547.png\" class=\"attachment-large size-large\" alt=\"main image &amp; thumbnbail settings\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/main-image-thumbnbail-settings-1024x547.png 1024w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/main-image-thumbnbail-settings-247x132.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/main-image-thumbnbail-settings-510x272.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/main-image-thumbnbail-settings-300x160.png 300w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/main-image-thumbnbail-settings-768x410.png 768w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/main-image-thumbnbail-settings.png 1126w\" 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_129807722 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<h2>Styling<\/h2>\n<p>You can change some stylings, so that the gallery will better fit to your website. Changing the loading icon color, thumbnail border color or adding a fake loading time.<\/p>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1852830361\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"989\" height=\"441\" src=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/styling-options.png\" class=\"attachment-large size-large\" alt=\"variation images styling\" srcset=\"https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/styling-options.png 989w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/styling-options-247x110.png 247w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/styling-options-510x227.png 510w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/styling-options-300x134.png 300w, https:\/\/www.welaunch.io\/en\/wp-content\/uploads\/sites\/8\/2020\/10\/styling-options-768x342.png 768w\" sizes=\"auto, (max-width: 989px) 100vw, 989px\" \/>\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_1852830361 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<h2>How to add more images to Variations<\/h2>\n<p>With or plugin it is very simple to add more variation detail images. Simply open up a variable product and scroll to variations. When you open a single variation you will see on the bottom, that you can add more images. Use drag and drop to sort them or hover over them to delete. Adding a new image will use your default WP media library.<\/p>\n<p><iframe title=\"How to add more images to variations\" width=\"1020\" height=\"574\" src=\"https:\/\/www.youtube.com\/embed\/k99Z1YzIdSY?feature=oembed&#038;enablejsapi=1&#038;origin=https:\/\/www.welaunch.io\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\n\t\n<\/div>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","product_cat":[],"class_list":["post-6090","faq","type-faq","status-publish","hentry","faq_topics-gallery-images"],"_links":{"self":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/6090","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=6090"}],"version-history":[{"count":8,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/6090\/revisions"}],"predecessor-version":[{"id":8176,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/faq\/6090\/revisions\/8176"}],"wp:attachment":[{"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/media?parent=6090"}],"wp:term":[{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/www.welaunch.io\/en\/wp-json\/wp\/v2\/product_cat?post=6090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}