How to create product variations & display as colour swatches, buttons etc.

You are here:
Estimated reading time: 1 min

WooCommerce has built-in functionality to make variable products. By definition, Variable products are a product type that lets you offer a set of variations on a product, with control over prices, stock, image and more for each variation. They can be used for a product like a shirt, where you can offer a large, medium and small and in different colors.

Creating product variations

I won’t explain how to create variable products and add product variations because there are literally a ton of articles & videos online on how to do it:

Create variation swatches (color, buttons etc.)

Rey theme uses WooCommerce Variation Swatches plugin which is the best free plugin for this sort of need. I tested over 10 free and commercial plugins and this one seems to be the most fastest, clean and feature rich amongst all.

To install this plugin simply head over to Appearance > Install plugins and you should find it listed there. Read more about installing Rey plugins.

And also tutorial on how to add variation swatches with WooCommerce Variation Swatches plugin:

Displaying variation swatches in product catalog listing

This plugin WooCommerce Variation Swatches is packed with this feature in its PRO version, so i have developed an alternative for displaying product variation swatches in the product listing.

Access Customizer > WooCommerce > Product catalog > Components and look for Variation Attributes section of options eg:

In the Attributes type please select the attribute type to show and its position.

Here’s an example with colors swatches:

Color swatches positioned before the title.

Allow selection of variations in product catalog

An alternative way of allowing visitors to add to cart and make variation selections inside the catalog is by enabling “Ajax Variables Popup” in Customizer > WooCommerce > Product catalog – Components eg: .

Enabling this option will allow this type of behaviour when clicking on the Select Options button:

Was this article helpful?
Dislike 0
Views: 2191

Join the conversation