Adding products to the cart is the first step to convert a user to a customer.
In WooCommerce you can add products to the cart from their details page or from the shop page, for some kind of products, like simple products in example.

But sometimes this is not enough. It would be a lot better to have a landing page featuring the awesome product you just created.
In this case you could use the shortcode [add_to_cart].

But you can also create your own button by using a custom Add to Cart URL. It could be particularly useful when you have a visual builder or a pricing table plugin.

In those cases the Add to Cart shortcode may not work properly, may have styling issues because it could be not compatible with the plugin you are using.

In those cases, you will need to create your own Add to Cart URL.
Doing so is easy as drinking a glass of water.

To begin, open your dashboard and go to Products.
In the products’ list, hover over the product you want to create a custom Add to Cart URL for. On the left, you will notice a text like ID: 123 where 123 is the ID of that product.

To create a custom Add to Cart URL for that product, you will need to add ?add-to-cart=123 replacing 123 with the ID of your product.
The result will be something like https://www.yourwebsite.com/?add-to-cart=123. Whoever clicks on this link, will add the product 123 to their cart.

What is awesome about this?

That you can use it anywhere. You could create a pricing table with different tiers for your product and people will be able to skip the product page and add it directly from the pricing table on your landing page which is already properly configured for a Google Ads campaign and well indexed on Google and other search engines.

Can I create a URL for a variable product too?

Of course. That needs more steps though since you need to create the URL including the specific variation you want to add to the cart.
The easiest way to create an Add to Cart URL for a variable product is by going to the variable product page and choosing the options that you want to use in your URL. Then add the product to the cart and visit the cart page.

In example, I have a T-Shirt for which the customer can choose the size and the color. I want to feature the black small T-shirt. So I’ll go to the product page and will choose Small for the size and Black for the color and then I’ll click the button Add to Cart.

By visiting the cart I’ll have this:

product-in-the-cart

Click on the product name with the right mouse button and click on Copy Link Address.
You will have something like this: https://www.yourwebsite.com/product/product-name/?attribute_size=Small&attribute_color=Black

Copy the part after the ? in the URL: attribute_size=Small&attribute_color=Black
Then start building your URL exactly like you did before, adding your product ID and the ?add-to-cart=123 in the URL. After this last part, you need the variation ID to specify exactly what the customer will add to the cart. To get the variation ID, open the product admin page, and click on the tab Variations. In the variations list, you will see their ID on the left, in this example you will see a variation like this in your admin:

variation-id

117 is the variation ID. So add &variation_id=117 in the URL.
You are not ready yet. After the variation ID you need to add the part of the URL I asked you to copy before from the cart page.
The complete URL will look like: https://www.yourdomain.com/?add-to-cart=123&variation_id=117&attribute_size=Small&attribute_color=Black

Now use this URL on your landing page, on your pricing table, or in a button, wherever you want.
By clicking on it, your customers will add a Small Black T-shirt to their cart.

