By default, WooCommerce displays variations as dropdown options on the product pages.
However, you can convert the variation options from the dropdown to button swatches in just a few clicks, using Variation Swatches for WooCommerce.
Once you have the plugin installed and activated, follow the steps below to do it easily.
1. Set Default Style For Swatches #
First, go to Dashboard > Swatches and look at the Generals tab.
Here, you will find the options to set the default shape, color, and border of swatches when:
- Normally displayed
- Hovered, or
- Selected.
Plus you will also be able to set the font size for Label or text swatches.
Configure these settings as you like.
2. Go To Controls Tab #
Click on the Controls tab on the left.
The Controls tab will have these options.
3. Enable Dropdown To Button Swatches #
Here, turn On the Dropdown To Button Swatches option.
Then save settings. Now you will see that the variations on product pages will be displayed in the form of button swatches.
Default Dropdown Selection
Button Swatches For Variations
Once you have enabled the dropdown to button swatches for your store, now you can customize swatches into color, image, or label swatches easily, in a few simple steps.
The next guide will give you a complete step by step process for this.
