Woocommerce – How To Link to Product Variation?

10 comments

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

   1. Visit a variation product yourself
   2. Add a variation to the Cart
   3. 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.

2. 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>';
   
   }
   

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

4. You can just:

   $variation_product_url = $variation_product->get_permalink();
   

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

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

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

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

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

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

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

Comments are closed.