WooCommerce: trigger event after change of variation

Question

We use Woocommerce to sell colorboxes. Mostly the variable-product option is chosen.

We added a modal dialog with a color palette, where the customer can chose a color from. This is next to the common dropdown of woocommerce.

The problem is that when I pass the right SlugValue to the dropdown (after it gets chosen from palette), then the value in the dropdown is correct, but the event that need to be fired to publish the price doens't works.

I already tried to fire the onchange event of the dropdown, but nothing happend.

Can anybody tell me, which event needs to be triggered, and how?

Answer 1

I was getting a similar problem when loading a custom product type, that is variable extended. On the the PHP side, I think I worked the same way but the variation on the front end would not load, after selecting a term.

after a little digging, I composed this jQuery code that solved the issue:

 $('body').on('check_variations', function () {
    const $form = $('.variations_form');
    const $price = $form.find('.single_variation_wrap .single_variation');
    const $variationIdInput = $form.find('input[name="variation_id"]');
    const variationsData = $form.data('product_variations');
    const selectedTerms = $form.find('.variations select').map((idx, attr) => {
        const attrObj = {};
        attrObj[attr.name] = $(attr).val();
        return attrObj;
    }).toArray();
    const matchedVariation = variationsData.find(variation => {
        return selectedTerms.every(term => {
            const key = Object.keys(term)[0];
            return variation.attributes[key] == term[key];
        });
    });
    if (!matchedVariation) return;
    const variationId = matchedVariation.variation_id;
    const priceHtml = matchedVariation.price_html;
    $price.html(priceHtml);
    $variationIdInput.val(variationId);
});

Answer 2

I also want a solution that my javascript is only working on 1st variation. The code is given below

add_action('admin_footer', 'script');
function script()
{
    ?>
    <script>
        jQuery(function ($) {
            jQuery('#woocommerce-product-data').on('woocommerce_variations_loaded', function () {
                jQuery(this).find('.woocommerce_variation').each(function () {
                    jQuery("#dp").keydown(function () {
                        var cost = document.getElementById("cost").value;
                        var dp = document.getElementById("dp").value;
                        console.log(dp);
                    });
                });
            });
        });

    </script>


    <?php

}

Answer 3

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

Answer 4

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... })

Answer 5

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.

Answer 6

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.