How to Add Radio Buttons to Variations in WooCommerce

In a standard WooCommerce install, radio buttons, color, and image swatches aren’t used for products. Instead, customers are faced with dropdowns that take longer to flick through and hide all possible options until you click on them.

This doesn’t have to be the case. We’ve made it simple to improve the way your WooCommerce attributes are displayed (with radio buttons) and we’ll show you how in this tutorial.

By the end of this article, you’ll know exactly how to add radio buttons to your WooCommerce store. The best part? You’ll be able to do it in 2 steps with the product options plugin, WooCommerce Attribute Swatches.

How WooCommerce Attribute Swatches works

WooCommerce Attribute Swatches allows you to customize how your product attributes are displayed on individual product pages, category pages, and filters. You can:

• Add text or radio buttons.
• Display color swatches.
• Add image swatches.

You can also create complex pricing structures for variable products by increasing or decreasing the price based on the attributes a customer has selected.

In this case, WooCommerce Attribute Swatches can be used to improve how your customers select product attributes. Plain text-based attributes are made more intuitive and easier to see at-a-glance with radio buttons. Making sales much easier.

How it works from a customer’s perspective

When a customer visits your store, they’ll be presented with all your products as normal. With WooCommerce Attribute Swatches installed, they’ll also see your radio buttons under each product (if you’ve enabled them to) displayed as clickable text boxes. 

They’ll also see these displayed in the product filters, again, if you’ve enabled them to appear here.

Then, when clicking on a product, the customer is taken to the individual product page. Here they will see the same radio button ready for picking and then adding to their cart.

How to add radio buttons to variations in WooCommerce

To add radio buttons to your WooCommerce store, you’ll need to:

1. Install the product options plugin, WooCommerce Attribute Swatches.
2. Add radio button attributes to your store.

That’s it. Below we’ll outline these steps in detail so you can start making more sales for your WooCommerce store.

Step 1: Install WooCommerce Attribute Swatches

To get started, purchase WooCommerce Attribute Swatches from the Iconic store: iconicwp.com/woocommerce-attribute-swatches

Then follow these steps:

1. Go to Plugins > Add New > Upload Plugin.
2. Choose the zip file you downloaded, upload, and then click Activate.
3. Once activated, you’ll need to enter your licence key.

Now that we have WooCommerce Attribute Swatches installed, we can move on to adding attributes and amending the settings to show radio buttons on your WooCommerce product pages.

Step 2: Add radio button attributes to your store

Let’s get onto adding radio buttons to your WooCommerce products. The following are some settings you can change (while you’re creating attributes) to customize how product attributes are displayed in your store.

Note: Any settings you change in the following steps will be applied to all products which use that attribute. These settings can be overwritten on a per-product basis.

So, to add radio buttons to your products, do the following:

1. Go to Products > Attributes in your WordPress dashboard.
2. Enter your attribute name into the Name field. In this case, we’re going to add different types of glass to our framed products.
3. After this, you can select your Swatch Type by clicking on the dropdown. 
   1. In this case, we’ll create a radio button, so select Radio Buttons. 

4. You’ll also have two options here to Show Swatch in Catalog and Show Swatch in Filters. You can select yes or no for both of these to display your radio buttons on category pages and in your product filters.
5. Once happy, click Add attribute and you’ll see your new attribute ready for further customisation. 

We’ll now need to create the individual terms for each one. In other words, the actual individual attributes. For us, this will be different types of glass we want customers to select.

To do this, take the following steps:

1. From the attribute list, click Configure Terms.

2. Here you’ll be able to create the individual terms. In our case, they will be different types of glass.
3. Enter your attribute term name into the Name field.

4. Click Add new Glass and your new term will be added.
5. Keep going until you’ve created all terms.

Once done, you’ll need to add these attributes to your products (if you haven’t already). To do this, you can follow along with our attribute product guide.

Adding radio buttons to WooCommerce just got easier

That’s it, your WooCommerce store now has radio buttons enabled. 

With this up and running, you’ll be able to show your variation options in a much more clickable and user-friendly way, encouraging more sales for your online store.

Make these changes quickly and easily with WooCommerce Attribute Swatches.