Woocommerce - How To Link to Product Variation?

Question

I am trying to find a way to have a link to a specific product variation.

I thought I had it solved with this plugin... https://wordpress.org/plugins/woocommerce-direct-variation-link/

However the I have 2 word product attribute names and can't seem to get it to work? I put _, -, & and + between the 2 words but not go.

Here is the doc...In my case I would have "color style" instead of just "color" mysite.com/product/happy-ninja/?color=blue

mysite.com/product/happy-ninja/?color=blue&size=small (additional variations should be separated by '&')

mysite.com/product/happy-ninja/?color=blue+green (where the variation value is "Blue Green" with the space replaced by a '+')

score 25 · Answer 1 · edited Apr 19 '18 at 13:10

25

Further to the last poster, I couldn't get his code to work properly, but I did discover that WooCommerce generates these for the Cart most of the time:

Visit a variation product yourself
Add a variation to the Cart
Open your cart and hover over the item --> the link in your status bar (or right click > Copy Link Address) is it!

It should have a suffix like this: http://website.com/product/product-name/?attribute_colours=Grey

Note that colours is lowercase because it's the slug while Grey is the actual name for the Variation.

For spaces in your Variation name, use a + instead of the space.

For selecting multiple variation attributes, I believe you can just start with & and spit the ?attribute_[slug]=Variation again.

edited Apr 19 '18 at 13:10

mnille

1,328
4
16
20

answered Apr 19 '18 at 11:37

Ashwin Anandani

334
3
4

3

Yeah, adding to cart, then clicking the link, and grabbing it from the address bar, super easy and reliable way to generate these links that auto-select the attribute. Thanks! – OG Sean Mar 26 '19 at 21:16
By far the simplest solution on this page. No plugins needed. – Gfra54 Nov 21 '19 at 14:28
First I thought I need yet another plugin to link to a specific variation product. After my search query I landed on this post with very clear explanation. Figured it out in less than 1 min. Thank you! – Resul Cimen Dec 02 '19 at 19:19

GDY · Answer 2 · 2021-04-06T12:17:18.300

I think many will search for a solution to link specific variations by a url parameter so here is a longer answer for that topic.

As many others mentioned here, you can access any variation with the attribute parameter. The way you choose an variation on the product details page is an select menu. The name attribute of that select is the parameter name and the options value attribute is the parameter value. Here is an example:

If you want to link the highlighted variation your link will be like https://example.com/some_product/?attribute_pa_size=small

Of course you can add multiple parameters like https://example.com/some_product/?attribute_pa_size=small&attribute_pa_color=red

The thing is, using dev tools to dig out these informations is not a very convenient solution. Down below is a code snippet you can add to your themes functions.php (or inside a simple one-file-plugin) that shows a variation-permalink in the wordpress admin of the specific product variation tab/accordeon.

add_action( 'woocommerce_product_after_variable_attributes', 'gdy_add_wc_varition_permalink', 100, 3 ); 
 
function gdy_add_wc_varition_permalink( $loop, $variation_data, $variation ) {
    
    echo '<a href="' . get_permalink( $variation->ID ) . '" target="_blank">' . __( 'Permalink for this variation' ) . '</a>';

}

user7380555 · Answer 3 · 2017-01-24T13:03:52.870

I have tried so many solutions and plugins myself, but i found a way to easily do it without a plugin. I'm not sure if this worked back in oktober 2015, but it does work now.

I have explained it in this youtube video https://www.youtube.com/watch?v=Y_hMI4bXN6A

What you want to do is add something like '/?attribute_color=red' behind your product.

website.com/shop/product1/?attribute_color=red
website.com/shop/product1/?attribute_length=10m

However what i found out by trial and error is what matters is the type of attribute you use. You can add a attribute in 2 ways, a pre-made one (text/select) or a custom attribute. Linking directly with this method only works if you create a custom product attribute.

For it to work you have to pay attention if you used capitol letters or not. For the name of the custom product attribute it wont matter if you use capitols in the backend (as long as you dont use theme in the url). For the values however you can only use normal letters and no capitols, both in the backend as in the url itself.

Example

Name: Color

Values: red | Black, green

website.com/shop/product1/?attribute_color=red > will work
website.com/shop/product1/?attribute_Color=red > will not work
website.com/shop/product1/?attribute_color=Red > will not work
website.com/shop/product1/?attribute_color=Black > will work
website.com/shop/product1/?attribute_color=black > will not work

I have explained it in this youtube video https://www.youtube.com/watch?v=Y_hMI4bXN6A

Please explain the solution in full rather than including links, which can break — CallumDA, Jan 05 '17 at 17:47
Altough I dont think the Youtube link will break, you are right. I will add the sollution here in text — user7380555, Jan 24 '17 at 12:48
THE YOUTUBE LINK IS BROKEN!!!! Kinda hilarious seeing your last comment. — KYSSE, Aug 28 '18 at 19:50

score 5 · Answer 4 · answered Mar 18 '18 at 15:25

5

You can just:

$variation_product_url = $variation_product->get_permalink();

WooCommerce handles the rest; adding the correct parameters to the url.

answered Mar 18 '18 at 15:25

Unicco

2,466
1
26
30

A very similar structure works if you don't have the actual product object but the product id: get_permalink($variation_id); – Victoria Ruiz Oct 05 '20 at 20:02

score 3 · Answer 5 · answered Apr 26 '17 at 20:16

