Having radio buttons instead of dropdown in product pages can improve usability and conversion rates.
In this post, I’ll show you how to easily swap the default dropdowns for custom radio buttons with some simple code – no plugins required.

Change Variation Dropdown to Radio Button for WooCommerce without Plugins

Add this code to your theme functions.php file.

/*
 * Variation Dropdown to Radio Button Code by wpcookie
 * https://redpishi.com/wordpress-tutorials/dropdown-to-radio-button/
 */	
add_action( 'woocommerce_variable_add_to_cart', function() {
    add_action( 'wp_print_footer_scripts', function() {
		$color = "#1c1c1c";
		
        ?>
        <script type="text/javascript">

        // DOM Loaded
        document.addEventListener( 'DOMContentLoaded', function() {

            // Get Variation Pricing Data
            var variations_form = document.querySelector( 'form.variations_form' );
            var data = variations_form.getAttribute( 'data-product_variations' );
            data = JSON.parse( data );

            // Loop Drop Downs
            document.querySelectorAll( 'table.variations select' )
                .forEach( function( select ) {

                // Loop Drop Down Options
                select.querySelectorAll( 'option' )
                    .forEach( function( option ) {

                    // Skip Empty
                    if( ! option.value ) {
                        return;
                    }

                    // Get Pricing For This Option
                    var pricing = '';
                    data.forEach( function( row ) {
                        if( row.attributes[select.name] == option.value ) {
                            pricing = row.price_html;
                        }
                    } );

					 var span = document.createElement( 'span' );

                    // Create Radio
                    var radio = document.createElement( 'input' );
                        radio.type = 'radio';
                        radio.name = select.name;
                        radio.value = option.value;
                        radio.checked = option.selected;
					radio.setAttribute('id',option.value);
                    var label = document.createElement( 'label' );
					     	 label.htmlFor = option.value;
                    	label.appendChild( document.createTextNode( ' ' + option.text + ' ' ) );

					 span.appendChild( radio );
					 span.appendChild( label );


                    // Insert Radio
                    select.closest( 'td' ).appendChild( span );

                    // Handle Clicking
                    radio.addEventListener( 'click', function( event ) {
                        select.value = radio.value;
                        jQuery( select ).trigger( 'change' );
                    } );

                } ); // End Drop Down Options Loop

                // Hide Drop Down
                select.style.display = 'none';

            } ); // End Drop Downs Loop

        } ); // End Document Loaded
        </script>
<style>
html {
--radio-color: <?= $color ?>;	
}	
td.value {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}


td.value input[type="radio"] {
    appearance: none;
    display: none;
}

td.value label {
    font-size: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: inherit;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    transition: linear 0.3s;
    color: var(--radio-color);
    padding: 0.3em 0.6em;
    border: 2px solid var(--radio-color);
    cursor: pointer;
}
td.value input[type="radio"]:checked + label {
    background-color: var(--radio-color);
    color: #f1f3f5;
    transition: 0.3s;
}
a.reset_variations {
    display: none!important;
}
</style>
        <?php
    } );
} );

This code does the following:

Replaces default dropdowns in product page with radio buttons
Applies custom styling for improved design

To change the color of the radio buttons, find this line:

$color = "#1c1c1c";

And replace #1c1c1c with your desired color.

Conclusion

Swapping dropdowns for radio buttons can significantly improve the variation selection experience in WooCommerce. With just a bit of JavaScript and CSS, you can override the default selects. This helps customers view and choose options faster for higher conversions.

If this article is difficult for you to read in text, you can watch the video version below.

That’s it, Give it a try and let me know if you have any other questions!