I have a custom variations view at product page. It is a simple colorboxes. I hide default woocommerce variations selects and than change it after click on box:
jQuery('.colors-list li').on('click', function(event){
if(!jQuery(this).hasClass('active')){
//change active square
jQuery('.colors-list .active').removeClass('active');
jQuery(this).addClass('active');
//change active color label
var colorName = jQuery(this).attr('colorname');
jQuery('.checked-color').html(colorName);
//change value of hided woocommerce variable switcher
var colorSlug = jQuery(this).attr('colorval');
jQuery('#pa_color').val(colorSlug).change();
jQuery('.variations_form').trigger('woocommerce_variation_select_change');
}
});
But once I change only one select(color), for this reason I have an error in js(add_to_cart variation.js):
Uncaught TypeError: Cannot read property 'length' of null
Error at this:
if ( $( this ).val().length === 0 ) .
If I have only one variations - error does not occur. I tried to change second select with color to default value, but nothing changed.