Turn the WooCommerce product variations drop-down menu into radio buttons.

Turning the drop-down menu of the product variations into radio buttons is easy!

First, make sure you can add custom code.

There are a few ways you can add custom code to your website:

• Via a third-party plugin like Code Snippets or Custom HTML, CSS & JS
• Using your theme or builder (if it allows it)
• Creating a new file in the website directory (for advanced developers)

I like to use Elementor’s built-in functionality for adding custom code.

Add the code

<script>
jQuery(document).ready(function($) {
    // Convert dropdowns to radio buttons
    $('.variations_form .variations select').each(function() {
        var select = $(this);
        var options = '';

        // Generate radio buttons
        select.find('option').each(function(index, option) {
            if (index > 0) {
                options += '<label>';
                options += '<input type="radio" name="' + select.attr('name') + '" value="' + $(option).val() + '"';
                if ($(option).is(':selected')) {
                    options += ' checked="checked"';
                }
                options += '> ' + $(option).text();
                options += '</label><br>';
            }
        });

        // Replace the select dropdown with radio buttons
        select.after(options).hide();
    });

    // Handle change event to update the form values
    $('.variations_form input[type="radio"]').change(function() {
        var radio = $(this);
        var select = radio.closest('.value').find('select');
        select.val(radio.val()).change();
    });
});
</script>

Make sure that you include the <script> tags.

Screenshots

Before

After

Style with CSS

If you want to make your site unique or show your client you go above and beyond, you can style it using some custom CSS like adding a background, some padding, changing the direction to a row, etc.

Conclusion

Changing the default drop-down menu of the product variations in WooCommerce isn’t complicated. Just add a simple code snippet and you are ready to go!

Thanks for reading!
Simeon