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.

See also  How To Create a Slider Using Flatsome Theme UX Builder

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. 


Subscribe To Our Newsletter!
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

Fintech’s biggest hits and misses of 2023

As 2023 comes to a close, we’re here to look back at the biggest fintech stories of the year. Silicon Valley Bank’s implosion felt like a fintech…

It’s critical to regulate AI within the multi-trillion-dollar API economy

Alex Akimov Contributor With two decades of tech leadership experience, Alex Akimov, former head of API at Adyen, now revolutionizes embedded finance at Monite by building best-in-class…

Arduino exploring India manufacturing to limit counterfeit sales

Arduino is considering manufacturing in India. The startup, best known for its open source microcontroller boards, hopes to restrict the rise of counterfeit boards and cater to…

EU’s provisional deal on gig worker rights fails to get enough backing from Member States

Not so fast on that Christmas present for precarious gig workers in the EU: A political deal announced mid month, which aims to bolster platform workers rights…

Top robotics names discuss humanoids, generative AI and more

Last month, I took an extended break. In a bid to keep my robotics newsletter Actuator (subscribe here) up and running, however, I reached out to some…

Pornhub owner pays US government $1.8M to resolve sex trafficking probe

Pornhub’s parent company Aylo Holdings will pay $1.8 million to the U.S. government to resolve a charge of profiting off of sex trafficking. The company, formerly known…