WooCommerce: Switch Image Background On Color Variation Selection

/**
 * @snippet       Switch Image Background @ WooCommerce Single Variable Product
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 4.0
 * @donate $9     https://tutoraspire.com
 */

add_action( 'woocommerce_after_variations_form', 'tutoraspire_switch_image_background_variable_colors' );

function tutoraspire_switch_image_background_variable_colors() {

wc_enqueue_js( "

$('input.variation_id').change(function(){
if('' != $('input.variation_id').val()) {
if($('#pa_color').val() =='red'){
$('.woocommerce-product-gallery figure').css('background-color', 'red');
} else if($('#pa_color').val() =='yellow'){
$('.woocommerce-product-gallery figure').css('background-color', 'yellow');
} 
} else {
$('.woocommerce-product-gallery figure').css('background-color', 'transparent');
}
});

");

}