How to change Woocommerce Variation Image on selection - php

Question

I'm trying to change the product thumbnail on my Woocommerce website when a variation is selected. I know this has to be done with JS/jQuery but this is not my main skill, so I hope some of you can help me further.
For changing the SKU I found the mix between PHP and JS as below:
<?php
add_action( 'custom_right_side_product_summary', 'wc_product_variable_sku', 45 );
function wc_product_variable_sku() {
global $product;
// $product->is_type( $type ) checks the product type, string/array $type ( 'simple', 'grouped', 'variable', 'external' ), returns boolean
if ( $product->is_type( 'variable' ) ) {
?>
<script type="text/javascript">
jQuery( function($){
$('form.variations_form').on('show_variation', function( event, data ){
$( 'div.widget' ).attr( 'sp-sku', data.sku );
// For testing
//console.log( 'Variation Id: ' + data.variation_id + ' | Sku: ' + data.sku );
//To Show
//document.querySelector(".sku").textContent="NEW SKU: " + data.sku;
document.querySelector(".sku").textContent=data.sku;
});
$('form.variations_form').on('hide_variation', function(){
$( 'div.widget' ).attr( 'sp-sku', '' );
});
});
</script>
<?php
}
}
Now I want to modify this so when a variation is selected the src of the product thumbnail will be replaced. This should make sure the image will be changed. I got the code like below but this is not working yet:
<?php
// ADD SUPPORT FOR VARIABLE IMAGE DISPLAY
add_action( 'custom_left_side_image', 'wc_product_variable_image', 45 );
function wc_product_variable_image() {
global $product;
// $product->is_type( $type ) checks the product type, string/array $type ( 'simple', 'grouped', 'variable', 'external' ), returns boolean
if ( $product->is_type( 'variable' ) ) {
?>
<script type="text/javascript">
jQuery( function($){
$('form.variations_form').on('show_variation', function( event, data ){
$( 'div.widget' ).attr( 'thumb_src', data.image );
// For testing
console.log( 'Variation Id: ' + data.variation_id + ' | Variation Image URL: ' + data.image );
//To Show
document.querySelector(".zoomImg").src="data.image";
});
$('form.variations_form').on('hide_variation', function(){
$( 'div.widget' ).attr( 'thumb_src', '' );
});
});
</script>
<?php
}
}
Something is going wrong, but don't know what. I think the problem is the way I call for an URL but can't find anywhere what another option is. Hope someone can help me solve this.