WooCommerce: How to Display Variations with Color / Size Buttons?

Displaying product pages nicely is the entrepreneur’s dream.

Good UX means a much higher probability the interested customer is going to add to cart and complete the checkout.

However, WooCommerce variable products come with annoying dropdowns for each attribute (color, size, style, etc. depending on what options you have set up). And as you’ve already got a hint of my personal opinion, dropdowns are UX-killers.

Today, we take a look at handy plugins you can use to display product options (variations) in a user-friendly way. I’ve used these on many websites and they’re pretty reliable. As usual, it’s just the click of a button!

1. YITH WooCommerce Color and Label Variations Plugin (FREE & PREMIUM)

YITH plugin comes in a free version (available in the WP Repository) and a premium version.

While the free version allows you to create color type, label type and image type attributes, the premium version gives you additional features. These are the best ones in my opinion:

  • You can display a description of each attribute in the single product page
  • You can show a tooltip for each attribute
  • You can customize color and entrance animation of the tooltip
  • You can change the product image dynamically when hovering the mouse over the attribute
  • You can show all the attributes in the “Additional Information” tab

Here are a few screenshots (click on any image to open lightbox):

2. WooCommerce Attribute Swatches Plugin (PREMIUM)

IconicWP has a nice plugin that replaces the variation dropdowns with image, color and text swatches. I know James Kemp (IconicWP developer) well, and you can be assured you’d invest in a properly coded, lightweight plugin that generates a smooth, beautiful display.

It also goes to edit the WooCommerce product filters, applying the same design you’ve decided to add to your variable product swatches.

On top of that, it adds nice swatches on the shop/category page as well, so that customers are already able to switch their choice from there.

3. YaySwatches – Variation Swatches for WooCommerce Plugin (FREE & PREMIUM)

If you have a WooCommerce shop, as a merchant, you should definitely use YaySwatches to impress your customers and regular site visitors. It comes with a simplified interface that is super easy to set up even if you’re not a techie.

This WooCommerce variation swatches plugin will import all existing WooCommerce attributes and their terms/values into a centralized dashboard where you can add variation colors, dual colors, and image swatches.

Setup steps are easy to follow:

  • Choose a display type for each attribute: Color or custom image swatch, automated variation image swatch, button, radio button, and more.
  • Customize the color profile for your variation selector such as button text color, button background color, swatch border, hover effect and the like.
  • If you’re using the YaySwatches Pro version, you will have extra customizations including shop/category swatches display, out-of-stock variation visibility, Ajax support, and more to come.

Not only that, this plugin offers support for custom product attributes. And when you want to set up a specific product with a different set of swatch images, YaySwatches also got it covered.

Backed by a 30-day refund policy and VIP live chat support, it is worth trying and you are free to explore all the premium features completely risk-free.

4. Variation Swatches for WooCommerce Plugin (FREE)

This free plugin is downloadable from the WordPress repository and has more than 80,000 active installations. However it hasn’t been updated since June 2020 and support seems unresponsive. To me, that’s a big red flag.

Variation Swatches for WooCommerce Plugin

a) Edit Existing Attributes e.g. “Color”

Once the plugin is installed, go to WordPress Dashboard > Products > Attributes and open one of the existing attributes, for example “Color” if you have it already.

The attribute edit page will now have a new select field called “Type”. You can now pick “Color” from the drop-down to indicate you want this attribute to show as a color-picker.

Edit attribute – Variation Swatches for WooCommerce

b) Edit Existing Attribute Terms

Now that the attribute has been assigned to a variation swatch (color), it’s time to assign the right color to each attribute term.

If you have red, blue and yellow, you will open each term and pick a color for each one (#ff0000, #0000ff and #ffff00 respectively).

Assigning colors to the Color Attribute terms – Variation Swatches for WooCommerce

c) Check Out the Single Product Page

That’s it really! Once you save the colors, the single product page will automatically show colors as swatches.

Final result with color swatches – Variation Swatches for WooCommerce

Related content

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

