Add WooCommerce variable product with variations to cart

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:

http://mysite.com/cart/?add-to-cart=PRODUCT_ID&variation_id=VARIATION_ID&attribute_pa_colour=ATTRIBUTE_SLUG

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:

http://mysite.com/cart/?add-to-cart=123&variation_id=456&attribute_pa_colour=black

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:

find_woocommerce_product_id

How to find the variation ID?

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

find-variation-id

How to find the correct variation name?

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

find-variation-slug

How to find the attribute slug?

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

find-attribute-slug

Final result

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

added-to-cart-with-variations

67 responses to “Add WooCommerce variable product with variations to cart”

  1. Brian Sparker

    Any chance you’ve updated the code for the “Add Custom Fee to WooCommerce Cart dynamically”

    1. It’s on my todo list! ;-)

      1. Brian Sparker

        Alright, cool. Thanks!

  2. 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:
    ADD TO CART

    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. hey i’m not sure this method works for quantity, but only for attributes

      1. jesperweltz

        Works with quantity, this works for me.

        ?add-to-cart=3124&variation_id=3145&quantity=3&attribute_size=43-47&attribute_how-often=monthly-basis

  3. Wes

    Hey, great post. How do you handle variable products with more than 1 variation? I’ve tried adding them all in the URL to no avail.

    1. Hey, yes you can use more than one variable if you follow the same process when writing the url

  4. vb

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

    http://mysite.com/cart/?add-to-cart=PRODUCT_ID&variation_id=VARIATION_ID&attribute_pa_colour=ATTRIBUTE_SLUG&attriute_pa_size=ATTRIBUTE_SLUG&attribute_pa_cloth-type=ATTRIBUTE_SLUG

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

    1. Hey, thanks for your feedback!! ;-)

  5. sumiti

    It does not work if we give this url they cant add the products in cart cart showing empty pls reply me

    1. sumiti

      pls reply me asap i need urgently

    2. the code works, make sure sure you use correct URLs.

  6. sumiti

    pls reply remi

  7. sumiti

    can you check ill give you the admin crentails???

  8. sumiti

    can you add me on my personal email i have many querys so i can ask properly from u pls reply me asap

  9. sumiti

    remi pls help me

  10. Greg

    Hmmm…

    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. It does work, make sure you use the correct ids and variations slugs

      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.

  11. 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. Hey you mean clicking on a link and being redirected directly to the checkout page, with the variable product added to cart? I guess it’s doable, but never tried it!

      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?

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

  13. ally

    Hi Remy,

    Thanks for the post. is there any way to change the cart image? I.e if the item is black they see a photo of the black product?

    1. that should be doable, i’ll try to have a deeper look at it

      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.

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

  15. fabio

    hello, i need to get the variarion name from the content cart, and add the function if variation name is xxxxxx.
    thanks

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

  17. 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. hey i don’t think it’s possible out of the box, maybe with some tweaks…

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

  18. manxjon

    Is there a way to add a custom meta value to the query string so I can pass some text info and make the product unique in the cart?

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

    http://mysite.com/cart/?add-to-cart=PRODUCT_ID&variation_id=VARIATION_ID&attribute_pa_colour=ATTRIBUTE_SLUG&attriute_pa_size=ATTRIBUTE_SLUG&attribute_pa_cloth-type=ATTRIBUTE_SLUG.

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

  21. […] You can also provide links directly to checkout for variable products. […]

  22. 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. hey you’re right, but i didn’t say it was the best way to do it. That works but it doesn’t mean there are not other ways to do it better! ;-)

      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!

    1. Clonal Geek

      Hi Remi Great Blog, I am having an issue that when i call the url it adds 2x the product to the cart. Please see this link to show what i mean. am I doing something wrong?

      http://sleshop.azurewebsites.net/product/kito/?add-to-cart=108&variation_id=111&attribute_pa_part=43269

      Thank you in Advance

      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!

  23. anu.hipnotyka

    Man, you explained everything but how to change the url.

  24. anu.hipnotyka

    Good tutorial man, But its not working for me.

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

  26. 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:
    &quantity=[VALUE]

  27. 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. website.com/store/?added-to-cart=1291).

    This leaves my user confused as to what actually happened.

    If I remove the vars from the URL in the link (website.com/store/?added-to-cart=1291), 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?

  28. 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 :)

  29. solucionesuno

    is any way to use POST METODH to do this?

  30. AdeptPlus

    I’ve been searching for HOURS for this. Works perfectly!! Thank you so much!

  31. 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:
    buyplumbing.net/cart/?add-to-cart=167?add-to-cart=173?add-to-cart=175
    Obviously that url’s not written up correctly, but…. ‘ya see the point though right?

    1. Adding multiple products via URL is not supported in WC, that won’t work. You have to use product bundles or force sells instead.

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

    John

  33. jgold723

    Another question — is it possible to add a product to the cart without being redirected to cart at the same time?

  34. […] Remi Corson: http://www.remicorson.com/add-woocommerce-variable-product-with-variations-to-cart/ […]

  35. 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 http://littlelocal.in/confirm/?pid=MTM0ODg%3D&link=aHR0cDovL2xpdHRsZWxvY2FsLmluL3Byb2R1Y3QvdXBncmFkYXRpb24tYWFuZ2Fud2FkaXMtcGxheS1zY2hvb2xzLw%3D%3D&location=VXR0YXJrYXNoaSwgVXR0YXJha2hhbmQsIEluZGlh

  36. shrinivas

    Hi any one help me how to add multiple products to cart at once

  37. nuclear786

    Hello

    Can you please advise how to achieve the variations in drop down & text field as shown in this link:

    http://www.exclusiveinn.com/bridal-dresses/navy-blue-color-bridal-wear-g12177/

    Any help would be highly appreciated.

    Thanks

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

    Thanks

Leave a Reply