1Days
6Hrs
4Mins
47Secs

BLACK FRIDAY SALE ENDS TOMORROW!

Get 50% off everything with code: BF2022
Buy Plugins

How to add radio buttons to product variations in WooCommerce (step by step)

November 9, 2022

how to add radio buttons to product variations blog header

Radio buttons are a great way to display product variations on any e-commerce site. The only issue is that they don’t come with the standard WooCommerce setup. This article will help you set up product variations as radio buttons easily.

WooCommerce, by default, doesn’t let you add radio buttons for product variations. You can only use dropdown menus to display product variation options.

By presenting product variations as radio buttons, you increase their visibility and make it easier for your customers to compare at a glance.

In this article, we’ll use the WooCommerce Product Options plugin to add variation radio buttons to product pages. This will display radio buttons instead of the default variation dropdown menus. You'll learn how to set up normal radio buttons as well as clickable text labels and images. This is what the end result would look like:

WooCommerce product variation with radio buttons

What is a radio button?

Let's first understand what exactly radio buttons are in the context of WooCommerce product options.

A radio button in WooCommerce essentially gives customers a choice that they must select one of. For instance, if a product is available for purchase in 3 different colors, you can let customers select their desired color variation using radio buttons.

Radio buttons are different from checkboxes, where the customer can select multiple options. So, it’s technically possible to display product variations using checkboxes. They are different from radio buttons as they allow your customers to select a single variation only.

Let’s take a closer look at the types of radio buttons you can add to your WooCommerce variable products:

  • Standard radio buttons. You can add standard radio buttons that appear as clickable circles with text labels next to them.
  • Clickable images. You can add clickable images to display extra options for your product better.
  • Clickable text labels. You can also add clickable text labels to represent your product’s extra options better. This is particularly useful if you’re designing for accessibility.
  • Color swatches. If your product has unique color options, it might be best to display them using color swatches.

The best plugin for displaying WooCommerce variations as radio buttons

Using any visual radio button is far better than using the standard WooCommerce variation dropdowns. The best part is that you can add any of the radio buttons to your WooCommerce site using one plugin: WooCommerce Product Options.

Add extra options and flexible add-ons to your WooCommerce products in seconds.

With this plugin, you can create custom product variations that appear as radio buttons on the front end of your store. This way, you can display extra product options in attractive radio buttons.

How it works

When we talk about variation radio buttons, we're not referring to "product variations" in the traditional WooCommerce sense. After all, WooCommerce variations aren't designed to be displayed as radio buttons. They're also a pain to add and manage!

Instead, we'll be using the WooCommerce Product Options plugin to add radio buttons to products as a simpler alternative to variations. This is not only easier to set up but also allows store owners to easily manage their variable products. This way, you don’t have to manually create a variation for every possible combination and manage it separately.

WooCommerce Product Options is designed to help you transform your default-looking product pages and showcase product variations better.

The plugin lets you add any type of product option to your WooCommerce products. Even including all the types of radio buttons we mentioned above. This means you can avoid using the default WooCommerce variations and display extra product options using customized radio buttons.

Extra features for your variation radio buttons

You can also show or hide specific product options when the customer clicks on a radio button. For instance, if a customer selects the “Yes” option for adding a gift box with their order, a whole new set of additional gift-wrapping options can appear underneath. This gives you full control over how extra product options are displayed on your WooCommerce site and makes it easier to offer a personalized shopping experience.

In addition to this, using the robust WooCommerce Product Options plugin, you can also display products with radio buttons on the single product page or display them on any of your main shop pages with the help of other plugins.

We’ll explain how you can use other plugins with WooCommerce Product Options to showcase products with radio buttons anywhere on your WooCommerce site later in the article.

How to display WooCommerce product variations as radio buttons

Step #1: Install the WooCommerce Product Options plugin

Start by getting the WooCommerce Product Options plugin and installing it on your WooCommerce site.

Once you download the plugin .ZIP file, navigate to Plugins → Add New and upload your plugin to your WooCommerce site. Make sure to activate the plugin on your online store once it’s finished installing.

With the plugin installed and activated on your WooCommerce site, it’s time to activate the plugin’s license key. To do this, navigate to Products → Product Options and click on the Settings tab from the top.

Enter your key in the License Key field and click on the Activate button to continue.

Step #2: Add radio buttons to WooCommerce product variations

The next step is to start adding radio buttons to product variations on your WooCommerce site. Navigate to Products → Product Options and click on the Add Group button.

Add group

Start off by entering a name for your product options group and choose whether to display radio buttons for all products on your WooCommerce site or for specific categories. Using the Options section, click on the Add Option button to create a new radio button.

Add options

