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):


Leave a Reply