Woocommerce select attributi dettaglio prodotto

Grazie a jQuery possiamo interagire e trasfomare il <select>

WordPress con il plugin Woocommerce è una buona soluzione per un piccolo e-shop/e-commerce, spesso però nel dettaglio prodotto abbiamo diverse necessità.
Woocommerce gestisce gli attributi delle variabili in <select> questo script permette di convertire quest ultimo in una lista <ul> <li>, per rendere più friendly la vendita, ad esempio nella visualizzazione di tutte le taglie:

$('select').each(function(){
    var $this = $(this), numberOfOptions = $(this).children('option').length;
    $this.addClass('select-hidden'); 
    $this.wrap('<div class="select"> </div>');
    $this.after('<div class="select-styled"> </div>');
    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());
    var $list = $('', {
        'class': 'select-options'
    }).insertAfter($styledSelect);
    for (var i = 0; i < numberOfOptions; i++) {
        $('', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }
    var $listItems = $list.children('li');
    $styledSelect.click(function(e) {
        e.stopPropagation();
        $('div.select-styled.active').not(this).each(function(){
            $(this).removeClass('active').next('ul.select-options').hide();
        });
        $(this).toggleClass('active').next('ul.select-options').toggle();
    });
    $listItems.click(function(e) {
        e.stopPropagation();
        $styledSelect.text($(this).text()).removeClass('active');
        $this.val($(this).attr('rel'));
        $list.hide();
        //console.log($this.val());
    });
    $(document).click(function() {
        $styledSelect.removeClass('active');
        $list.hide();
    });
});