WooCommerce: trigger event after change of variation

In case anyone stumbles across this in the future: WooCommerce provides triggers throughout the add-to-cart-variation.js which allows you to hook into change events for the website. You can find all of them available in that file, but one which will likely help most in this case can be used as such

$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
    // Fires whenever variation selects are changed
} );

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
    // Fired when the user selects all the required dropdowns / attributes
    // and a final variation is selected / shown
} );

Where the trigger you want to hook into is the first argument inside .on(). Here's a few below to get you started:

woocommerce_variation_select_change Fires when the select is changed.

show_variation is fired when it finds a variation, and will actually pass you the variation object that is found so you can get direct access to the price without having to filter through the selects manually.

You can sift through and find the rest here.

This code performs the exact functionality requested in the initial question:

$('#WC_variation_drop_down_ID').trigger('change');

Change '#WC_variation_drop_down_ID' to the actual ID of the field you changed with jQuery.

Here is a more complete solution that includes setting the field as well as triggering the WooCommerce variation selection (based on array of radio button field classes):

var fields = ['.gchoice_4_11_0', '.gchoice_4_11_1', '.gchoice_4_4_0', '.gchoice_4_4_1'];
for ( var i = fields.length; i--; ) {
    $('#gravity_form_wrapper_ID').on('click', fields[i], function() {
        $('#WC_variation_drop_down_ID').val( $(this).children('input').val() ).trigger('change');
    });
}

Solution inspired by this post on setting WooCommerce Variation Fields.

if anyone comes here like me to find the answer, I will provide a clarification in this.

We have a problem implementing the change function because we need to know the price of variation selected but 'woocommerce_variation_select_change' we got the price from previous variation.

So if you want to get the price of variation after change finish, you have to use 'woocommerce_variation_has_changed' jQuery function.

Example:

jQuery('#select_attribute_of_variation').on('woocommerce_variation_has_changed', function(){ // do your magic here... })

If you want to know which variation has been selected.

You can look in the file: add-to-cart-variation.js and find that this function also gives you the variation data:

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) { }

And if you know your variation ID (you can find it by hoovering your variation in backend or by inspection this object when selecting your variation), then you can do:

$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) { 
  if( variation.variation_id === your_variation_id ) {
    // Do stuff when this variation has been selected 
  }
});

I needed to show some additional information when one variation was selected, and this helped me. It is maybe a bit off topic, but this is the discussion I found when searching for this.

Mostly from this page