Variation Change JavaScript Events
Sometimes you need to do some stuff when your WooCommerce product variation has been changed. Maybe only for a specific variation.
Primarily there are two JavaScript events that are triggered after a variation change.
show_variation
event is fired when all the required attributes are selected and a final variation is shown.
$( '.single_variation_wrap' ).on( 'show_variation', function( event, variation ) {
console.log( variation );
});
woocommerce_variation_select_change
is fired whenever variation selects has been changed.
$( '.variations_form' ).on( 'woocommerce_variation_select_change', function() {
});
In case of using the first event, you have the complete variation object available inside variation
variable. For example quite useful properties could be variation.variation_id
, variation.attributes.attribute_pa_{SLUG}
, variation.display_price
, variation.image.src
and so on. Or just check your browser console:

And yes, do not forget to use your codes inside jQuery( function( $ ) { ... } )
.
Ok, let’s take a look at the example. My idea is to change the product title color depending on a variation selected. Like this:

jQuery( function( $ ) {
$( '.single_variation_wrap' ).on( 'show_variation', function( event, variation ) {
if( 'green' === variation.attributes.attribute_pa_color ) {
$( 'h1.product_title' ).css( { color : '#94c8b7' });
}
if( 'red' === variation.attributes.attribute_pa_color ) {
$( 'h1.product_title' ).css( { color : '#eb846f' });
}
if( 'blue' === variation.attributes.attribute_pa_color ) {
$( 'h1.product_title' ).css( { color : '#9cc2d1' });
}
} );
} );

Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Thank you for sharing, this is perfect.