Custom variations for Woocommerce?

Question

JavaScript

According to the standard in wokomers, variations are displayed as selects. But my design has a slightly different appearance:

I decided to hide the default selects and change the default ones by clicking on custom ones, using this "noodle":

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 here's the bad luck - with one active variation - all zbs. But when size is added, then when changing the color, its value is for some reason considered zero and gives an error and the change stops working correctly

Uncaught TypeError: Cannot read property 'length' of null

in the add-to-cart-variation file when checking:
if ( $( this ).val().length === 0 )
Perhaps when I change one of the selects, I trigger some wrong Wookomers event?

Answer 1

I found the Woocommerce Radio Buttons plugin and made it by analogy