105 replies
  1. Pete
    Pete says:

    The only problem I find is if the customer refreshes the cart page it adds another one because the url is still present. It also adds another item if they click the “Update Cart” button. Any work around for this?

    Reply
      • This WordPress Guy
        This WordPress Guy says:

        Hey, I know this is late but Alexander, just add the the page to you want the user to go to before ?add-to-cart=123.

        So say you want the user to go straight to the cart from the homepage after they add your product to the cart. Change example.com?add-to-cart=123 to example.com/cart?add-to-cart=123

        this will add the product to their cart and take them to your desired location

        Reply
        • Michelle
          Michelle says:

          @This WordPress Guy

          You strike me as a very thoughtful person. Despite much time has passed since the question first came up, you still courteously took the time to inform the rest of us. Thank you & Bless you.

        • Clay Ravin
          Clay Ravin says:

          Hi This WordPress Guy,
          Thanks for the great tip!
          Unfortunately the product is being added twice if I use this type of link: example.com/cart?add-to-cart=123.
          Do you have any ideas what could be causing this? I also tried example.com/cart/?add-to-cart=123.
          Cheers, Clay

        • amihai
          amihai says:

          Hello,

          That thing is supposed to be making huge conversion rates with a simple thought, but i have this quantity of 2 thing as well.
          Anyone with a solution? This is really important 🙂

          Thank you

        • Bronwyn Slater
          Bronwyn Slater says:

          Hi, just tried this as I want the user to be directed to another product page after clicking on the example.com?add-to-cart=123 line so I changed the url to example.com/custompage?add-to-cart=123 but it still directs to cart – any idea why?

  2. Daniel
    Daniel says:

    Hi, thanks for this great post. I have used it to solve a problem with single products.
    But I can’t get the URL for variable products, may be because of the WooCommerce 2.6 update?
    First, the cart page doesn’t show any product URL, even with mouse right click.
    Althouhg, I’ve constructed the path step by step, but WC continues saying “my attribute” is a required field.
    Any ideas on this? Thanks!

    Reply
    • Nicola Mustone
      Nicola Mustone says:

      Hi Daniel,
      Sorry for the late reply.

      I tested this on my dev set up with WooCommerce 2.6.1 and it still works properly.

      Try to disable the theme and test on a different one please!

      Reply
  3. Lloyd
    Lloyd says:

    Pretty section of content. I just stumbled upon your website and in accession capital to assert that I get actually enjoyed
    account your blog posts. Any way I will be subscribing to your augment
    and even I achievement you access consistently rapidly.

    Reply
  4. Simon Williams
    Simon Williams says:

    This works perfectly, do you know if there’s a way to add multiple items to the cart using this link structure i.e. ?add-to-cart=123&321 or something similar?

    Reply
  5. Clare Josa
    Clare Josa says:

    Thank you Nicola. This was just what I was looking for!
    Gave me the perfect workaround for a problem that was beyond my control to fix. Just in time for my book launch.

    Gratitude!

    Clare Josa
    Author of Dare To Dream Bigger

    Reply
  6. Ryan
    Ryan says:

    Hello! Thank you for this post. I have done as described in the post, but when I click the button, it adds the product to the cart, but then sends the person to my homepage instead of to the cart. How would I go about getting them sent to the cart page? Thanks!

    Reply
  7. beesop
    beesop says:

    Hi, this dont work for me: ?add-to-cart=123&add-to-cart=321
    It only add the last one item.
    any idea how to add multiple items to the cart with only one URL?

    Thank you!

    Reply
  8. Peter
    Peter says:

    This looks very useful.

    I see you have said you can specify N for product quantity. Is there a way of having it so tha the customer can enter a custom quantity?

    Reply
  9. Paolo
    Paolo says:

    Ciao Nicola io ho un problema che si verifica solo su smartphone. Ho creato questo link che su desktop funziona mentre se si clicca da smartphone mi da errore che non è possibile aggiungere il prodotto. Come è possibile? Questo il link: [link removed by Nicola].

    Grazie se vorrai aiutarmi

    Reply
  10. Samuel
    Samuel says:

    Was there an answer given how to fix a product being added twice? I disabled all plugins except WordPress and used Twenty Sixteen as the theme, but it still continued to add two.

    Reply
    • Nicola Mustone
      Nicola Mustone says:

      Daniel above proposed this solution:

      add_action(‘add_to_cart_redirect’, ‘resolve_dupes_add_to_cart_redirect’);
      function resolve_dupes_add_to_cart_redirect($url = false) {
        if(!empty($url)) { return $url; }
        return ‘https://XXXXX.XX’.add_query_arg(array(), remove_query_arg(‘add-to-cart’));
      }
      
      Reply
      • Dan
        Dan says:

        Just wondering how that function works… I have a custom functions plugin (so as to not have to lose anything I add to functions.php when theme is updated) but the code posted creates a fatal error.

        I’m assuming that the XXXXXX.XX needs to be my domain, but either way, that doesn’t seem to be the error.

        Once it is added to the functions file, do you have to make a call to the function somewhere? Any help would be appreciated.

        Reply
  11. Janos
    Janos says:

    Hi Nicola,

    thank you for putting this together – at least I found a thread where there’s some life… 🙂 It seems to me that by adding through this method the response from the server is the whole page, which makes it a bit slow. Especially if we start putting more products into the cart continuously. I was wondering why it took so long and by checking the Response section under the Network tab under Dev tools I found that it somehow queries and loads the page again in the background… Maybe it’s because I’m using jQuery ajax method to trigger this?

    Regards,
    János

    Reply
    • Nicola Mustone
      Nicola Mustone says:

      Hi Janos,
      It’s normal that it loads the whole page. We are simply adding a GET variable to the URL. You can technically not load the whole page, but you’ll have to use a completely different code.

      I’d suggest you to look at how WooCommerce adds products to the cart via AJAX, and use that code to start with your own to add them to the cart via URL.

      Reply
  12. Akaleo
    Akaleo says:

    Hi,
    In case this is helpful to anyone. I had the problem of the ‘add to cart’ adding 2 every time. I discovered I actually had 2 ‘Cart’ pages. This happened when importing a theme’s demo site. I unpublished one, moved to trash, and that seemed to fix my problem. I now use this format to go to the cart page once an item has been added:

    http://yoursite.com/cart/?add-to-cart=33&quantity=1

    Reply
  13. Mike
    Mike says:

    This is very cool, however, Is there a way to make make the customer get directed to the cart in the same step? In other words, it adds the item to the cart AND takes them to the cart too. Is that possible?

    Reply
  14. Luca
    Luca says:

    Hi Nicola,
    is possible send the price product to two different language woocommerce checkout pages?
    For example: one product to the italian checkout page and one product to the english checkout page?
    The translation plugin is WPML.

    Reply
  15. Paul
    Paul says:

    I think ( or at least for me ) this has stopped working in WooCommerce V3.0.1 🙁
    Anyone using this version and prove it still works ?

    Paul

    Reply
  16. Chelsey
    Chelsey says:

    Hi Nicola,
    I used your advice to create a URL sicherfahrenalkoholtest.de/cartadd-to-cart=8 (The ? and / automatically get removed in wordpress). When I click this link it seems to be working on my browser, when I’m logged into the admin, but not other computers or cell phones. Any idea why this could be happening?

    Reply
    • Nicola Mustone
      Nicola Mustone says:

      Hi Chelsey,
      I’m not sure why the ? gets removed. Maybe you have a plugin that adds rewrite rules which remove the ?, or you manually added rewrite rules for this.

      It surely is not normal.

      Reply
  17. vivek
    vivek says:

    Hi,
    I am using this
    But i want to display their response on same page without reload page where add to cart button is located. i get response but after reload page it display. what is solution please guide me.

    Reply
    • Nicola Mustone
      Nicola Mustone says:

      I’m sorry vivek but that requires much more development and you should use AJAX to add the product to the cart via that link.

      At the moment I’m not going to add support for this.

      Reply
  18. Corine
    Corine says:

    Hi! Great post!

    I copied and pasted the code to avoid getting two products in my cart, in my functions.php but I get a syntax error… I don’t know any php but it says:

    Parse error: syntax error, unexpected ‘:’ in /home/expositiecoach.nl/public_html/expositiecoach.nl/wp-content/themes/Expositiecoach/functions.php on line 28

    Do you know what I am doing wrong? I have tried both codes in this blog.
    Thanks so much!
    Corine

    Reply
  19. Corine
    Corine says:

    add_action(‘add_to_cart_redirect’, ‘resolve_dupes_add_to_cart_redirect’);
    function resolve_dupes_add_to_cart_redirect($url = false) {
    if(!empty($url)) { return $url; }
    return ‘https://expositiecoach.nl’.add_query_arg(array(), remove_query_arg(‘add-to-cart’));
    }

    This is the code I copied btw….

    Thanks so much!
    Corine

    Reply
  20. Andy Beales
    Andy Beales says:

    I needed to use this function but in the end I needed more. I’ve put together a cool plugin that actually lets you put something that’s not even a product into a cart all from just clicking a URL. So my team can just write a URL adding price plus optional ref and optional description for cart and receipt, then we just email it to the client. Then when the client clicks it, it will add that into the cart and takes the users to a single page checkout. Perfect for service business with complex pricing (photography business or travel business or both combined like me) This avoids our staff having to login and create products in woo or invoices in accountant software or buttons in PayPal etc… before the customer books. It speeds up the time we can get links out… The customer just gets a single one page check out and no confusion. It started from playing with this function.

    Reply
  21. Thomas
    Thomas says:

    Hi 🙂 Will this code below when put in In the file functions.php in wp-content/themes/your-child-theme-name/ affect anything else? Like when someone adds any products like normal through my woocommerce shop website that are not using the https://DOMAIN.com/checkout/?add-to-cart=1234 link that I would put on my image to have them be able to buy it? I need to figure out a way that will somehow remove the ?add-to-cart=1234 part of the link so it won’t add it again if my customers refresh the screen and or click on some other link on my site and then click the back button to go back to their checkout page to enter in their info (like if a customer wants to look at our return policy 1st before they go back to buy it) Because this is causing an issue with customers abandoning the checkout because they think that they should be paying 1 price but it will be 2 or sometimes 3 or more times that because they keep going back and forth and it keeps adding it over and over again to the cart and they don’t know how to find a edit quantity button lol to fix it.

    add_action(‘add_to_cart_redirect’, ‘resolve_dupes_add_to_cart_redirect’);
    function resolve_dupes_add_to_cart_redirect($url = false) {
    if(!empty($url)) { return $url; }
    return ‘https://DOMAIN.com’.add_query_arg(array(), remove_query_arg(‘add-to-cart’));
    }

    Reply
    • Nicola Mustone
      Nicola Mustone says:

      Hi Thomas,
      I think that the code will affect every product. The filter woocommerce_add_to_cart_redirect is used every time a product is added to the cart.

      Also, the one that you are using, add_to_cart_redirect, has been deprecated in favor of woocommerce_ add_to_cart_redirect.

      Reply
  22. Rogier
    Rogier says:

    Works great thanks Nicola!

    Is there also an option to remove the option to change the quantity or remove a item completly at the order review section?

    Reply
  23. Thomas
    Thomas says:

    Hi okay I am going to try it 🙂

    So the new corrected code should be this then right?

    add_action(‘woocommerce_add_to_cart_redirect’, ‘resolve_dupes_woocommerce_add_to_cart_redirect’);
    function resolve_dupes_woocommerce_add_to_cart_redirect($url = false) {
    if(!empty($url)) { return $url; }
    return ‘https://DOMAIN.com’.add_query_arg(array(), remove_query_arg(‘add-to-cart’));
    }

    since you said that it should be: woocommerce_add_to_cart_redirect instead of just add_to_cart_redirect so I have replaced all of them with the one you said to use but I wanted to make sure that all of them needed to be changed and not just like one of them in that code? Thank you so much for all your help with this by the way!! You guys are awesome!

    Reply
  24. Thomas
    Thomas says:

    Okay I have added the above code but it still added it to the cart again if someone goes back to the page, or refreshes the page? It did not seem to make any difference? Can you please check to see if this is the correct code?

    <?php
    /* add_action(‘woocommerce_add_to_cart_redirect’, ‘resolve_dupes_woocommerce_add_to_cart_redirect’);
    function resolve_dupes_woocommerce_add_to_cart_redirect($url = false) {
    if(!empty($url)) { return $url; }
    return ‘https://DOMAIN.com’.add_query_arg(array(), remove_query_arg(‘add-to-cart’));
    } */

    Reply
  25. Alex
    Alex says:

    Hi guys! The custom add to cart URL does not work in any way for me. Any ideas on this? Is is the new woocommerce update that is affecting this? When I create a button that has the custom add to cart URL linked to it, it does not add the product to the shopping cart. It only redirects me to the page. However, if I set it to redirect to the cart, it tells me that the attribute is required. Any ideas on how to fix this would be greatly appreciated. Thanks!

    Reply
  26. Jacinta
    Jacinta says:

    Ok this isn’t working at all with a new website, i have used it before and still going well for another site. For the new site I’m using divi theme. I even deavtivated all my plugins but it still derects straight to the home page.

    Reply
  27. Rezan @ Xillionaire
    Rezan @ Xillionaire says:

    Hi Nicola, I have a question in regards to how would I create a custom Add to cart URL with a discount code, so that when someone clicks through it adds it directly to the cart and applies the coupon code without any additional effort. Your help is greatly appreciated!

    Thanks for the post!

    Reply
  28. Mark
    Mark says:

    It only works for me when I’m logged into wordpress. Once I’m looged out and click the “buy now” button with the custom link then it just refreshes the page. Could someone please help me

    Reply
  29. Caroline
    Caroline says:

    The functions.php code made it work for me! Without it, I found that the link would send them to the cart without adding the actual product. Many thanks everyone!

    Reply
  30. Clyde
    Clyde says:

    Thanks for this post it was very useful.

    Like many others here I extended it with the /checkout/ addition

    eg yoursite.com/checkout/?add-to-cart=123 and it worked like a charm. Really easy for sending payment to someone less savvy with e-commerce etc.

    Thanks again.

    Reply

Trackbacks & Pingbacks

  1. […] can create a custom add to cart link for any product to use this […]

  2. […] Mustone published a guide to creating WooCommerce add to cart links so that you can allow customers to add products from anywhere on your […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.