How to Use Radio Buttons for WooCommerce Variations

Want to make your WooCommerce product variations more user-friendly? Radio buttons might be the answer! These simple, yet effective elements offer a great way to simplify the product customization process.

With radio buttons, customers can easily choose between different options like colors, sizes, and more, thus making the product selection process a breeze. The replacement of the standard WooCommerce variations dropdowns can reduce friction by requiring fewer clicks.

In this post, we explore how to use radio buttons for WooCommerce product variations and how you can customize them.

What are radio buttons?

You probably already know what radio buttons are, but for the sake of completeness, let’s define them in this section.

Radio buttons are a type of user interface element commonly used in forms to allow users to make a single selection from a list of options. In the context of WooCommerce, radio buttons are utilized to present a set of variations for a product like size, color, or materials.

These circular buttons enable users to choose one option from a set of choices. Unlike checkboxes, which allow multiple selections, radio buttons only permit one option to be selected at a time. The available options are typically displayed vertically or horizontally, depending on the form or page layout.

When a user clicks on a radio button, it is selected and displays a dot or checkmark inside the button, indicating their choice. Labels are often associated with each option to provide descriptive information.

Use cases of radio buttons

In WooCommerce, radio buttons are commonly used to display product variations, such as size, color, or material, but they can have more use cases on other sites:

• Product variations: Radio buttons enable customers to select specific product options they wish to purchase, such as size, color, or material.
• Surveys and feedback forms: Radio buttons can be used in surveys and feedback forms to allow users to indicate their level of agreement or preference for a particular question or statement. For example, a survey question may ask “How satisfied are you with our product?” with radio buttons for options such as “Very Satisfied,” “Somewhat Satisfied,” “Neutral,” “Somewhat Dissatisfied,” and “Very Dissatisfied.”
• Personalization options: Radio buttons can be used to provide users with personalized options such as language preferences or account settings. For instance, a user might select their preferred language from a set of radio buttons that display options such as “English,” “Spanish,” or “French.”
• Subscription preferences: They facilitate users in choosing the types of content they wish to receive, such as newsletters, promotional emails, or updates on new products.

The benefits of displaying WooCommerce variations as radio buttons

While radio buttons on their own are a fairly simple concept, using them as WooCommerce variations can offer several benefits for both website owners and customers:

• Improved user experience: Radio buttons provide a clear and concise way for customers to select product variations, reducing the likelihood of confusion or errors. This improves the overall user experience and can lead to higher customer satisfaction and repeat business.
• Easy to use: Radio buttons are intuitive and easy to use, even for customers who are not familiar with e-commerce sites or online shopping. They provide a straightforward way for customers to select the product options they want without having to navigate complex menus or dropdowns.
• Enhanced product visibility: When you display variations as radio buttons, customers can quickly and easily see the available options for a product. This can help to increase product visibility and encourage customers to explore additional options or make multiple purchases.
• Faster purchase decisions: Radio buttons can help customers make faster purchase decisions by presenting product options in a clear and concise manner. This can be especially helpful for customers who are on the fence about a particular product and need more information to make an informed decision.
• Improved sales and conversions: By making the purchase process easier and more streamlined, radio buttons can help to increase sales and conversions for WooCommerce store owners. This can lead to higher revenue and a more successful online business.

Adding radio buttons to WooCommerce products

With WooCommerce, you have the ability to add different variations, like sizes or colors, to your products out-of-the-box. For example, if you are selling T-shirts, you can offer various sizes and colors for customers to choose from. This is great, but there is also a downside: when you add these variations in WooCommerce, they show as plain dropdown lists (select lists) on your product page. It’s not very exciting or visually appealing.

So, to get more display features, you’ll need a plugin.

That’s where Advanced Product Fields for WooCommerce (APF) comes in. It’s a fantastic all-rounder plugin for e-commerce owners to maximize their product customisation, sales potential, and overall user experience.

The plugin has many different powerful uses. Here are just a few:

• You can add extra options to your product pages, including radio buttons.
• You can use conditional logic to show or hide options based on other selections.
• Add extra costs to your product.

APF gives a huge amount of freedom for customizing your products in WooCommerce.

How to add radio buttons to WooCommerce products

In this section of the tutorial, we’ll show you exactly how you can add radio buttons to your WooCommerce products and move away from boring variations selections.

As an example, we’ll create a software product with extended support options:

Step 1: Install Advanced Product Fields for WooCommerce

The first thing to do is download the Advanced Product Fields plugin and install it on your WordPress site. There is a free version available on the WordPress repository. It also allows you to add radio buttons to your product pages, but it lacks some other powerful features.

Download Advanced Product Fields for WooCommerce and install it on your WooCommerce site. To do this, navigate to Plugins → Add new and upload the plugin’s zip file before clicking on the Install now button. Activate the plugin to continue.

Step 2: Create a WooCommerce product

Once the plugin is installed, we need to set up a WooCommerce product. You’ve probably got this part covered, but just in case, you can follow the instructions below:

Go to Products → Add new to create a new Simple product. Configure the 3 main aspects of your product:

• Give your product a title.
• Set the main price in the General tab.
• Add a product image.

For this example, we will create a simple software product. Later, radio buttons are used to add support options to the product, allowing users to choose the type of support they want with their software license.

Step 3: Add radio buttons to your product

Now that our product is ready, we can explain what you came here to do: add radio buttons to your WooCommerce product page.

To create radio buttons, go to the Custom fields tab in the Product data meta box and click Add your first field.

[image]

You’ll notice a new field appears with more configuration options. Make the following changes:

• Type: This allows you to change the input field type. By default, a newly created field is a text input. Change this to Radio Buttons.
• Label: Enter the title of your field. We set it to “Choose your support license.”
• Required: Enable this setting so the user has to make a selection.
• Options: Here you can define the choices you’ll give to your customer. Each choice will be displayed as a radio button. In our example, we added 3 options to extend the support of the software license. The last 2 options also increases the final product price. That’s achieved by setting the Price Type setting to Quantity Based Fee.

That’s it! You now have a product with extra radio button options.

Bonus: Styling the radio buttons

By default, radio buttons look quite basic. Some themes may include styling for radio buttons, but they most probably don’t.

Luckily, with some custom styling code. you can change the look completely. For example, we can turn them into a style that fits your theme a bit more. In our example, that could look something like this:

This is the CSS code to achieve that result. You can add it to your site via Appearance → Customize → Additional CSS:

.wapf-radios {
  border-radius: 6px;
  border:1px solid #eee;
}

.wapf-radios .wapf-checkable {
  border-bottom:1px solid #eee;
  padding:12px
}

.wapf-radios input[type="radio"] {
  opacity:0;
  width:0;
  position:absolute;
}

.wapf-radios .wapf-custom{
  position:relative;
  width:12px;
  height:12px;
  border:1px solid #231c4c;
  display:inline-block;
  border-radius: 50px;
}

.wapf-radios .wapf-checked .wapf-custom{
  background: #231c4c;
}Code language: CSS (css)

Conclusion

Using radio buttons to display variations or extra product options in WooCommerce is an easy way to increase the user experience (and conversions) on your store. They are more user friendly, as they require less clicks from your customer.

Using a plugin such as Advanced Product Fields (APF) is a great way to start leveraging the power of product customization, and using radio buttons to display product buttons has a huge amount of benefits, from improving the user experience in the checkout process to maximizing sales. The sky is the limit!

[get started CTA]