Do you want to show WooCommerce variations as buttons? But you don’t know how to? You are in the right place, then. In this tutorial, I’ll show you how to display WooCommerce variations in the form of buttons.
You might want to show your WooCommerce product variations as clickable buttons. This will contribute to making the product page a bit clean and professional. However, WooCommerce doesn’t offer an inbuilt feature to do this. So I’ll use the Variation Swatches for WooCommerce Pro.
I’ll show you each step in detail with the help of images to help you understand the steps better. So, continue reading to check out how to show WooCommerce product variations as buttons.
Read Also: How To Display Variations on the Shop Page for WooCommerce
How to Show WooCommerce Variations as Buttons?
In this article, I’ll convert one of my WooCommerce product variations into minimal radio buttons. I have already mentioned the plugins we will use in this tutorial above.
So, follow the given steps to show WooCommerce variations as buttons in a few easy steps.
1. Install Variation Swatches for WooCommerce Plugin and Variation Swatches Pro Plugin
Note: You can skip this step if you have already installed and activated the Variation Swatches for WooCommerce and Variation Swatches Pro Plugin.
To install the Variation Swatches for WooCommerce Pro, you must install the Woosuite Core plugin and activate your Woosuite license key. We have created a Quick Start Guide to walk you through the installation process.
In the WordPress Admin Dashboard: Navigate to the Woosuite Submenu > Search for the Variation Swatches > Click on it.
After clicking on the ‘Variation Swatches’, it will straightly redirect you to the General setting. We will configure these given settings to show WooCommerce variations as buttons.
3. Convert Product Variations Into Radio Buttons
Follow the steps to convert product variations into buttons.
Note: Before converting the product variations into radio buttons, ensure that your eCommerce store has some variable products, which means products with different variations, such as colour, weight, etc.
1. Enable the Radio Button Swatches Feature
The first step is to enable radio button swatches to show your WooCommerce Variations as buttons.
Look for the ‘Enable Radio Button Swatches’ option in the’ General Setting’. Toggle on the button to enable radio button swatches to display variations on radio buttons.
2. Choose the Variation Type
Choose the variation type which you want to convert into radio buttons. For instance, if your WooCommerce store has different variations, such as weight, colors, sizes, etc.
You will see all the attributes in the ‘Select Attributes’ section. So, choose the attributes from the list of given options by checking the checkbox.
4. Save the Changes
Click on the ‘Save Changes’ button at the top-right corner of your current screen to save all the changes.
Final Results
We have now figured out how to show WooCommerce variations as buttons. We made all the settings correctly. We will now check whether everything is working fine or not. So, let’s check it.
I’m currently on the Product Page of my Demo WooCommerce store, and you can see that the variations are visible as radio buttons. These are the final results we got with the help of the Variation Swatches for WooCommerce Plugin and Variation Swatches Pro Plugin.
Read Also: How to Add Video to WooCommerce Products? [Step-By-Step Guide]
Conclusion
We finally checked out how to show WooCommerce variations as buttons. I hope you understood the steps properly and implemented the same on your WooCommerce store. If you face any issues while displaying WooCommerce variations as buttons, leave a comment or contact Woosuite customer support. Our dedicated customer support team typically replies within 48 hours.
Ready to Show WooCommerce Variations as Buttons?
Install Variation Swatches Pro Plugin today.
