Woocommerce change product image and sku dynamically via jquery

README.md

Woocommerce change product image and sku dynamically via jquery

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" />