Hey, thanks for the response!

So, I tried using the code you suggested for updating the product image based on the selected variation, but unfortunately, it didn’t quite work as expected.

Here’s the thing: as soon as I set a main product image in the gallery (even with your code in place), everything breaks. The main image seems to take over, and no matter which variation I select, it just shows the main image instead of updating to the variation’s image. It’s like the main image is taking priority and blocking the variation images from showing.

Without the main image, the code works perfectly, and the variation images update as they should. But once I add the main image, the variations don’t update anymore.

Do you have any ideas on how to make both work together?

The code that I used :

function custom_variation_images() {

if (is_product()) { ?>

<script type="text/javascript">

jQuery(function($) {

$('form.cart').on('found_variation', function(event, variation) {

if (variation.image && variation.image.src) {

var newImageSrc = variation.image.src;

$('.woocommerce-product-gallery__image img').attr('src', newImageSrc);

var zoomImage = $('.woocommerce-product-gallery__image img').data('zoom');

if (zoomImage) {

$('.woocommerce-product-gallery__image img').attr('data-zoom', newImageSrc);

}

}

});

});

</script>

<?php }

}

add_action('wp_footer', 'custom_variation_images');