functions.php
<?php
add_action( 'woocommerce_before_add_to_cart_quantity', 'gdb_display_dropdown_variation_add_cart' );
function gdb_display_dropdown_variation_add_cart() {
global $product;
$attachment_ids = $product->get_gallery_image_ids();
$img_gallery = '';
// if ($attachment_ids){
// foreach( $attachment_ids as $attachment_id ) {
// $image_link = wp_get_attachment_url( $attachment_id );
// $img_gallery .= '<li><img src="'.$image_link.'" /></li>';
// }
// }
if ( $product->is_type('variable') ) {
?>
<script>
function change_image_sku(value){
// var img_html = '<?php echo $img_gallery; ?>';
var image_to_show = '';
var sku = '';
if(value!=null && value!='0' && value!="undefiend" && value!=""){
var variations = JSON.parse($(".variations_form").attr("data-product_variations"));
// console.log(variations);
if(variations) {
found = false;
for(const i in variations) {
if(found) continue;
// if first attribute has the same value as has been selected
if (value == variations[i].variation_id) {
// change featured image
image_to_show = variations[i].image.url;
sku = variations[i].sku;
// console.log(image_to_show);
$(".sku").html(sku);
$(".exzoom_preview_img").attr("src", image_to_show); //change the class as yours
// below two lines are for my theme, you can avoid
$(".exzoom_img_ul").html('<li style="width: 540px;"><img src="'+image_to_show+'" style="margin-top: 0px; width: 540px;"></li>');
$(".exzoom_nav_inner").html('<span class="" style="margin-left: 7px; width: 60px; height: 60px;"><img src="'+image_to_show+'" width="60" style="top:18.77245508982036px;"></span>');
found = true;
}
}
}
}
}
</script>
<?php
}
}
?>
woocommerce/single-product/add-to-cart/variation-add-to-cart-button.php
<input type="hidden" name="variation_id" onchange="change_image_sku(this.value)" class="variation_id" value="0" />