How to add radio buttons to product variations in WooCommerce (step by step)
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:
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 (and maybe a small image) next to each one.
- Clickable images. You can add larger 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.
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. Activate the plugin once it’s finished installing.
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.
Start by entering a name for your product options group. 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.
Click on the “+” button under the Choices section to add extra 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.
To show an image next to each radio button, use the blue cog icon in the top right of the list of choices to show the 'Image' column. You can then upload an image of each radio button variation. Two additional options appear below, allowing you to choose whether to update the main product image when a radio button is selected, and/or display an image next to each radio button:
How to add radio button alternatives
As I mentioned above, WooCommerce Product Options provides a range of alternatives to radio buttons. For example, you can use image buttons, text labels, and color swatches instead of radio buttons - all of which allow you to prevent customers from selecting more than one variation.
Simply choose your preferred variation type instead of radio buttons, and set the maximum quantity to '1' in the advanced section:
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.
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.
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.
- 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.
-
- 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.
- Now customers can use radio buttons to select extra options for your products.
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.
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.
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.
Ready to start adding variations radio buttons to products in WooCommerce? Get WooCommerce Product Options today!
2 Comments
Wow! Just the plugin I've been struggling to find! Installing it today!
Maria, thanks so much!
Hi Bob, thank you for the comment. Glad to hear we helped. If you have other WordPress/WooCommerce needs, feel free to browse through our plugins. Cheers.