60 thoughts on “WooCommerce: How to Display Variations with Color / Size Buttons?

  1. Have you got an example of one custom coded rather than plugin for a simple variations. I.e. buttons instead of a drop down?

    I really enjoy your resources on the various snippets you have published so was hoping you had a basic one for swatches as well.

  2. I used it with Astra Them Great! Thanks

  3. sir available color are already show on product detail page but i want to show available color on the product,

    1. Ask the plugin devs please sir

  4. Hello, i buy a plugin for variaton pictures and all, but i have a problem i have in one product color and size so example is 3different color and 3 different size but i don’t have all in stock so i try to manage stock but i can buy variaton i need to than put one product by color inside and than by size by bout together is not possibile to manage stock. can you please help me with that how to fix it.

    1. Hi Sebastian, please contact the plugin developers

  5. can i make this without using any plugin. I want to make it from scratch.

    1. Yes, you can, but it will take you several hours – not sure it’s worth it

  6. Hi, I try to display the background color of the color in square but it’s does’nt work 🙁 on my project.

    I have the storefront theme, woocommerce plugin and Variation Swatches for WooCommerce plugin.

    Can you help me, please ?

    Thanks, Aurélie.

    1. Aurelie, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  7. Thank you for another great article.
    I tried Variation Swatches for WooCommerce yesterday and it worked perfectly for single products.
    Since I have a lot of bundled products, I realized quickly though, that it will not work there.
    I suppose bundled products are a different beast and if I would like to have it work there, this will require custom coding?

    1. Hi Anne 🙂 Please ask the plugin developer, you never know!

  8. Hi Rodolfo,
    it is nice plugin and useful. I have a question. My requirement is:
    => can i make step by step select variation like first select product size until use can’t see another variation like pagination type

  9. Hi can you please tell me how to change the variations in size looking large square button which on click show ,”added” in the front of button and selected but not added in the cart and you can choose multiple product and at the end there is add to cart button which adds all the product in to the cart

    1. Not sure Monika, ask the plugin devs please

  10. Hi mate,

    Do you know if it is possible for the sizes to be greyed out when out of stock? Otherwise the user has to click to find out..

    1. Hello Brett, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  11. Hi Rodolfo,
    Great article, thanks.
    How can I change the “Add to Cart” button background colour before selecting a colour option? Now it’s purple and I like to be grey.

    Also, how can I remove the grey background of the colour selection area?

    Thanks,
    Laura

    1. Hello Laura, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  12. What is the theme you are using?

    1. Storefront

  13. Hi Rodolfo,

    I have installed the plugin but size variation is still showing in dropdown. i want size variation in box as shown in above image of your post.

    1. Hey Manoj! Ask the plugin support team please 🙂

  14. Hello Rodolfo
    I have two variations selectors: Size and Color
    They are displayed in front end alphabetically.
    I wnat to my costumer to chose Size BEFORE COLOR
    Where can i set this order of form selectors?
    Is it possible?

    1. Hello Adriano, thanks for your comment! Check the WooCommerce official documentation, it’s there somewhere 🙂

  15. Hi Rodolfo,
    Nice post and you are the savoliour everytime. I have a condition kindly let me know if you can brief about that.
    I want to show every color variant of a product as individual product in shop how this can be achieved. For example let suppose i have created a product with two colors red and green with different sizes. so now i want both varient should be visible in store individually. one red and one green. If any user visit any product both option should be present there.

    Is this achieveble in woocommerce if yes let me know how

    Thanks
    Rahul Chauhan

    1. Rahul, thanks for your comment! This plugin should help: https://businessbloomer.com/Variation-Products

  16. Thanks Rodolfo! Do you have more posts on how to make a product page that looks just like the one in this example? It’s BEAUTIFUL and I’d love to arrange the sections like “Reviews” at the top and so on. Please link me to any other resources.

    Noé

    1. Hey Noe, thanks for your comment! I think that’s just the theme. You can start learning how to rearrange stuff with this: https://businessbloomer.com/woocommerce-customization-hangout/

  17. Great idea for single product cart.

    1. Nice 🙂

  18. Hi Rodolfo,
    I have installed YITH plugin in the color option it is showing the name of the color i want color bubble, how to show it on my website.
    Thanks
    Prabhat

    1. Hello there! Please ask YITH support

  19. Hi Rodolfo, I know it is off topic but I am searching the solution to change the default Woocommerce product number add to cart. What I am exactly would like to find is it on the picture above. The – 1 + Add to cart solution. May I ask some hints?

    1. Hello Ferenc! I think that’s pure CSS if you want to achieve the same result, looks like a 1px border with border radius and grey background. Did I understand correctly?

  20. Hi, I know this might be out of the context but I have a question. My requirement is:
    – Have a pop-up with select box which will show all the products.
    – Based on the product selected, another select box will populate the corresponding sizes. So for example: if TShirt was selected from first drop down then this will show values like ‘S,M,L,XL’ but if Banner was selected then show ‘ 10″*15″, 5″*10″‘ etc.
    – Have a field for customer to upload an image before they add it to the cart

    Do you think this plugin is helpful or is there any plugin which can help without writing custom code?

    1. Hey Sunny, thanks for your comment! For this kind of “dynamic” select, variations are not enough. I recommend using a “Product Add-On” plugin maybe 🙂

  21. hi is possible to display the color name on color swatches instead of color only?

    1. Hey Aries, thanks so much for your comment! Try asking the plugin support team please 🙂

  22. I have a situation where I have 625 size ranges (width height) and also 36 colour variations for each! ie 22500 variations.
    Any suggestions for how to accommodate such a huge number without getting a huge server to crush them? Currently the load time is unacceptably long.

    1. Hey Paul, thanks so much for your comment! In this case I would not use variable products, I would look into https://woocommerce.com/products/product-add-ons/ if I were you 🙂

  23. can it change “Variable product input fields size”

    1. Thay Than, thanks for your comment! I’m not sure, please ask the plugin support 🙂

  24. I’m using this plugin and it works well. But I want the swatches to be displayed on the shop page below the product image. Is it possible to do this?

    1. Hey Mike 🙂 Ask the plugin support please!

  25. The plugin shows me only two option for type….text and select??

    1. Hey there – try asking the plugin support 🙂

  26. Excellent. Much help in making my product page better. Thank BB.

  27. I cannot get the WooCommerce Color Swatch plug in to work. I am using the Illdy WordPress theme.

    1. Cynthia, thanks so much for your comment! Try asking their support team, they should be able to help 🙂

  28. I try to use this plugin this 3 weeks but it doesn’t works and I dont know why. I follow the steps but nothing appear

    1. Thanks for your comment Romain! Try asking their support team 🙂

  29. Nice post. But I want this with the theme not using a plugin. Do you have related to this?

    1. Hey Darshan, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  30. Thank you so much! I have recently discovered your Blog and look forward to going through all of the different suggestions to see where they can be used for my site. I have installed the Variations Swatches Plugin and I would like to use for size verses color in your example. I see on your single product page above you have the Sizes with Images installed already. How do I do that can you walk through that like you did for the color?

    1. Excellent Stephen 🙂 For the size, you simply need to select a different “type” instead of “color” called “label” – you can then assign labels to each size. Hope this helps 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *