Variation Dropdown to Radio Buttons for WooCommerce

Beschreibung

Variation Dropdown to Radio Buttons for WooCommerce converts the standard WooCommerce variation <select> dropdown into beautiful, clickable radio buttons, switch boxes, or enhanced select controls — making it easier for customers to browse and choose product variations without hunting through a dropdown list.

Customers can see all available options at a glance, compare prices and stock status side-by-side, and select a variation in one click. The result is a faster, more intuitive shopping experience that reduces friction and increases add-to-cart rates.

Get the Pro Version for advanced layouts, image controls, column grids, and priority support.

Why Replace WooCommerce Dropdown Variations?

The default WooCommerce dropdown hides all your variation options inside a collapsed select box. Shoppers must click, scroll, and read through a plain list — often missing options entirely. Radio buttons surface every variation immediately, letting customers see images, prices, and stock at a glance before they click.

Studies consistently show that visible product options reduce decision friction and increase conversion rates in e-commerce.

Core Features

  • Radio Buttons layout — replaces variation dropdowns with styled radio button cards
  • Switch Box layout — modern card-style layout with image, price, and stock
  • HTML Select layout — clean, accessible native select element
  • Select2 layout — searchable, styled dropdown powered by Select2
  • Show variation image — display variation thumbnail inside each option
  • Show variation price — surface price differences directly on each button
  • Show stock availability — display In Stock / Out of Stock per variation
  • Show variation description — include variation description text beneath each option
  • Show product title — prepend the parent product name to each variation label
  • Out-of-stock handling — disable, strikethrough, or hide unavailable variations
  • Custom variation name — override the label per variation from the product edit screen
  • Lightweight and fast — scripts and styles load only on single product pages
  • Zero configuration — works immediately after activation with sensible defaults
  • Column grid control — set exact column counts for desktop and mobile independently
  • Image position — place variation image left, above, or below the variation label
  • Button style options — card, minimal, outlined, and more
  • Priority email support — direct access to the development team
  • Early access — first access to new layouts and features

Upgrade to Pro

Documentation & Support

Full setup guide, screenshots, and developer hooks are available in the plugin documentation.

For questions, bugs, or feature requests, visit the support page or open a thread in the WordPress.org support forum.

Works With

  • WooCommerce 5.0 and above
  • Simple variable products with any number of attributes
  • All major WooCommerce-compatible themes (Storefront, Flatsome, Astra, Divi, OceanWP, and more)
  • Page builders: Elementor, WPBakery, Beaver Builder, Gutenberg

Screenshots

  • Radio Buttons layout — all variation options displayed as clickable cards with image, price, and stock status
  • Switch Box layout — modern switch-style cards with configurable image position
  • Select2 layout — searchable, styled dropdown with variation images
  • Plugin settings panel — React-powered settings page with General, Appearance, and Display Options sections

Installation

  1. Upload the gm-variations-radio-buttons-for-woocommerce folder to /wp-content/plugins/, or install directly from the WordPress plugin directory.
  2. Activate the plugin through the Plugins menu in WordPress.
  3. Go to GM Radio Buttons in the WordPress admin sidebar.
  4. Choose your preferred layout (Radio Buttons, Switch Box, HTML Select, or Select2).
  5. Toggle display options to your preference and click Save Settings.

No additional setup is required. The plugin activates on all variable product pages automatically.

FAQ

Does this plugin work with all WooCommerce themes?

Yes. The plugin hooks into woocommerce_before_variations_form and renders its own markup before the native WooCommerce variation form. It is compatible with all standard WooCommerce themes including Storefront, Astra, Flatsome, Divi, OceanWP, and Blocksy.

Will it slow down my website?

No. The plugin’s CSS and JavaScript files are enqueued only on single product pages (is_product()), so they have zero impact on every other page on your site.

Can I show a different name for each variation?

Yes. Each product variation has a Custom Radio Product Name field added in the variation panel. If filled in, it overrides the auto-generated variation label.

What happens to out-of-stock variations?

You can choose one of three behaviours in the settings: Disable (greyed out, not selectable), Strikethrough (visible with a strikethrough style), or Hide (removed from the list entirely).

Can I control how many columns the variations display in?

Column control is available in the Pro version, with separate settings for desktop and mobile breakpoints.

Does it support variable products with multiple attributes?

Yes. The plugin renders all variation combinations for products with any number of attributes.

Is it compatible with WooCommerce High-Performance Order Storage (HPOS)?

Yes. The plugin does not interact with the orders table and is fully compatible with HPOS / Custom Order Tables.

Where can I find the documentation?

Full documentation is at https://www.codesmade.com/variation-dropdown-to-radio-for-woocommerce-documentation/

Rezensionen

Alle 3 Rezensionen lesen

Mitwirkende und Entwickler

„Variation Dropdown to Radio Buttons for WooCommerce“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

Änderungsprotokoll

3.0

  • Rebuilt settings panel with React — no page reloads, instant save feedback
  • Added Switch Box layout with configurable image position (left, top, bottom)
  • Added Select2 layout with searchable styled dropdown
  • Added out-of-stock action setting: disable, strikethrough, or hide
  • Added column grid control for desktop and mobile (Pro)
  • Added per-variation custom name field in the product editor
  • Removed dependency on @wordpress/components — all UI components are now custom-built
  • Light theme for admin settings with Docs, Support, and Upgrade to Pro header links
  • REST API endpoints for settings get/save
  • Performance: scripts and styles now load only on is_product() pages

2.0

  • Added image display inside radio buttons
  • Added price display per variation
  • Added stock availability display
  • Added variation description display
  • General settings panel redesign

1.0

  • Initial release — basic dropdown to radio button conversion