Display Variations as Radio Buttons

In this tutorial I’d like to show you an example how to replace the default variation select dropdowns with radio buttons without plugins. Maybe for specific WooCommerce product attributes or product IDs only.

Something like that:

We’re going to do it without any plugins, though, you might think that it’d be better to display the “Color” attribute not as radio buttons but as color swatches. Like this:

In this case I would recommend you to take a look at my plugin which allows to do that.

But now let me describe a little bit more what we are about to do in this tutorial:

• We are not going to change any WooCommerce HTML templates, that’s quite a rough method and I noticed that some plugin in WordPress plugin directory are doing that which I think is absolutely unnecessary.
• I will show you a couple of conditions which will allow you to replace variations select dropdowns with radio buttons only for specific products or only for specific attributes.

Now let’s get started.

We will begin with a simple PHP code snippet I created on base of wc_dropdown_variation_attribute_options() function and actually used the hook woocommerce_dropdown_variation_attribute_options_html which is inside that function.

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.

That simple!

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 ) ) {
				$radios .= "<input type=\"radio\" id=\"{$name}-{$term->slug}\" name=\"{$name}\" value=\"{$term->slug}\"" . checked( $args[ 'selected' ], $term->slug, false ) . "><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}\" id=\"{$option}\" {$checked}><label for=\"{$name}-{$option}\">{$option}</label>";
		}
	}
  
	$radios .= '</div>';

	return $html . $radios;
	
}

Don’t know where to insert the code?

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

Also:

• On lines 32 and 39 for the simplicity of HTML for this tutorial I skipped any escaping functions, don’t forget about them.
• Never forget to use some CSS to hide the default select dropdowns:

#pa_color{
	display:none;	
}

• In order to display these radio buttons for specific products IDs only, you can use the condition below. For example we’re displaying the radio buttons only for products 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' );
		})
	})

})

Have any questions? Let me know in the comments.

# WooCommerce, Variable Products

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 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