You can enjoy the following features using the basic version of VariationX – Variations as Radio Buttons for WooCommerce.
Convert to Radio Buttons
- Drop-downs to Radio Buttons
- Variations to Radio Buttons
Drop-downs to Radio Buttons
- Highlight Unavailable Attributes
VariationX Features for Drop-downs to Radio Buttons
Variations to Radio Buttons
- Highlight Unavailable Variations
- Radio Button Appearance
- Insert Blank Option
VariationX Features for Variations to Radio Buttons
You should already know that VariationX can convert the default WooCommerce drop-down select types or individual variations into radio buttons. Based on your selection, the plugin will display the related settings options. Thus, Convert to Radio Buttons comes as the first settings option for VariationX. Convert to Radio Buttons comes with the following options:
- Drop-downs to Radio Buttons
- Variation to Radio Buttons
Drop-downs to Radio Buttons
WooCommerce, by default, displays drop-down select options for Variable Products. Drop-downs to Radio Buttons will transform the default drop-downs into eye-catching radio buttons. VariationX comes with this option selected (enabled) by default. Upon plugin activation, you will have radio buttons for attribute selection (rather than the default drop-down).
Here is a screenshot of how Drop-downs to Radio Buttons will transform your WooCommerce Variable Products.
Drop-downs to Radio Buttons on Product Page
Variation to Radio Buttons
Usually, product variations of a Variable Product are combinations of multiple attributes. For example, color and size are the most common attributes for apparel. For mobile phones, color, RAM, and storage are the most common attributes.
Rather than displaying the attributes separately, Variation to Radio Buttons combines the attributes and displays individual variations as radio buttons.
This is how your product pages will look with the Variation to Radion Buttons option enabled.
Variations to Radio Buttons on Product Page
Related Features for Drop-downs to Radio Buttons
- Highlight Unavailable Attributes
VariationX can highlight unavailable attributes or variations. As a result, your customers will know which options are unavailable rather than wasting time exploring them.
If you have chosen the Drop-down to Radio button, you can highlight the unavailable or out-of-stock product attributes radio buttons.
You can choose between the following three styles:
Blur
This will blur out the unavailable (out-of-stock) attributes on the product page. Please refer to the following screenshot to see how Blur works on the product page.
Drop-downs to Radio Buttons – Highlight Unavailable Variations (Blur)
Blur and Cross
VariationX comes with Blur and Cross selected by default. In addition to blurring out the unavailable (out-of-stock) attributes, this option adds a red cross over them. As a result, the unavailable attribute gets more highlighted.
Please refer to the following screenshot for reference.
Drop-downs to Radio Buttons – Highlight Unavailable Variations (Blur and Cross)
Hide
We believe that you have already guessed the output of this option. Yes, this option will hide the unavailable (out-of-stock) attributes.
You will get the following output with Hide for the product in our previous example (Blur and Cross).
Drop-downs to Radio Buttons – Highlight Unavailable Variations (Hide)
Related Features for Variations to Radio Buttons
- Highlight Unavailable Variations
- Radio Button Appearance
- Insert Blank Option
Highlight Unavailable Variations
If you have chosen Variation to Radio Buttons, you can highlight unavailable (out-of-stock) variations using this option. It will highlight the unavailable variation at first glance for your customers. You can apply the following effects to highlight the unavailable variations:
Blur
This will add a blur effect for individual variations when they are unavailable (out of stock). As a result, your customers will be able to distinguish available and unavailable variations from their outlook.
Please refer to the following screenshot to see the Blur effect on individual variations.
Variations to Radio Buttons – Highlight Unavailable Variations (Blur)
Blur and Cross
In addition to adding the blur effect, this option will also add a cross-out over the unavailable (out-of-stock) variations. This option is enabled by default.
Please refer to the following screenshot to visualize the effect.
Variations to Radio Buttons – Highlight Unavailable Variations (Blur and Cross)
Hide
Rather than highlighting the unavailable variations with Blur and/or cross, this option will completely hide them from the product page.
It will produce the following output for the product in our previous example.
Variations to Radio Buttons – Highlight Unavailable Variations (Hide)
Radio Button Appearance
While displaying individual variations as radio buttons, you can choose between two views.
- List View
- Grid View [Premium]
List View
If you are using the basic (free) version of VariationX, the List View option is available for you. List View displays individual variations as a list of radio buttons.
The following screenshot illustrates List View for Variation to Radio Buttons.
Variations to Radio Buttons – List View
Grid View
Grid View is available as a premium feature (with VariationX PRO). More details about Grid View here.
Insert Blank Option
You can display a blank option with the individual Variation as Radio Buttons using this feature. It offers a quick way to clear the selected variation.
Here is what the blank option will look like with the radio buttons:
Variations to Radio Buttons – Insert Blank Option
The Blank Option transforms into a clear button. Thus, you can quickly clear the selected variation using it.
Blank Option Turns into a Clear Button
Note: You can only use the Insert Blank Option while converting individual variations to radio buttons. It does not work when the Bulk Cart feature is enabled.
Was this article helpful?
YesNo