WooCommerce - Pre-select variation based on filtering

Question

I would like the variation on variable product to be automatically selected from the drop-down if the user enters from a filter results page.

For example if my store sells T-shirts and the user has filtered the product category based on size 'M' using the product filters, is there a way to have 'M' option pre-selected when the user clicks to the product page?

At the moment the user filters products by size 'M', clicks to the product page and then has to choose 'M' again from the variation drop-down list.

I'm using WooCommerce version 3.2.0

Answer 1

It depends on what you mean by "filter result page". If you are talking about using some GET parameters, it's enough to add the attribute value at the end of the product page URL.

Just like this: https://www.your-site.com/product/product-slug?attribute_size=M

Where attribute_size is the name of the attribute you are using for the product. If you are not sure about what is your exact attribute name (maybe because you didn't create it as a taxonomy, but you did it within the product backend interface) inspect on the frontend page the <select> tag data-attribute_name value. That's what you need.

<select id="color" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes">
  <option value="">Select an option</option>
  <option value="S" class="attached enabled">Small</option>
  <option value="M" class="attached enabled">Medium</option>
  <option value="L" class="attached enabled">Large</option>
</select>

Important

I tried with a couple of sites with Woocommerce installed but have different versions. I can tell you that it works with Woocommerce 3.3.5, It doesn't work with 2.5.5. Yours (3.2.0) is in between, but I'm confident you have this feature.

Answer 2

I just tried this and it works with the current version of WooCommerce by using the parameter: attribute_pa_slug

So if my T-shirt product has an attribute with the slug "color", and I want to preselect the "black" Term / Variation, I can use this URL:

https://www.mywebsite.com/product/tshirt/?attribute_pa_color=black