Overview
You might wonder how you can transform the default variation dropdown from WooCommerce with a custom variation input with colors for example.
In other words you might want to transform something that looks like this:
To something that looks like this:
That might sound harder to accomplish than it actually is. Here you have a step by step guide on how to get that custom look with the colored buttons.
Solution
1 – You need to get a plugin for variation swatches, our recommendation would be WooCommerce Variation Swatches but there are multiple options of plugins. We also tried Variation Swatches for WooCommerce but in our case, it wasn't as effective as we needed it to be since it had some design issues. Here you have a screenshot to see how the plugin that we recommend looks in the WordPress plugin marketplace:
2 – Now that we have the plugin installed and activated we can get straight to configuring our WooCommerce Attributes to have our custom buttons. To do that you would need to go to Product -> Attributes in your WordPress dashboard:
3 – Here we will have to edit our attribute, in our case “Colour”:
4 – Here you click the “Type” dropdown and select the type that you need for your attribute, in our case “Color”. And press the “Update” button:
5 – Now we have to get back to the Attributes page and press “Configure terms”:
6 – Here we have to edit our Attributes to select its own unique styling. In our case, its own color:
7 – Now we have to press “Select color” and select our color then press “Update”:
8 – Repeat the last 2 steps for every term that your attribute has and then you should have custom looking variations globally in your shop.
In Conclusion
Is it such a hard and complicated process to have your custom designed buttons on the shop page? Let us know in the comments.
