Add WooCommerce variable product with variations to cart

Remi | August 23, 2013 | in Tutorials

There’s a WooCommerce builtin shortcode to add a product to cart, by default the shortcode works only for simple product, not for variable products, as when using this shortcode you can’t define variations. You can use these two shortcodes [add_to_cart id=”XX”] and [add_to_cart_url id=”XX”] for simple products.

Create the URL

But what if you want to create a “add to cart” url for variable products? Let’s say you want to create a add to cart url for a t-shirt with size set XL?

Well, you need to add variables to the URL and create a url similar to this:

Basically, this url will lead you directly to the cart page and will add to cart product having the “product_id” ID, and the “colour” attribute set to “attribute_slug”. A real example would something like this:

How to find the product ID?

To find the product ID, you can just place your cursor over the product line or use my little plugin:


How to find the variation ID?

To find the variation id you need to edit a product that has this variation enabled:


How to find the correct variation name?

The attribute name must start by “attribute_pa_” and should then contain the variation slug.


How to find the attribute slug?

To find the attribute slug, click on Products > Attributes > Then configure terms.


Final result

Here the final result when clicking on the URL we just created:


The author

About the author Remi: Hey! My name is Rémi Corson, i'm a WordPress Expert Developer, i create high level themes and plugins, and i provide free stuff every week on this website!


  1. John

    Hi, I know this sounds silly, but I can’t get this to work on my end. I created an anchor tag with the said URL. I have this code below:

    Here is the breakdown:
    product ID: 207
    variation ID: 210
    variation name: quantity
    attribute slug: 60

    Another thing, when I add this in text format, then I click Visual Tab, it adds the & sign in the & of the URL.

      1. jesperweltz

        Works with quantity, this works for me.


  2. vb

    hey remi, worked great for products with more than one variable. Incase anyone wants to know the URL structure is:

    ..and so on.

    My query is:

    Any idea how to obtain the variation id and product price given that i know the product id, attribute names and attribute slug?

    thank you.

  3. Greg


    Unfortunately this doesn’t seem to work with variable subscription items. At least not for me. Bummer! I thought this was the final piece of my plan to do away with the cart and single-product pages! :(

    Thanks for the post though.

      1. Greg

        Hey Remi,

        Thanks for the reply.

        I eventually got your suggestion to work. There is a glitch in Woocommerce (mine anyway) in that if I make and save attributes from inside a product, they do not save out into the “attributes” tab in Woocommerce. I had used your code (corrected for my products) correctly, but I had to delete all my already created attributes from each product, then add them to the “attributes” tab, then re-select them from inside each product (rather than creating them inside each product).

        It’s working just fine now. Thanks for the post!

        1. johnny_n

          @Greg – that is not a bug. You are setting attributes for that specific product (and only that product) by doing it within the product. The attributes tab controls global attributes which can then be assigned to any product.

  4. sebastian

    Is there a way to use this in conjunction with your other post on skipping product and cart pages? I have a variable product but when I use the add-to-cart filter from your other post, the variant ID is not passed along so I get a product in my cart with no size specified.

      1. hi7tek

        Hi Remi, I’ve created a script that dynamically adds the product to the cart as I want to do a dynamic buy now button. it works great in duplicating the behaviour of a regular add to cart button but I can’t figure out how to do the redirect to the cart when product is added. I have a similar thing for simple products but that works superbly. Any ideas?

  5. Janice

    Thank you Remi so much for this tutorial. You have solved my burning question – add variable products to Add to cart shortcode. Now I simply need to work out how to get the URL to appear in a drop-down menu.

      1. fluffy

        Hi Remi,
        did you managed to have a deeper look into Ally’s issue?
        I have the same question.

        Is this possible?
        If the variation is black, that they see a photo of the black product?

        Thanks in advance for any help.

        Best regards.

  6. fabio

    When I add to cart the product variable, in the product name is also added the variation. Do you know the function to extract the variation from a product name?
    Let me explain: I would like that if in the product name of the cart there was a certain variation, you executed a specific function.

  7. abhijeet singh

    Hello, I want to know that can we add Text box in attribute instead of dropdown as we do in “magento custon option”. I want user to customize the product and if he customize the saame product with diffrent configuration. the product will be added as diffrent in cart

  8. yokotsumo

    Is there a way to set the cart price the same way with URL parameters?
    I know there is a woocommerce function (set_price()) to do this, but is there a simplier way with URL parameters?

    1. douglsmith

      There’s a good reason for that not being available. If it were possible then clever users could make up URLs to buy your products at any price they like.

  9. Cuong

    Hi Remi,
    This’s nearly exactly what I need for my site. However, I need something more dynamical in the URL. I’m writing a product loop for variable products but dont know what kind of attribute the they have yet (actually some products have color attribute while some have size or material and so on…the attributes and variation are created dynamically in the CMS depend on product’s nature). Based on your URL structure below, we have to know and fix the attribute in advance.

    Is there any way to make it dynamically? I try to display (print_r) the array get_available_variations() but it doesnt work because I see the attributes are fixed as well: [attributes] => Array ( [attribute_pa_color] => black ).

  10. soralsokal

    Cool post, thanks.

    Anyone knows, if you can combine this with a drop-down of product variable? Choose the product variable in the drop-down and the add to cart button puts the appropriate product in the cart.

    Any ideas?

  11. Pingback: How to Create a WooCommerce Link to Add a Product to Cart and Redirect to Checkout

  12. johnny_n

    This is a great post and I’m using it now with a Woocommerce 2.1 site, but there’s a side-effect that might not have been around for 1.X.

    Currently most adding to cart is done via ajax, not a URL. So when you add your product to the cart this way, then try to remove it (say put the quantity back to zero and then click ‘update cart’), the quantiy is first removed, then added back (because it reloads the current URL).

    So once products are added this way, the quantities can’t easily be changed. I’m going to file a ticket and see what the reply is, but this is probably not the best way to add products to the cart.

      1. johnny_n

        lol… :-)

        I didn’t end up filing a ticket – I started looking into the AJAX add-to-cart loading and realized that’s what I should be using. I didn’t dig into the code deep enough to realize that.

        This is still an excellent solution – and much simpler. Thanks for the post Remi!

  13. jfksdca

    Thanks for the post!!

    You have to get the attribute names exactly right (underscore between attribute_ and slug then hyphens between the slug words) and increase the variation_id.

    My 3 links were:

      1. sqd

        Hi Remi,

        Thanks for this useful knowledge….works great but on one site we were having the same issue as Clonal Geek….the url added the product twice (2x). The solution (for now) is that https:// did not work whereas http:// does work Perhaps it’s a .htaccess issue. Also — when we manually tried to change the ‘2’ to a ‘1’ in the quantity field, it reverted back to ‘2’ upon cart update. I’m intentionally omitting our url in case there’s a security problem with using http://. Any more info about the nature of the 2x problem would be appreciated. Thanks again!

  14. julian

    Hi Remi, great article.

    Is it possible to add multiple products to the cart using a url string?

    I’m running a website where users can reserve tickets using wp-events manager. im attempting to create a URL string for WooCommerce that allows me to add multiple products, and then im going to put this link in the email confirmation sent out by wp-events manager. and set the quantity of products in the URL using a events manager shortcode/placeholder. This way i can hack together a half working integration between the two plugins, that sends the user to my WC checkout page with the correct amount of tickets added to their cart.

    Any tips or advice would be appreciated cheers :)

    1. jesperweltz

      Hi Julian
      Did you find a solution? I am looking to do something similar. But I have a problem where if i send two products after each other it “resets” the cart so it only contains the last product that I send.

  15. jnzbzz

    THANKS. was ripping my hair off, since i had a mistake on another end.. but with your manual i managed it.
    and i found out you can simply add the quantity like so:

  16. rookpsu

    I’m running into an odd situation where, for any add to cart variable links, when clicked, it WILL add the correct items w/ variations to the cart, but it doesn’t actually take the user there. Instead, after post, it redirects back to the shop page with all the query strings stripped (i.e.

    This leaves my user confused as to what actually happened.

    If I remove the vars from the URL in the link (, it will successfully take me to the cart screen but my cart will still be empty (which may be correct behavior since it’s not a simple product).

    Any idea?

  17. duwomedia

    Hi Remi,

    Now I tried your solution but I still can’t get it to work?!
    When I hit the button it redirects me to the cart and gives an error saying “Please choose product options…”

    I’m trying to use a pricebox layout with 4 product variations (tickets in this case) with each of them having their own add to cart button.

    I’m a missing something out here??
    Thanks :)

  18. Pingback: Get the Easy Pricing Tables By Fatcat Apps! Use for Woocommerce Variations & Force Sells, Chained Products, Composite Products, Group Products, & Product Bundles! | Grace Explosion

  19. BRadGriffin

    Howdy Remi!
    Hey, we’ve got a guy over in the woohelp Fb group wondering the same thing as some of these latest posts here on your thread. Is it possible to add more than one product via a url?
    Again, not the quantity of one product changed, but more than one product:
    Obviously that url’s not written up correctly, but…. ‘ya see the point though right?

  20. jgold723

    Thanks so much for this! I’m try to use this to create a simple submittal form, but I’m stuck on the necessity of submitting two variables for each single product variation (variation_id and attribute_pa). This would seem to require that my form have two select pulldowns each of which will essentially appear the same to the user.

    Has anyone figured a way around this?


  21. Pingback: WooCommerce Custom "Add to Cart" URLs - The Ultimate Guide - Business Bloomer

  22. Pingback: jricketts4 on "[Plugin: WooCommerce] Link Cart variable product" * Best Wordpress Themes - Reviews

  23. rahulr

    Hi Remi,
    How do i get variation id dynamically for any particular product on my custom page (not default single product page), i have product id.
    i need same functionality as single product page for variation but on my custom page not default page .
    ex : this page

  24. javied

    Hello Remi,

    Would you mind guiding me how can I achive this with or without ajax as I do not want to show the my slelcted valriable and qty in url


Leave a reply