Variable Products

How to Display Variations with Color (or Size) Buttons

In this tutorial I will show how you can change the way the variation selection is working on the product page in WooCommerce.

We all know that by default the variations are displayed like a select dropdown.

default variation switcher on WooCommerce product page
Wouldn’t it be better to use color swatches here?

But today we will learn how to display them as color swatches. If you would like to display them as size buttons or custom images, you can do it with my plugin.

This is our goal for this tutorial:

WooCommerce display color variations with buttons

How to Add Custom Fields to Product Variations

Long time ago I published a tutorial where I described how to add custom fields to WooCommerce products. Now it is time to dive deep into product variations and add a couple settings fields there as well.

Variation Change JavaScript Events

Sometimes you need to do some stuff when your WooCommerce product variation has been changed. Maybe only for a specific variation.

Primarily there are two JavaScript events that are triggered after a variation change.