How to Convert Dropdown to Radio Buttons on Flatsome Powered Website

Do you want to convert dropdown to radio buttons on your Flatsome-powered site?

When a product has selectable attributes or variations, the only option available is to select from a dropdown list.

But, as an online store owner, you should allow your customers to sell all available options without having to scroll through a dropdown menu.

In standard WooCommerce, radio buttons aren’t available for products. It comes with a dropdown list and hides all possible options until you click on them.

In this Flatsome tutorial, we will show you how to change the dropdown to radio buttons on Flatsome.

The below videos show how to create radio variation swatches from scratch.

How to Convert Dropdown to Radio Buttons on Flatsome


WooCommerce Variation Swatches

In general, you need the WooCommerce variation swatches plugin to make the default dropdown to the radio button.

Variation Swatches for the WooCommerce plugin made it simple to improve the way your attributes are displayed with radio buttons.


Moreover, it allows you to covert dropdown into the image, label/button, and WooCommerce color swatches.

If you check the default WooCommerce, you’ll see there is no option to enable image, color, and radio buttons.

without radio button

Once you install the Variation Swatches plugin for WooCommerce, you will notice different options under Type such as Color, Image, and Button.

You can download the free version from the WordPress repository or upload/install it directly from the WordPress dashboard.

radio button missing

But, for Radio, you need to buy the premium version to enable the radio button feature.

The radio swatches feature is the pro version of the WooCommerce Variation Swatches plugin.


You need to install the free version of the WooCommerce Variation Swatches plugin. The pro version is the extension of WooCommerce Variation Swatches.

Once you are done with installation and activation, it’s time to create attributes like image swatches for your product variations. There’s an option to edit existing variations as well.

Just follow the bellows steps:

  • Head to Attributes from the Products section.
  • Fill in the ‘Name’ field, and the slug is optional. (For demonstration purposes, I have termed attribute name: Size).
  • Select your attribute type as ‘Radio‘ from the ‘Type‘ drop-down menu.
radio button option

When you add attributes, click on the ‘Configure terms’ from the attribute list to create product variations.


Now, create variations inside the radio type attribute. Fill the name with your desired variation name. Keep adding new attributes by clicking the Add new Size button.


Now, you need to add variation-specific details and customize the rest of the settings.

Once you complete all the required steps, check the view of your product frontend.

That’s it. You have enabled radio buttons on your Flatsome-powered WooCommerce store.

Your variable products option will be much more clickable and user-friendly way. Additionally, the radio button option is a better choice for selecting variation options. It will help you to get more sales. 


Hi, I’m Mohamed. I share delicious recipes that I have cooked and loved. I’ve been food blogging for over 10 years and have a Diploma in Nutrition. You will find many healthy recipes as well as my favourite comfort food on the blog because I believe in a balanced diet.

Related Posts

Ultimate Top 10 WordPress Paywall Plugins 2023

Are you looking for the best WordPress Paywall Plugin? WordPress paywall plugins are widely available, although not all of them are top-notch. Paywall plugins help you promote…

Start Booking Process with Availability Calendar Since Appointment Booking 1.19.0

With the release of the MotoPress Appointment Booking plugin version 1.19.0, we’ve introduced several significant improvements and enhanced flexibility to the booking form widget. Additionally, we’ve fixed bugs and implemented…

Discover Top 17 WordPress Community Themes 2023

Community or social gathering is an amazing platform where you can share your thoughts or ideas with your people. Here WordPress Community Themes can play a vital…

Ultimate Top WooCommerce Dark Theme in 2023

WooCommerce dark themes are a good option if you want your website to have a contemporary, melancholy atmosphere. Dark themes are sinister and enigmatic, whereas light themes…

WooCommerce Variable Product Attributes Setup 2023

Are you worried about how to create Radio, Label, Color, and Image Variation Swatches for WooCommerce variable product attributes? If your WooCommerce store sells a variety of…

Top Google Tag Manager WordPress Plugins 2023

Google Tag Manager WordPress plugin is a tag management plugin that can help you to put or update tags on your website. Using it, you will be…