Auto-Select a Variation Based on the Current Attribute
Ok, I guess, a picture is worth a thousand words, so please take a look at the screenshot below, of what I am going to explain to you in this tutorial.
Basically, you can use the URL of this page to send direct links to your customers in a format attribute-slug/attribute-term-slug (in our case, it will be color/grey), worth mentioning that it is also good for SEO.
Just a reminder – attribute archive pages should be activated for every attribute individually when you edit it in the WordPress admin dashboard using this checkbox:
Using the $_GET Parameter
This method actually works everywhere, on both product and product archive pages.
Everything you need to do is to add an extra parameter to the URL, which is attribute_{$taxonomy} with an attribute term slug as a value, for example, for the product page, it could look like this: /t-shirt?attribute_pa_color=grey.
After that, when visiting the product page of the “T-Shirt” product, the “Grey” attribute will be selected automatically.
You can also select multiple attributes by adding two parameters at the same time, for example: /t-shirt?attribute_pa_color=grey&attribute_pa_size=medium.
Using the Variation Swatches Plugin When Displaying the Swatches on Archive Pages
Of course, variation swatches are not displayed on your WooCommerce product archive pages by default. To display them there, you need a plugin, for example, Simple Variation Swatches for WooCommerce.
After you have the plugin installed, all you need to do is use the following plugin configuration in WooCommerce > Settings > Products > Variation Swatches.
Here we go, the result:
Having multiple WooCommerce attributes for products, with only one displayed on archive pages
Let’s say that your product has different types of attributes, “Color”, “Size”, maybe something else. It means that your products may have multiple variations for the same color. For example:
More than that, sometimes, variations of the same color may have different images depending on other attribute values!
The question is – how should it work with my plugin? Which variation will it automatically pick up? The answer to this question is pretty simple – if there is more than one available variation, the plugin can not just choose one itself. So the variation image won’t be updated automatically if you visit the attribute archive pages. However, the solution to that is pretty simple. All you need to do is select default values for other attributes, for example:
If you have any questions about this functionality, feel free to ask in the comments below.
Misha Rudrastyh
Hey guys and welcome to my website. For more than 15 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me