{"id":1739,"date":"2024-09-26T13:44:50","date_gmt":"2024-09-26T13:44:50","guid":{"rendered":"http:\/\/docs"},"modified":"2024-09-26T13:44:50","modified_gmt":"2024-09-26T13:44:50","password":"","slug":"support-of-the-woocommerce-additional-variation-images-plugin","status":"publish","type":"docs","link":"https:\/\/www.8theme.com\/documentation\/xstore\/additional-customisation\/support-of-the-woocommerce-additional-variation-images-plugin\/","title":{"rendered":"Support of the WooCommerce Additional Variation Images plugin"},"content":{"rendered":"<p>To make theme compatible with the <a href=\"https:\/\/woocommerce.com\/products\/woocommerce-additional-variation-images\/\" target=\"_blank\" rel=\"noopener\">WooCommerce Additional Variation Images<\/a> plugin add the following code in child theme <code class=\"inline-code\">functions.php<\/code>:<\/p>\n<pre>add_action(&#39;after_setup_theme&#39;, &#39;etheme_wc_image_slider_support&#39;, 2);\n    function etheme_wc_image_slider_support () {\n        add_theme_support( &#39;wc-product-gallery-slider&#39; );\n    }\n<\/pre>\n<p>The following code to child theme <code class=\"inline-code\">style.css<\/code>  file:<\/p>\n<pre>.woocommerce-product-gallery .woocommerce-product-gallery__trigger {\n    position: absolute;\n    z-index: 9;\n    right: 25px;\n    top: 10px;\n}\n.woocommerce-product-gallery .woocommerce-product-gallery__trigger img {\n    height: 1.5em !important;\n    width: 1.5em!important;\n}\n<\/pre>\n<p>After that copy <code class=\"inline-code\">woocommerce\/templates\/single-product\/product-thumbnails.php<\/code>  and <code class=\"inline-code\">woocommerce\/templates\/single-product\/product-image.php<\/code>  files from the WooCommerce plugin directory to <code class=\"inline-code\">xstore-child\/woocommerce\/single-product<\/code>  .<\/p>\n<p><strong>OR<\/strong> do not use this additional plugin, but activate our variation gallery: <b>Theme Options &gt; WooCommerce &gt; Single product page or Single Product Builder &gt; Variation gallery<\/b>. After that edit product and add the gallery images for your variations like here:<\/p>\n<p><img decoding=\"async\"  src=\"https:\/\/s3.amazonaws.com\/helpscout.net\/docs\/assets\/5809d09590336070ba24798e\/images\/65ae6f0dc231e622d44b39f8\/file-UohtFKwfbO.png\" style=\"width: 100%; max-width: 100%; \" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>To make theme compatible with the WooCommerce Additional Variation Images plugin add the following code in child theme functions.php: add_action(&#39;after_setup_theme&#39;, &#39;etheme_wc_image_slider_support&#39;, 2); function etheme_wc_image_slider_support () { add_theme_support( &#39;wc-product-gallery-slider&#39; ); } The following code to child theme style.css file: .woocommerce-product-gallery .woocommerce-product-gallery__trigger { position: absolute; z-index: 9; right: 25px; top: 10px; } .woocommerce-product-gallery .woocommerce-product-gallery__trigger img { height: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"doc_category":[42],"doc_tag":[],"class_list":["post-1739","docs","type-docs","status-publish","hentry","doc_category-additional-customisation"],"aioseo_notices":[],"year_month":"2026-04","word_count":134,"total_views":"3676","reactions":{"happy":"1","normal":"0","sad":"0"},"author_info":{"author_nicename":"docs","author_url":"https:\/\/www.8theme.com\/documentation\/author\/docs\/"},"doc_category_info":[{"term_name":"Additional Customization","term_url":"https:\/\/www.8theme.com\/documentation\/xstore\/additional-customisation\/"}],"doc_tag_info":[],"author_list":[{"ID":"1","user_login":"docs","display_name":"docs","id":"1"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/docs\/1739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/comments?post=1739"}],"version-history":[{"count":0,"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/docs\/1739\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/media?parent=1739"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/doc_category?post=1739"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.8theme.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=1739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}