Convert Variation Dropdown Into Button Swatches for WooCommerce Products

You are currently viewing Convert Variation Dropdown Into Button Swatches for WooCommerce Products

User experience is one of the essential aspects that every store owner should pay attention to.

Simplifying the shopping process for our customers can help them make the right decision much quicker and for us to increase revenue and start filling the order.

By default, WooCommerce product variations are displayed in a dropdown list that covers the different options from the view.

This is not a good practice for two main reasons:

  1. The variations are hidden; the customer must click the dropdown menu to view the options.
  2. Unfortunately, once clicked, the customer still may not see all the existing variations (such as colors), requiring him to scroll down.

Studies show a customer’s average time on a page is roughly 45 to 80 seconds. Therefore, considering that both reasons above will make the visitor spend valuable time, we should change and optimize it.

One of the most effective ways to make shopping more enjoyable is displaying all options in a swatches view.

Swatches will lay out all the product options, ensuring the customers see them all while speeding up the shopping journey process. That’s a win-win situation for the customer and the business.

We can change and convert the default variation dropdown list to buttons in multiple ways, and in this tutorial, we will focus on two.

Change the Dropdown List to Radio Buttons with a Function

In this first method, we will use a PHP function to change the default dropdown list to radio buttons.

You’ll need to paste the function below at the bottom of the functions.php file of your child theme.

Note: please back up your website before editing core files.

function convert_drowpdown_variables_to_buttons_woocommerce() {
	add_action( 'wp_print_footer_scripts', function() {
        <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[] == option.value ) {
                            pricing = row.price_html;
                    } );
                    // Create Radio
                    var radio = document.createElement( 'input' );
                        radio.type = 'radio';
                        radio.value = option.value;
                        radio.checked = option.selected;
                    var label = document.createElement( 'label' );
                        label.appendChild( radio );
                        label.appendChild( document.createTextNode( ' ' + option.text + ' ' ) );
                    var span = document.createElement( 'span' );
                        span.innerHTML = pricing;
                        label.appendChild( span );
                    var div = document.createElement( 'div' );
						div.className = "radioButton";
                        div.appendChild( label );
                    // Insert Radio
                    select.closest( 'td' ).className = "variationButtons";
					select.closest( 'td' ).appendChild( div );
                    // Handle Clicking
                    radio.addEventListener( 'click', function( event ) {
                        select.value = radio.value;
                        jQuery( select ).trigger( 'change' );
                    } );
                } ); // End Drop Down Options Loop
                // Hide Drop Down
       = 'none';
            } ); // End Drop Downs Loop
        } ); // End Document Loaded
    } );
add_action( 'woocommerce_variable_add_to_cart', 'convert_drowpdown_variables_to_buttons_woocommerce' );

Once pasted, revisit the relevant product page to ensure the attributes have changed to radio buttons.

WooCommerce radio buttons

The structure’s look is based on your active theme and may look different from one to another.

You can also improve the section’s appearance with custom CSS to display it better.

Here are basic CSS rules to prettify the radio buttons. You can keep building on that based on your needs.

.variations, .variations th, .variations td {
.variationButtons {
	display: flex;
.radioButton {
	padding: 10px 15px;
	background-color: aliceblue;
	margin-right: 5px;
.reset_variations {
	display: none!important;
Product swatches button css

You must use a WordPress plugin if you want something more robust with additional options.

WooCommerce extensions

Change the Dropdown List to Swatches with a Plugin

We can use many decent WooCommerce plugins to convert the attributes list to buttons. However, this tutorial will focus on the Variation Swatches For WooCommerce plugin.

Variation Swatches for WooCommerce plugin

Upon activating the plugin, all the variations will be transformed from their current view to buttons.

That’s practical and saves us valuable time from individually changing it for each product.

The plugin’s free version is limited but still very useful. You can browse the different options by navigating to the Swatches Settings screen.

Variation plugin settings page

To get ideas and learn how to implement the different variations, navigate to the Swatches Settings -> Tutorial tab and watch the videos.

One example is to change the color variations from text to actual colors.

Color variation buttons

First, navigate to the Products -> Attributes screen, and edit the Colors attribute.

Then, change the attribute type from select to color, and update the changes.

Once updated, the product colors will be displayed in a simple color palette. We need to assign the right color to each option to change that.

Therefore, navigate to the Attributes screen, and click the Configure terms link.

Configure attribute terms WooCommerce

Click edit under the desired color name, and use the color picker box to assign its color.

Once you have saved the changes, visit the product page, and verify that the attribute changed to the color you assigned to it.

Assign color to attribute

You’ll then repeat the process and assign each variation its corresponding color.

If you’re interested in the pro version of the plugin, you can get it from the official developer or us for only $4.99.

Related Articles


This tutorial taught you how to change the WooCommerce product attributes dropdown list into beautiful buttons.

Comment and tell us which method you used to achieve this task.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.


PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply