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' });
		}
	} );
} );

# WooCommerce, Variable Products

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

Follow me on Twitter