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

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:

• https://docs.woocommerce.com/document/variable-product/ (Official docs)
• https://www.ostraining.com/blog/woocommerce/product-variations/
• https://www.youtube.com/watch?v=kI8_YWJIr0E

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

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.

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.

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:

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:

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:

Adding color support for custom defined attributes

This applies for non taxonomy/attribute based variations. For example for “RED | GREEN | BLUE” kinds of attribute definitions, ex: https://d.pr/i/QhRQFl . These kinds of attribute definitions are totally different than the standard Products > Attributes ones.

First things first, please head over to Customizer > WooCommerce > Product page > Components in Summary > Product Variations and enable “Custom Attributes use Buttons” ex: https://d.pr/i/Wmh1TP .

* For the moment only Color swatch type is supported.

Finally, you will need to create a custom code which contains the color definitions and insert the code into the child theme’s functions.php (or a custom snippets plugin).

The code below is an example you can inspire from. This code will render this layout https://d.pr/i/zd3xbN .

add_filter('reycore/variation_swatches/custom_attributes', function( $data ){
	// Example setup https://d.pr/i/QhRQFl .
	// "Kolor" is an example ID of the custom attribute. Can be anything you define, ex: "Color", "Size", "Material", etc.;
	// "type" is the swatch type (only "rey_color" is supported);
	// "items" holds the data of each attribute, where the key (ex: "Red") must be be exactly how it's added (capitalized etc.)
	// Each attribute data entry supports "color", "secondary_color" and "image" keys, where "image" is the full path of the image.
	$data['Kolor'] = [
		'type' => 'rey_color',
		'items' => [
			'Red'   => [
				'color' => '#ff0000',
			],
			'GreenYellow' => [
				'color' => '#12cb66',
				'secondary_color' => '#eae607',
			],
			'Blue'  => [
				'image' => 'https://path/to/my/image.jpg',
			],
		],
	];
	return $data;
});

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.