Variations JavaScript Events in WooCommerce

Sometimes, when we work with WooCommerce product variations, we need to trigger some custom code when variations are changed, reset, or else.

There are multiple JavaScript events for variations that we can use for our purposes and I will describe each one of them with examples in this tutorial.

JavaScript Events

First things first, let’s take a look at the table below:

All these events can be connected to the form.variations_form selector, however, let’s take a closer look at each one of them separately.

wc_variation_form

You can use this event on the initial page load. For example, using the code below, we can print all the available variations in the browser console.

$( 'form.variations_form' ).on( 'wc_variation_form', function() {
	console.log( 'wc_variation_form' )
	console.log( $(this).data( 'product_variations' ) )
} )

woocommerce_variation_select_change

This JavaScript event is triggered right after you change the value of an attribute <select> field.

$( 'form.variations_form' ).on( 'woocommerce_variation_select_change', function() {
	console.log( 'woocommerce_variation_select_change' )
} )

woocommerce_update_variation_values

This event is triggered every time you change a product attribute, and also on the initial page load.

$( 'form.variations_form' ).on( 'woocommerce_update_variation_values', function() {
	console.log( 'woocommerce_update_variation_values' )
} )

woocommerce_variation_has_changed

This event is similar, but it is triggered right after the woocommerce_update_variation_values event, plus it is not triggered on the initial page load.

$( 'form.variations_form' ).on( 'woocommerce_variation_has_changed', function() {
	console.log( 'woocommerce_variation_has_changed' )
} )

show_variation

The show_variation event is fired when all the required attributes are selected and a final variation is displayed.

$( 'form.variations_form' ).on( 'show_variation', function( event, variation ) {
	console.log( 'show_variation' )
	console.log( variation )
} )

When using this event, you have a variation object available inside the variation variable.

For example, quite useful properties could be variation_id, attributes.attribute_{SLUG}, display_price, image.src, and so on. Just check the browser console:

hide_variation

This event is triggered every time each variation (not an attribute) is unselected except in cases when the show_variation event is triggered.

So, it is kind of the opposite of the show_variation event – when show_variation is not triggered, then hide_variation is triggered.

$( 'form.variations_form' ).on( 'hide_variation', function() {
	console.log( 'hide_variation' )
} )

Example

Ok, let’s take a look at an 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 15 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 X