Variation Gallery Images for only some variations

This is based on

https://xtemos.com/forums/topic/variation-gallery

Post
#119400

I can not figure out how to respond to that post.
Elise Noromit said

Hello,

You need to add at least one image to variation gallery of each variation not to see the images from other variations.

If one variation has the gallery and others do not, images from the first one are uploaded in all the rest.

Just duplicate main variation image into the gallery as here http://prntscr.com/nd62cq

Best Regards

I have some variations with additional gallery images and some without. I found if I don’t put in gallery images in some variations, the variations without gallery images get gallery images that have nothing to do with the variation. Elise suggested duplicating the main image as the gallery image. I found a cleaner approach that allows me to have gallery images in some variations and none in others without getting the random images showing up in the variations without gallery images.

I used a 1px transparent gif. Transparent gifs were used with tables before CSS to do layout. That method is no longer recommended.
You can download one here.

https://en.wikipedia.org/wiki/File:Transparent.gif

You can also use a small transparent PNG. Add the transparent gif to your media gallery. Give it Alternate Text = ‘transparent-gif’. Use the transparent image as the gallery image on variations that have no gallery images.

I am using $(“.single_variation_wrap”).on(“show_variation”,function(){}). This triggers whenever the variation changes. If we have an image with alt = ‘transparent-gif’, I remove the image from both Owl Carousel (used for the image gallery) and Photo Swipe (used for the lightbox gallery). See woodmart functions.js. I had to use the setTimeout to get this to work. It works even with timeout 0. It does not work without the timeout, not sure why.

In your javascript file place the following:

jQuery(document).ready(function($) {

    // Fires whenever variation selects are changed
    $(".single_variation_wrap").on("show_variation", function(event, variation) {
        // Wait till gallery is created   
        setTimeout(function() {
            // hide transparent gif in gallery

            $('.product-image-thumbnail.slick-slide:has(img[alt="transparent-gif"])').remove();
            $('.woocommerce-product-gallery__wrapper div.owl-item:has(img[alt="transparent-gif"])').remove();
        }, 0);
    });
});

Please tell me if you find this useful.

Attachments:

You must be logged in to view attached files.

Found this interesting discussion about SetTimeout 0

https://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful

Hello,

Please describe YOUR problem in details I will provide the solution. Include please page URL with the problem and site admin access to the private area.

Best Regards

It’s not a problem. It’s a followup to #119400.

It’s a way to have additional product images for variations for some variations and on other variations have no additional product images and not have to duplicate an image and not have random images from other variations appear in the variation.

Hello,

We apologize for the delay in answering, but unfortunately, our option Additional Variation Gallery Images works this way and there is no way to change its behavior. We will consider adding this behavior in the future.

Kind Regards
XTemos Studio

Please read my post. I am explaining how to change the behavior.

Thank you. We will consider your suggestion in the future. At the moment, we can’t change the way it works.

This is something users can use now without changing the theme at all. I am using it.

[Author]

Posts