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

By Marius HAugust 21, 20194 min read

Estimated reading time: 3 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.)

First, make sure to enable Rey’s Variation Swatches module in the backend Rey Theme > Modules Manager eg: screenshot .

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.

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 Settings › WooCommerce › Catalog › Product Card › Product Variations and look for Variation Attributes section of options eg: screenshot .

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 Settings › WooCommerce › Catalog › Product Card › Product Variations and look for Variation Attributes section of options eg: screenshot .

Here’s an example with colors swatches:

The alternative way of allowing visitors to add to cart and make variation selections inside the catalog is by enabling “Ajax Variations Form Pop-up” in Settings › WooCommerce › Catalog › Product Card › Add to Cart Button eg: screenshot .

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

Showing variation images instead of color

In some cases you might need to just show a variation’s image instead of the actual color. To do this, please enable “Use variation image” in the Attribute settings ex: screenshot .

Here’s also a short video how to do it recording .

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: screenshot . These kinds of attribute definitions are totally different than the standard Products > Attributes ones.

First things first, please head over to Settings › WooCommerce › Product Page › Summary Components › Product Variations and enable “Custom Attributes use Buttons” ex: screenshot .

* 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 screenshot .

add_filter('reycore/variation_swatches/custom_attributes', function( $data ){
	// Example setup screenshot .
	// "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;
});

Show 24 more linesShow less

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: screenshot .

You can alternatively access Settings › WooCommerce › Product Page › Summary Components › Product Variations and located the migrate button.

If the Migration banner is not showing up, please add this code snippet below 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.

add_filter('reycore/variation_swatches/settings', function( $params ){
	$params['always_show_migration'] = true;
	return $params;
});

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

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?