How to Display WooCommerce Variations as Radio Buttons

In this tutorial, I’d like to show you two approaches to how we can change the appearance of WooCommerce variations on your store and display them as radio buttons instead of dropdown lists.

• First, I will show you how to do it programmatically,
• Also, I will show you how you can do it with a plugin.

As a result, this is how the variations are going to be displayed on product pages:

Now, let’s jump straight into how to do it.

Displaying Variations as Radio Buttons Programmatically

In the programmatic approach we need to keep in mind the following:

• It is better not to change any WooCommerce PHP templates (I mean the /templates folder), because it can be done only in cases when there is no other choice. However, I noticed that some WordPress variation swatches plugins are doing that.
• In the below code, we can also use some conditions that allow us to replace variations select dropdown fields with radio buttons only for specific products or even for specific attributes.

woocommerce_dropdown_variation_attribute_options_html – is the filter hook we will use.

Below you can find my custom function which is kind of a fork of the standard WooCommerce function wc_dropdown_variation_attribute_options(). If you don’t know where in your store you can insert the function and the hook, please take a look at this guide.

My goal here is to display the variations radio buttons exactly under the default variation selection and hide the default one with display:none. Then, with JavaScript, we’re going to emulate the interaction with the select dropdown when users are using radio buttons.

/**
 * @snippet WooCommerce Display Variations as Radio Buttons
 * @author Misha Rudrastyh
 * @url https://rudrastyh.com/woocommerce/variations-as-radio-buttons.html
 */
add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'rudr_radio_variations', 20, 2 );
function rudr_radio_variations( $html, $args ) {

	// in wc_dropdown_variation_attribute_options() they also extract all the array elements into variables
	$options   = $args[ 'options' ];
	$product   = $args[ 'product' ];
	$attribute = $args[ 'attribute' ];
	$name      = $args[ 'name' ] ? $args[ 'name' ] : 'attribute_' . sanitize_title( $attribute );
	$id        = $args[ 'id' ] ? $args[ 'id' ] : sanitize_title( $attribute );
	$class     = $args[ 'class' ];

	if( empty( $options ) || ! $product ) {
		return $html;
	}
	
	// HTML for our radio buttons
	$radios = '<div class="rudr-variation-radios">';

	// taxonomy-based attributes
	if( taxonomy_exists( $attribute ) ) {

		$terms = wc_get_product_terms(
			$product->get_id(),
			$attribute,
			array(
				'fields' => 'all',
			)
		);

		foreach( $terms as $term ) {
			if( in_array( $term->slug, $options, true ) ) {
				$checked = checked( $args[ 'selected' ], $term->slug, false );
				$radios .= "<input type=\"radio\" id=\"{$name}-{$term->slug}\" name=\"{$name}\" value=\"{$term->slug}\" {$checked}><label for=\"{$name}-{$term->slug}\">{$term->name}</label><br />";
			}
		}
	// individual product attributes
	} else {
		foreach( $options as $option ) {
			$checked = sanitize_title( $args[ 'selected' ] ) === $args[ 'selected' ] ? checked( $args[ 'selected' ], sanitize_title( $option ), false ) : checked( $args[ 'selected' ], $option, false );
			$radios .= "<input type=\"radio\" id=\"{$name}-{$option}\" name=\"{$name}\" value=\"{$option}\" {$checked}><label for=\"{$name}-{$option}\">{$option}</label>";
		}
	}
  
	$radios .= '</div>';

	return $html . $radios;
	
}

As you can see the code above gives us tons of space for customization – we can display prices as part of radio buttons labels or even images.

For the sake of the simplicity of this snippet, I skipped any escaping functions, like esc_attr() and esc_html(), don’t forget about them.

Never forget to use some CSS to hide the default select dropdowns:

#pa_color{
	display: none;	
}

To display these radio buttons for specific products only, you can use the conditions below. For example, we’re displaying the radio buttons only for product IDs 1, 15, and 25.

if( ! in_array( $product->get_id(), array( 1, 15, 25 ) ) ) {
	return $html;
}

In order to display radio buttons for specific attributes, use this:

if( 'pa_color' !== $attribute ) {
	return $html;
}

And of course, the JavaScript part:

jQuery( function( $ ) {
	// on radio button change(click)
	$( document ).on( 'change', '.rudr-variation-radios input', function() {
		// for each checked radio button we reflect the same changes to select dropdowns
		$( '.rudr-variation-radios input:checked' ).each( function( index, element ) {
			const radio = $(element)
			const radioName = radio.attr( 'name' )
			const radioValue  = radio.attr( 'value' )
			$( 'select[name="' + radioName + '"]' ).val( radioValue ).trigger( 'change' );
		})
	})

})

Displaying Variations as Radio Buttons with a Plugin

If the programmatic approach is not what you were looking for, and you don’t want to deal with the code at all, I would recommend my Simple Variations Swatches for WooCommerce plugin which allows you to display variations of a specific attribute as radio buttons in two clicks.

Basically, you just need to go to “Products > Attributes” and then edit a specific attribute. On the attribute edit page select the type “Radio”. That’s pretty much it.

# WooCommerce, Variable Products

Misha Rudrastyh

Hey guys and welcome to my website. For more than 15 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on X