JS question

Hi VillaTheme Support,

I’m using your Variation Swatches for WooCommerce plugin and previously received the following JavaScript from you to show different badges depending on the selected variation:

jQuery('form.vi_wpvs_loop_variation_form .variation_id').on('change', function () {
    let $this = jQuery(this),
        wrap_product = $this.closest('.product'),
        badges = wrap_product.find('.isb_variable_group');
    setTimeout(function () {
        let t_val = $this.val();

        badges.find('.isb_variable').hide();
        badges.find('.isb_variable').each(function (i, e) {
            let data_id = jQuery(e).data('id');

            if (data_id == t_val) {
                jQuery(e).show()
            }
        });
    }, 100);
});

jQuery(document).ajaxSuccess(function () {
    jQuery('form.vi_wpvs_loop_variation_form .variation_id').on('change', function () {
        let $this = jQuery(this),
            wrap_product = $this.closest('.product'),
            badges = wrap_product.find('.isb_variable_group');
        setTimeout(function () {
            let t_val = $this.val();

            badges.find('.isb_variable').hide();
            badges.find('.isb_variable').each(function (i, e) {
                let data_id = jQuery(e).data('id');
                if (data_id == t_val) {
                    jQuery(e).show();
                }
            });
        }, 100);
    });
});

The issue is that this solution causes a brief visual “blink” where the wrong badge is shown momentarily before the correct one appears. I’ve tried troubleshooting and improving this behavior with help from ChatGPT, but so far we haven’t been able to fully solve the issue.

Do you have a recommended fix or a better approach to handle this more smoothly?

Thanks in advance!

Best regards,Adam