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.

You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]

As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.

/*
 * 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!

Share this post
Maya
Maya

Hi, my name is Maya and I’m a WordPress plugin developer. I created this website to share some of the helpful codes that I’ve used in my own projects.
If you’re looking for a custom plugin for your website, you can contact me by clicking on Hire a developer in the menu. I’d love to hear from you.

Articles: 50

Leave a Reply

Your email address will not be published. Required fields are marked *