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