Is it possible within WooCommerce to change the variations dropdown into radio buttons without having to work with a plugin? I would like to have the following setup on the variations section:
- 1 liter (10â¬)
- 2 liter (20â¬)
- 3 Liter (25â¬)
The price at the bottom should be automatically changed when you select an option.
EDIT: added
variation_check()
and JS variation checking thanks to @ThomasB!EDIT2: make sure
variation_check()
also checks for backorder status to allow selection when a product can be backordered.The best way I managed to get this working is to add radio button markup directly after the select dropdowns and then hide the select dropdowns using CSS. You’ll also need some custom JS to trigger the hidden select value changes so that your price will change according to the radio button you select.
Here’s how I added the markup:
And here’s the JS I used:
I don’t know how to do that without a plugin, but I suggest you drop that requirement, and use the Woocommerce Radio Buttons plugin. This does exactly what you want:
You can use Variation Swatches for WooCommerce plugin. It worked for me.
I extended further the JavaScript part of cfx’ answer to include cases of multiple variations. The idea is to hide and show available variations (radio buttons) based on the select inputs.