Changing variations from dropdown to radio buttons only for attribute with multi terms

Question

I want to change the Woocommerce variations dropdown to radio buttons only attributes with multi-options.

Here's a screenshot of what I'm trying to do:

add_action( 'woocommerce_after_single_product', function() {
 
    global $product;
    if( ! $product || ! $product->is_type( 'variable' ) ) {
        return;
    }

Inline jQuery:

?>
    <script>
        jQuery( document ).ready( function( $ ) {
            $( ".variations_form" )
                .on( "wc_variation_form woocommerce_update_variation_values", function() {
                $( "label.generatedRadios" ).remove();
                $( "table.variations select" ).each( function() {
                    var selName = $( this ).attr( "name" );
                    $( "select[name=" + selName + "] option" ).each( function() {
                        var option = $( this );
                        var value = option.attr( "value" );
                        if( value == "" ) { return; }
                        var label = option.html();
                        var select = option.parent();
                        var selected = select.val();
                        var isSelected = ( selected == value )
                            ? " checked=\"checked\"" : "";
                        var selClass = ( selected == value )
                            ? " selected" : "";
                        var radHtml
                            = `<input name="${selName}" type="radio" value="${value}" />`;
                        var optionHtml
                            = `<label class="generatedRadios${selClass}">${radHtml} ${label}</label>`;
                        select.parent().append(
                            $( optionHtml ).click( function() {
                                select.val( value ).trigger( "change" );
                            } )
                        )
                    } ).parent().hide();
                } );
            } );
        } );
    </script>
    <?php
} );

How I can loop throgh attributes and apply the change only to those who have multiterms.

Any help is much appreciated!

Answer 1

Here’s how I solved this:

1. I used JavaScript (@Franco A. Torres got my code fixed) to loop through attributes and check if Select has more than 1 option and add a class to it.

let checkSelects = [...document.querySelectorAll(".value select")]

checkSelects.forEach(checkSelect => {
  if (checkSelect.length > 2) {
    checkSelect.classList.add("active")
  }
})

2. I applied the CSS code to the added class like this:

.value select.active{
display: inline-block !important;

}

3. Now the default Woocommerce dropdown menu is displayed again but we need to hide the generated radio buttons like this:

.value label:not(:only-of-type){
    display: none !important;

}