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 ) {

                    // 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;
                    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
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;
    } );
} );

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.


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

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: 53


  1. Thank you Maya, I have been looking for this snippet. Can you please tell me how I can change the selected variation color when clicking the clear button?

    Thanks in adv.

    • Hi Phil, This code does not support the “clear” button, and I recommend you hide this button in your shop using CSS.

  2. Hi, thanks for this code snippet!

    For the `td.value` CSS Style, I would suggest the following change (which for me worked better on attributes with longer text):

    td.value {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin: 4px 8px 4px 0;
    padding: 0;
    list-style: none;
    position: relative;

    And what I miss in your code is an option to retrieve and add CSS style for “disabled” attributes (adding an opacity to these). It would be great if you could add this!

Leave a Reply

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