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

You are here:
Estimated reading time: 2 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.

Before starting, please know that everything explained below is available for Rey's own Variation Swatches module added in Rey v2.2.0+, which requires the previously demo-suggested "Woo Variation Swatches" plugin to be disabled (or any other kind of variations swatches plugin you might have installed before, in order to avoid duplicate functionality that could slow down the site).

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

First, make sure to enable Rey’s Variation Swatches module in the backend Rey Theme > Modules Manager eg: https://d.pr/i/IQVYsy .

Head over to Products > Attributes and either create or edit an existing Attribute.

In the Attribute form, inside the Type list you will find several types of swatches, more exactly:

  • Button
  • Image
  • Color
  • Radio
  • Large button
Swatches types example.

Depending on what you choose, you can customize other options, such as styles or wether to show a tooltip or even to replace the content with the variation’s image.

Example of attribute options.

Setting color or image on attribute items

Add or edit an attribute term but before make sure the parent Attribute is properly set to either Color, Image or Button.

Choose a color or an extra secondary color. Or even replace it with an image.


Displaying a single variation swatch in product catalog

You can choose a single swatch inside the product items in the catalog.

Access Customizer > WooCommerce > Product catalog > Components and look for Variation Attributes section of options eg: https://d.pr/i/Aklnh4 .

You can choose which attribute to show, its position (before title, after title etc) and various styling options as well as limiting how many to display.

Here’s an example with colors swatches:

Color swatches positioned before the title.

Displaying all variation swatches in product catalog

List of all variation swatches:

You can also choose to display all swatch inside the product items in the catalog.

Access Customizer > WooCommerce > Product catalog > Components and look for Variation Attributes section of options eg: https://d.pr/i/9rySjf .

Here’s an example with colors swatches:

Showing all swatches inside products.

Ajax variations popup:

The 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: https://d.pr/i/9OiX1g .

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


Migrating from WooCommerce Variation Swatches plugin

If you previously used “WooCommerce Variation Swatches” plugin, you can simply disable it and access either the backend Products > Attributes and a new banner should display eg: https://d.pr/i/RKyndA .

You can alternatively access Customizer > WooCommerce > Product catalog – Components and located the migrate button eg: https://d.pr/i/36Ao7E .

If the Migration banner is not showing up, please add this code snippet https://d.pr/n/LI4nzw into the child theme and it should force the Migration banner to reappear to try again. Make sure to remove it after you’re done.

Note * : The styles are not migrated. You will need to manually configure the styles inside the Attribute swatches settings or Customizer.

Note ** : In case the migration doesn’t seem to do anything, it’s likely because of some cache. Try editing any Attribute and without any change, just hit the Update button. It should flush the cache.

Was this article helpful?
Dislike 0
Views: 4178

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!