If you sell variable products — t-shirts in different sizes, phone cases in different colors, or any product with multiple options — you’ve probably noticed WooCommerce’s default variation selector: a boring dropdown menu. Customers have to click it, scroll through it, and read plain text options one at a time.
The good news? You don’t have to live with the dropdown. In this guide, you’ll learn how to show WooCommerce variations as radio buttons instead, so shoppers can see every option — with images, prices, and stock status — at a single glance.
Why Replace the WooCommerce Variation Dropdown?
The native WooCommerce dropdown has a few real problems:
- Options are hidden — shoppers must click to even see what’s available
- No visual context — no color swatches, no size charts, no variation images
- Price and stock are invisible until an option is selected
- Slower decisions — hidden options mean more friction, and friction kills conversions
Radio buttons fix all of this. Every variation is visible immediately, so customers can compare options side-by-side and pick in a single click — which is exactly the kind of frictionless experience that improves add-to-cart rates.
The Easiest Way: Use a Plugin
You don’t need custom code or a developer to make this change. The Variation Dropdown to Radio Buttons for WooCommerce plugin does it out of the box, with zero configuration required.
Key Features
- Radio Buttons layout – styled, clickable cards instead of a dropdown
- Switch Box layout – modern card-style UI with image, price, and stock shown together
- HTML Select / Select2 layouts – if you want a cleaner or searchable dropdown instead
- Show variation image, price, and stock status directly on each option
- Out-of-stock handling – disable, strikethrough, or hide unavailable variations
- Custom variation labels – override auto-generated names per variation
- Lightweight – scripts/styles load only on single product pages, so there’s no site-wide performance hit
- Works with any theme – Storefront, Astra, Flatsome, Divi, OceanWP, and more
- HPOS compatible – works fine with WooCommerce’s High-Performance Order Storage
Step-by-Step Setup
- Install the plugin. Go to your WordPress dashboard → Plugins → Add New, and search “Variation Dropdown to Radio Buttons for WooCommerce,” or upload the plugin folder to
/wp-content/plugins/. - Activate it from the Plugins menu.
- Go to GM Radio Buttons in your admin sidebar.
- Choose your layout — Radio Buttons, Switch Box, HTML Select, or Select2.
- Toggle your display options — show images, prices, stock, descriptions, product title, etc.
- Click Save Settings.
That’s it. No shortcodes, no template edits — the plugin hooks into woocommerce_before_variations_form and works automatically on every variable product page.
Customizing Individual Variations
Want a variation to show a different label than the auto-generated one (e.g., “Ocean Blue” instead of “Blue – Large”)? Each variation gets a Custom Radio Product Name field inside the product edit screen under Variations — just fill it in and it overrides the default label.
Handling Out-of-Stock Variations
In the plugin settings, choose how out-of-stock options behave:
- Disable – greyed out, not clickable
- Strikethrough – visible but crossed out
- Hide – removed from the list entirely
This keeps your product page accurate without confusing shoppers.
Free vs Pro
The free version covers everything most stores need: all four layouts, images, prices, stock display, and out-of-stock handling. The Pro version adds:
- Column grid control (separate settings for desktop/mobile)
- Advanced image positioning
- More button styles
- Priority email support
FAQ
Does this work with any WooCommerce theme?
Yes — it’s compatible with all standard WooCommerce themes since it hooks into a native WooCommerce action, not a specific theme template.
Will it slow down my site?
No. Scripts and styles only load on single product pages.
Does it support products with multiple attributes (e.g., color and size)?
Yes, it renders all valid combinations regardless of how many attributes a product has.
Final Thoughts
Swapping the WooCommerce variation dropdown for radio buttons is one of the simplest UX upgrades you can make to a variable product page — and with a free plugin, it takes minutes, not hours. If your store sells anything with color, size, or style options, this small change can make a real difference in how easily customers convert.