Posted on

How to Display WooCommerce 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. “Variation Swatches for WooCommerce” Plugin (FREE)

This free plugin is downloadable from the WordPress repository and has more than 10,000 active installations.

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

2. “YITH WooCommerce Color and Label Variations” Plugin (FREE & PREMIUM)

YITH plugin comes in a free version (available on 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):

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

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

  1. 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?

  2. 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 🙂

  3. 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 🙂

  4. 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 🙂

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

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

  6. 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!

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

    1. Hey there – try asking the plugin support 🙂

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

  9. 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 🙂

  10. 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 🙂

  11. 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

  12. 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 🙂

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.