Woocommerce自定义变体视图？

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.

Find a plugin Woocommerce Radio Buttons and make similar