Click on the “+” button under the Choices section to add extra options displayed as radio buttons. For instance, if you want to let customers select the size of their product using radio buttons, you can add three options: Small, Medium, and Large.

Similarly, you can also use image buttons, text labels, and color swatches instead of radio buttons only to let customers select one variation.

Color swatches

For example, you can use the Image Swatches field type to let customers choose their preferred color using image swatch buttons that visually represent the product options better. You can add as many product options to each group as you’d like and display them for any WooCommerce product or product category on your online store.

Inclusions exclusions

Simply select your WooCommerce product or product category using the Inclusions section that you want to display the radio buttons for. You can also select specific products that don’t really need radio buttons using the Exclusions section.

Make sure to click on the Save button at the bottom to save the changes.

WooCommerce variations radio buttons

Now all selected products will have radio buttons to let customers select product variations directly from the single product page.

Advanced options

That’s not all, the WooCommerce Product Options plugin also lets you charge extra for different variation radio button options while also displaying extra product options based on the customer’s selection.

For example, you can showcase an “Include a gift card” radio button field. Here the customers can select from “Yes” or “No” options. When customers select the “Yes” option, a new text field will appear to let customers enter a gift message.

Here’s how you can do this in WooCommerce:

  • Navigate to Products → Product Options from the WordPress admin panel and click on the Add Group button.
  • After giving your options group a new name, click on the Add option button. Create a new Radio buttons field.
Gift card options
  • When adding Choices, make sure to set the Price Type of the “Yes” field to Flat fee. Then enter the price you want to charge for the option.
  • Now, add a new Text input option to let customers enter their custom gift card message. Here, create a simple Enter Text Here choice option. Click on the Save button for changes to take effect.
Custom message
    • Once the page refreshes, click on the Edit Option link below the Text input field you just created.
    • Select the Advanced settings checkbox to view advanced options such as conditional logic.
    • Set the following conditions to display the text field only when the customer selects the “Yes” option from the radio buttons:
  • Include a Gift Card? Equals Yes
  • Once you’re done, click the Save changes button again to save changes on your WooCommerce site.
WooCommerce product variation with radio buttons
  • Now customers can use radio buttons to select extra options for your products.
WooCommerce product variation with radio buttons preview

It's that easy!

The WooCommerce Product Options plugin is very easy to use for adding radio buttons to your WooCommerce variations, even if you’re not very tech-savvy. This makes it the perfect solution for businesses that want to use a single plugin to add advanced product variations and display better-looking radio button variations instead of the default WooCommerce dropdowns.

Check out our video guide for more ideas and information:

In addition to radio buttons, color swatches also help create an interactive shopping experience on your online store while appearing more visually appealing than radio buttons. Adding color swatches to WooCommerce is very easy with the WooCommerce Product Options plugin.

Displaying your product variation radio buttons

The great thing about WooCommerce Product Options is that it also works seamlessly with other plugins to display the radio buttons better on your online store.

You can use the Product Table and/or Quick View Pro plugins to display products with radio buttons away from the single product page.

WooCommerce Product Options in a table
A product table on the Shop page, complete with extra product options

The WooCommerce Product Table plugin lets you list specific products or all products on your WordPress site in a sortable and filterable product table. This way, you can display a product table with variation dropdowns anywhere on your WooCommerce site and let customers quickly order products when shopping from your online store.

WooCommerce Product Options in quick view
A quick view lightbox containing product options and radio buttons

In addition to this, you can also use the Quick View Pro plugin to display an interactive lightbox for selecting extra product options directly from the product table. This speeds up the shopping journey further as customers don’t have to leave the page to choose extra options or to add the product to their cart once they’re done customizing. Instead, they can purchase variations of products from the page they’re on.

Add radio buttons to product variations today

WooCommerce, by default, offers limited options for displaying product variations. In simpler words, you’re limited to displaying extra product options using generic-looking dropdown menus that aren’t the best for visually representing product variations.

This is why it’s best to use the WooCommerce Product Options plugin to display product variations beautifully. This way, you can display extra options for your WooCommerce products using custom fields such as radio buttons, checkboxes, text input fields, image swatches, and color swatches. That’s not all; you also have access to advanced options, such as conditional logic, so you can display extra options that are relevant to your customer.

As a result, it helps create a more interactive and personalized shopping experience on your online store. The best part is that the WooCommerce Product Options plugin is very easy to set up on your WooCommerce site. And it doesn’t require you to have any prior coding knowledge.

Add extra options and flexible add-ons to your WooCommerce products in seconds.

Ready to start adding variations radio buttons to products in WooCommerce? Get WooCommerce Product Options today!

Please share your thoughts...

Your email address will not be published.