How to Configure WooCommerce Product Variation Swatches
The plugin setup process is pretty straightforward; however, if you need some guidance with it, below is the step-by-step configuration guide.
1. Install and activate the plugin
First things first, in your WordPress admin dashboard, go to the “Plugins > Add New Plugin” page and hit the “Upload Plugin” button. Once the plugin is uploaded, hit the “Activate” button.
Of course, WooCommerce must also be installed and activated on your website.
2. Configure product attributes
Whether your WooCommerce store already has product attributes or maybe you’re setting up your store from scratch, in any case, we need to visit the “Products > Attributes” page and decide which ones should be displayed as variation swatches.
To do so, click the “Edit” link near the attribute you need:
After that, select its type from the dropdown field and configure it:
As you can see, depending on the chosen attribute type, additional settings may appear. The following settings are available:
- Swatch width and Swatch height – you can set your custom width and height (in pixels) for “Color” and “Image” attribute types.
- Swatch shape – whether your variation swatches should be in a square or round shape (available for “Color” and “Image” attribute types).
- Limit number of visible swatches – this option is for product archive pages only. If, for example, your products have a lot of color options, it will be quite overwhelming to display all of them for every product in product categories and the “Shop” page. So, you can limit the number of swatches that should be displayed at once – the rest of them will be displayed when you hover over a product.
- Show labels – for “Image” and “Color” attribute types, you can additionally display a label below the swatch (on single product pages only).
- Show prices – If your product has only one variation attribute type, we can also display prices near every variation. This option is available for all attribute types.
Once we finish this part, it is time to configure attribute terms (for example, to set colors for every attribute swatch). To do that, we need to click the “Configure terms” link. After that, we click the “Edit” link near the attribute term we need:
Depending on the product attribute type, we will have different settings fields when editing an attribute term. For example, for a “Color” type attribute, the settings will be the following:
3. Variations availability settings
First of all, let me remind you that WooCommerce allows you to decide:
- whether you would like out-of-stock variations to be displayed in your store,
- or to hide all out-of-stock products and variations completely.
It can be configured in the “WooCommerce > Settings > Products > Inventory” page:
Not-available variations are always hidden. This is how WooCommerce itself works, and the variation swatches plugin simply adapts this behavior.
If the “Out of stock visibility” checkbox is checked, then the swatches for out-of-stock variations will be hidden as well; otherwise, they will be displayed the following way and can be selected:
It will also be applied to shop and product category pages.
4. Display variations on shop pages (optional)
Last but not least, let’s talk about scenarios when you need to allow variation selection directly from product archive pages. The following WooCommerce pages are considered to be product archives:
- the shop page,
- product category pages,
- product tag pages,
- archives by brand,
- archives by attribute,
- product search results page.
The product variation swatches will appear right before the “Add to cart” button if you check the “Allow attribute selection on shop and archive pages” checkbox in the plugin settings:
You can also see that some additional options will appear:
- Show only specific attributes on archive pages – it does exactly what it says. For example, let’s say you only want the color swatches to be displayed on the product archive pages, so you can select the “Color” attribute in this option.
- Replace product image on hover – when this checkbox is checked, the product image on the shop page will be switched when hovering over a variation swatch. By default, it is changed on click.
- Auto-select – allows you to automatically select a variation for all products depending on the current attribute.
Example of how it will look on the shop and product category pages:
Developer-friendly
The plugin comes with a bunch of WordPress filter hooks, which give you some room for customization, for example:
- You can change the size and shape of swatches for products in specific categories (or tags, or brands), or even for specific products (by ID or SKU).
- In the same way, you can configure whether to display or not prices and labels for products in specific product categories, tags, etc.
- You can add some custom HTML elements before or after a particular swatch.
The filter hooks are described with examples in the documentation.