Creating a custom “Add to Cart” URL
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:
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:
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.
Awesome. Works good except for one problem, when I add my product via the link, it adds two instead of one. Any idea why?
Maybe it happens for the same reason explained by @Pete below, or you are using a plugin to change the default minimum quantity added to the cart.
The URL does not specify any quantity, so it’s coming from something else or simply you refresh/update the cart page.
I fix this adding / (slash) before ? e.g. https://site.com/url/?add-to-cart=id not https://site.com/url?add-to-cart=id
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?
Hi Pete,
not something I can think about at the moment. You could check if the cart page URL already includes those
GETvariables, but then if you use again the URL intentionally, it won’t add the products to the cart.This may be late but might helped anyone…
you can fixed this with woocommerce hook
woocommerce_add_to_cartand wp functionwp_safe_redirect. Andesc_url( remove_query_arg( 'add-to-cart' ) );would be helpful in the process.Reigel,
Thanks for sharing your solution!
Hello
Here is my declaration:
http://cbdpro.co/?add-to-cart=87&variation_id=276&?attribute_quantity=1+Bottle
It does not seem to add anything to the cart.
Hi Jason,
There’s an extra
?before theattribute_quantity.Use this instead:
http://cbdpro.co/?add-to-cart=87&variation_id=276&attribute_quantity=1%20BottleThis seemed to fix it for me.
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’));
}
Where do you add these?
@Samuel,
That is added in functions.php.
again this is late, but this was my problem: https://github.com/woocommerce/woocommerce/issues/5400
Hi, Is it possible to create a custom button that adds the product to cart, but does not leave the page?
Hi Alexander,
It is possible, but you need to write your own custom JavaScript code to handle it.
I’d recommend contacting one of the following services if you need any help in adding this feature:
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
@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.
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
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
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?
How can you add a quantity of (2) to this Url?
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!
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!
Hi Nicola,
I used your solution a few months ago to add 1 item to a one page checkout page with this custom URL https://www.yourwebsite.com/checkout/?add-to-cart=123 worked like a charm. After the Woocommerce update it doesn’t work anymore. It now produces the https://www.yourwebsite.com/checkout/ page with 0 (zero) products. Is there a fix?
Solved Nicola. The culprit seems to be the One Page Checkout plugin, not your magic url.
Hey Hans,
Happy you fixed it!
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.
Hi Lloyd,
You can subscriber to the newsletter by filling in the form on the right on any page of this website.
Then you will receive the posts directly via email.
How do you specify quantity in the URL?
You can pass the argument
quantity=Nin the URL, whereNis the quantity you want to add.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?
Hi Simon,
Yes, you can use
?add-to-cart=123&add-to-cart=321.Please note that it does not work with variable products or quantity. If you want to specify the quantity for each product, that won’t be possible.
I’ve never seen this actually working. You’ve accomplished this without having to write custom functions?
It used to work, it does not work anymore now, I think something changed in the core but I’m not sure what exactly.
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
Hi Clara,
I’m happy it helped!
Good luck with your book!
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!
Hey Ryan,
Make sure to add the query parameters to your cart page URL.
In example:
https://domain.com/cart/?add-to-cart=123Hi Nicola, really helpful article – thanks!
If I use the URL in this format – https://domain.com/?add-to-cart=123 – it adds 1 item to the cart and takes me to my homepage.
With this format – https://domain.com/cart/?add-to-cart=123 – it does indeed take me to the cart but seems to add qty of 2. Do you know why this would be?
Cheers
Andy
Hi Andy,
It’s because you are triggering it on the cart page which adds products to the cart if the query
add-to-cartis in the URL.So it first adds it because of the cart, then it adds it again because of the string.
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!
I was suggested this website via my cousin. I’m now not certain whether or not this put up is written by means of
him as nobody else recognize such exact approximately my
difficulty. You’re wonderful! Thank you!
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?
Hi
I try to make link like http://mysite.com/?add-to-card=123
but when I click on the link. It show me the my home page and didn’t add the product into the card
please help me
Hi,
You are using
add-to-cardinstead ofadd-to-cart.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
Ciao Paolo, Ho appena provato e a me funziona perfettamente da iPhone.
Thanks, works perfectly!
You’re welcome Marcos!
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.
Daniel above proposed this solution:
Hi! Where to put this code? Thank you!!
In the file functions.php in wp-content/themes/your-child-theme-name/.
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.
get_checkout_url() is deprecated as of 2.5.0 in favor to wc_get_checkout_url()
Thank you guys.
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
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.
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
Thanks for sharing Akaleo!
Worked perfectly for me and resolved the duplicate product being added – thank you!
Hi,
This is perfect, thank you. I have only one issue;
When I add a product to the cart like http://maltacode.com/cart/?add-to-cart=25809 it takes me to the cart, what I want.
But it displays a box on the top of the cart-page “Basic Webhosting” has been added to your cart. View cart button”. Can I get rid of this, as the user is already on the cart page?
Hi. I tried the code but its not working at all. Zero Product at the Cart.
I am using this url: http://www.kelko.hu/?add-to-cart=29546
Hi Zoltan,
Are you sure that the ID is correct? If I visit yoursite.hu/?p=29546 I don’t land on a product page, as expected.
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?
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.
Hi Luca,
I guess it is possible, but I’m not 100% sure since I don’t know WPML that much. I’d suggest you to ask them.
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
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?
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.
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.
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.
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
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
Hi Corine,m
There are not sintax errors in that code, especially not the one that you mentioned, as far as I can see.
Maybe the code is somewhere else.
Hi Corine,
I think you need to replace the single quotes in that code as they have wrong encoding.
I don’t think they are wrong encoding. If you say that because of the special encoding that you see here, it’s just the blog converting them in actual quotes.
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.
Great job Andy, that sounds really cool!
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’));
}
Hi Thomas,
I think that the code will affect every product. The filter
woocommerce_add_to_cart_redirectis 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 ofwoocommerce_ add_to_cart_redirect.Okay bummer… Is there any other way to do this with a plugin or any other way without it re-adding it to the cart multiple times when they click on the back button?
There’s no plugin. Why not just using that code? I mean, even if it affects all products, what’s the problem with that?
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?
Hey Rogier,
I don’t know of anything for this. Probably there are some plugins, try to search on WordPress.org.
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!
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’));
} */
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!
Superb. You solved my problem of how to create an individual add to cart button!
I’m happy it helps you, Dave!
Hi.
I’ve been using http://domain.com/?add-to-cart=123 with no issues.
I also have the affiliatewp referral cookie created as http://domain.com/?aff=321 with no issues.
Whenever i combine both parameters:
http://domain.com/?add-to-cart=123&aff=321
the add-to-cart seems to block the creation of the affiliate’s cookie.
Do you know any workaround this issue?
Hi Franco,
I’m sorry but I’m not sure how to make this work. Maybe you can contact the Affiliate WP support team and ask them.
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.
Hi Jacinta,
I just tested this again on WooCommerce 3.2.6 and Storefront and it works fine for me.
Thanks a very helpful post!
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!
Hi Rezan,
I think the easiest way would be via this extension: https://woocommerce.com/products/url-coupons/
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
Very useful, worked perfectly. Thanks!
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!
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.
You’re very welcome! Happy that it works well for you!
Hi, i believe that i noticed you visited my site thus
i got here to return the choose?.I am attempting to
in finding issuws too enhance my website!I suppose
its good enough to use a few of your concepts!!
Thank you! It works great! 🙂
i removed my add to cart button and buy now button from my woo commerse website two years ago. but i have no idea what did i do to remove those two buttons from product page of my site. Can anyone here tell me how can i re-add those two buttons. what is code and where to add.
If I add …./?add-to-cart=377 to my button it adds the product twice. Any idea why that would be?
Does it work with version 3.9.1. and did you find a solution when using in combination with affiliate links?