I am using a plugin Variation Swatches for WooCommerce so I am not sure if this is core wordpress / woocommerce functionality or not.

What I did was open one of my products and in ""Product data" went to "Linked Products" tab and linked one of my variations to the product. Updated and went to the product page. After clicking on the linked product I got url that looks like this:

example.eg/product/product-name-slug/?attribute_pa_kids-size=27&attribute_pa_color=navy

following ?attribute_pa_ is my attribute name slug (kids-size) and following = is slug for the single attribute slug (27, 28, blue, red, navy ...). As you can see it works for multiple attributes in url. If you don't know your slugs, just link your variation product to another and copy the link.

This plugin requires very little customization and as far as I have tested it, it works fine. — T04435, Aug 06 '17 at 20:01

score 2 · Answer 6 · answered Jan 08 '19 at 14:33

You can create direct links to variants in any case, meaning both with variants using custom attributes and variants using predefined attributes.

There is just a slight difference in the URL parameter you need to append to the URL.

Examples:

Custom attribute variant URL:

domain.com/shop/product-x/?attribute_color=blue

Predefined attribute variant URL:

domain.com/shop/product-x/?attribute_pa_color=blue

The only difference is "pa_".

Note: The question is quite old, but I got here and didn't find a full answer, so figure I'd add it for others to benefit from.

score 1 · Answer 7 · answered Jul 28 '16 at 01:12

1

I have not tested this, but try replacing your space in your variation name to %20 which is the url-encoded version of the space character.

answered Jul 28 '16 at 01:12

Richard Aubin

11
2

score 1 · Answer 8 · answered Aug 21 '21 at 23:00

Another easy way to get the links without taking time to add then copy from cart is to export the product information in XML format then searching for your product in XML file and copying the link needed from there.

You can get the XML format from wordpress admin->tools->export->variables.

Open the file in sublime text 3 program and search by title or post ID.. the URL for variant will be easily found. just found it faster than adding to cart.

David Wolf · Answer 9 · 2022-07-27T12:45:06.223

Little JS snippet to automatically update the WooCommerce single product page URL with the needed parameters for the active variations' selection.

Each time the user changes the variation selection, the URL is updated with the new parameters, so on hard refresh the selected variation is displayed.

Also, fast way to get the direct URL to the selected variation.

Paste it into your browser console and run it. Or use it in your theme/plugins.

const els = document.querySelectorAll('.variations select')

// add el.name and el.value as query parameters to the URL
function updateURL(el) {
    const url = new URL(window.location.href)
    url.searchParams.set(el.name, el.value)
    window.history.pushState({}, '', url.href)
}

// update the URL when the user changes the select
els.forEach(el => el.addEventListener('change', () => updateURL(el)))

Paste the below into a new entry of your browser's bookmarks bar and click on it on the given WC single product page:

javascript:(function()%7B%2F**%0A%20*%20Little%20JS%20snippet%20to%20automatically%20update%20the%20WooCommerce%20single%20product%20page%20URL%20with%20the%20needed%20parameters%20for%20the%20active%20variations'%20selection.%0A%20*%20%0A%20*%20Each%20time%20the%20user%20changes%20the%20variation%20selection%2C%20the%20URL%20is%20updated%20with%20the%20new%20parameters%2C%20so%20on%20hard%20refresh%20the%20selected%20variation%20is%20displayed.%0A%20*%20%0A%20*%20Also%2C%20fast%20way%20to%20get%20the%20direct%20URL%20to%20the%20selected%20variation.%0A%20*%20%0A%20*%20Paste%20it%20into%20your%20browser%20console%20and%20run%20it.%20Or%20use%20it%20in%20your%20theme%2Fplugins.%0A%20*%2F%0A%0Aconst%20els%20%3D%20document.querySelectorAll('.variations%20select')%0A%0A%2F%2F%20add%20el.name%20and%20el.value%20as%20query%20parameters%20to%20the%20URL%0Afunction%20updateURL(el)%20%7B%0A%20%20%20%20const%20url%20%3D%20new%20URL(window.location.href)%0A%20%20%20%20url.searchParams.set(el.name%2C%20el.value)%0A%20%20%20%20window.history.pushState(%7B%7D%2C%20''%2C%20url.href)%0A%7D%0A%0A%2F%2F%20update%20the%20URL%20when%20the%20user%20changes%20the%20select%0Aels.forEach(el%20%3D%3E%20el.addEventListener('change'%2C%20()%20%3D%3E%20updateURL(el)))%7D)()%3B

https://gist.github.com/devidw/2f674f273fb556cb48c82dc1b70aff25

if you want to keep the behavior of the browser back button to the previous page instead of the previous selection, you can use `replaceState` instead of `pushState` `window.history.replaceState({}, '', url.href)` — Ali Kamal, May 07 '23 at 07:57

Norbert Nowocin · Answer 10 · 2018-02-19T13:56:45.917

0

Simply look at your HTML code of single product page, find your product variable select combo ID and add at he end of URL: ?attribute_YOUR_ID=YOUR_VALUE

You can use combinations if you have multiple variable options, separate them with &

example:

website.com/shop/product1/?attribute_id_of_variable_combo=value_of_combo

edited Feb 19 '18 at 13:56

answered Feb 19 '18 at 13:51

Norbert Nowocin

149
1
6

Woocommerce - How To Link to Product Variation?

10 Answers10

Linked