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:

Image 2018 12 17 at 7.47.21 PM - Changing WooCommerce default dropdown to colored buttons

To something that looks like this:

Image 2018 12 17 at 7.44.15 PM - Changing WooCommerce default dropdown to colored buttons

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:

2018 12 14 14 51 22 Add Plugins ‹ SLYK — WordPress - Changing WooCommerce default dropdown to colored buttons

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:

2018 12 14 15 00 43 Dashboard ‹ SLYK — WordPress - Changing WooCommerce default dropdown to colored buttons

3 – Here we will have to edit our attribute, in our case “Colour”:

16cae1c806abe7e55b7a372c1282d69d Image 2018 12 17 at 7.54.07 PM - Changing WooCommerce default dropdown to colored buttons

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:

22e89d024906548631ed4804f56accfb Image 2018 12 17 at 7.56.22 PM - Changing WooCommerce default dropdown to colored buttons

5 – Now we have to get back to the Attributes page and press “Configure terms”:

a080d5fdafc224eb232597fbae24a27f Image 2018 12 17 at 7.59.25 PM - Changing WooCommerce default dropdown to colored buttons

6 – Here we have to edit our Attributes to select its own unique styling. In our case, its own color:

7d6ee280141d36d33d5be22d5c7e396a Image 2018 12 17 at 8.01.20 PM - Changing WooCommerce default dropdown to colored buttons

7 – Now we have to press “Select color” and select our color then press “Update”:

9a72b6988811035b9e3ff1fea98e1503 Image 2018 12 17 at 8.02.26 PM - Changing WooCommerce default dropdown to colored buttons

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.

Share This