WooCommerce Variation Tab Admin Script

Question

I addind a multiple woocommerce_wp_select and div (informations) to woocommerce_variable_product_before_variations action hook (Variation Tab to Admin Product).

Several informations div appears according to the values of the select with a custom JavaScript.

When I editing a variation product, it work fine when changing the value of the select.

But when a create a brand new variation product, my Javascript don't work. I think it doesn't bind javascript events. I've tried with woocommerce_variations_loaded event and after ajaxComplete, same result.

This is my custom JavaScript :

jQuery(document).ready(function($) {
    wc_vs_product_options_type = $( '#wc_vs_product_options_type' );
    
    var wv_vs_init_js = function() {
        if (wc_vs_product_options_type.val() !== 'nothing') {
            $('.wc_vs_product_options_settings').removeClass('hide');
        }
        $('#wc_vs_notice_' + wc_vs_product_options_type.val()).removeClass( 'hide' );
    }
    
    var wv_vs_on_change_js = function() {
        wc_vs_product_options_type.on( 'change', () => {
            $( '.wc_vs_notices' ).addClass( 'hide' );
            $( '#wc_vs_notice_' + wc_vs_product_options_type.val() ).removeClass( 'hide' );
            if ( wc_vs_product_options_type.val() !== 'nothing' ) {
                $( '.wc_vs_product_options_settings' ).removeClass( 'hide' );
            } else {
                $( '.wc_vs_product_options_settings' ).addClass( 'hide' );
            }
        });
    } 
    $(document).on('woocommerce_variations_loaded', function() {
        $(document).ajaxComplete( () => {
            wv_vs_init_js();
            wv_vs_on_change_js();
        });
    });
});

What would be the right event after variation created on ajax by woocommerce ?

Answer 1

WooCommerce has two events for variation added/loaded in backoffice: woocommerce_variations_added and woocommerce_variations_loaded

I've solved my problem with this JS code :

jQuery(document).ready(function($) {
    
    function wv_vs_admin(wc_vs_type) {
        if (wc_vs_type.val() !== 'nothing') {
            $('.wc_vs_product_options_settings').removeClass('hide');
        }
        $('#wc_vs_notice_' + wc_vs_type.val()).removeClass( 'hide' );

        wc_vs_type.on( 'change', () => {
            $( '.wc_vs_notices' ).addClass( 'hide' );
            $( '#wc_vs_notice_' + wc_vs_type.val() ).removeClass( 'hide' );
            if ( wc_vs_type.val() !== 'nothing' ) {
                $( '.wc_vs_product_options_settings' ).removeClass( 'hide' );
            } else {
                $( '.wc_vs_product_options_settings' ).addClass( 'hide' );
            }
        });
    }
    
    $('#woocommerce-product-data').on('woocommerce_variations_loaded', () => {
        $(document).ajaxComplete( () => {
            wv_vs_admin( $( '#wc_vs_product_options_type' ) );
        });
    });
});