Here’s how to create custom WooCommerce Add to Cart links / buttons and make them add products to cart, redirect to specific pages. This tutorial includes also variable and grouped products, as well as quantities >1.

With this guide it’s much easier to place Add to Cart buttons on custom landing pages, pricing tables, blog posts and so on. Enjoy!

WooCommerce: Master Custom Add to Cart URLsWooCommerce: Master Custom Add to Cart URLs
WooCommerce: Master Custom Add to Cart URLs

1) Simple Products: Add to Cart URL

The easiest of them all, simple products are super easy to add to cart via a custom URL. Simply find the product ID by hovering onto the product title under WooCommerce > Products (see image below), and then use the following links.

Find WooCommerce Product IDFind WooCommerce Product ID
Find WooCommerce Product ID

URL: Add One Simple Product to Cart

href=”http://yourdomain.com/?add-to-cart=25″

Now, make sure to change the domain name in the link, and the button will work out of the box. 1 product with ID=25 will be added to cart.

URL: Add One Simple Product to Cart with Quantity = 3

href=”http://yourdomain.com/?add-to-cart=25&quantity=3″

1 product with ID=25 and quantity = 3 will be added to cart. Note: you can’t add 2 different products to cart with a URL.

URL: Add One Simple Product to Cart & Redirect to Cart Afterwards

href=”http://yourdomain.com/cart/?add-to-cart=25″

Remember, if you’ve changed the URL for the cart, make sure to change “/cart/” into “/basket/” for example. For this to work you must also tick the “Enable AJAX add to cart buttons on archives” option under WooCommerce –> Settings –> Products -> General.

URL: Add One Simple Product to Cart & Redirect to Checkout Afterwards

href=”http://yourdomain.com/checkout/?add-to-cart=25″

Remember, for this to work you must tick the “Enable AJAX add to cart buttons on archives” option under WooCommerce –> Settings –> Products -> General and also disable “Redirect to the cart page after successful addition”:

WooCommerce: Disable Redirect to CartWooCommerce: Disable Redirect to Cart
WooCommerce: Disable Redirect to Cart

URL: Add One Simple Product to Cart & Redirect to Any Page Afterwards

href=”http://yourdomain.com/your_custom_page/?add-to-cart=25″

Remember, for this to work you must tick the “Enable AJAX add to cart buttons on archives” option under WooCommerce –> Settings –> Products -> General and also disable “Redirect to the cart page after successful addition”.

2) Variable Products: Add to Cart URL

Here things were originally complicated, but now it’s much easier! All you need is the variation ID. Here’s where you can find it:

WooCommerce: find Variation IDWooCommerce: find Variation ID
WooCommerce: find Variation ID

Once you have the Variation ID, you can then use the following.

URL: Add One Variable Product to Cart

href=”http://yourdomain.com/?add-to-cart=88″

We’re adding here just the Variation ID (88) as per the screenshot above. Easy as pie 🙂

URL: Add One Variable Product to Cart (with Quantity = 3)

href=”http://yourdomain.com/?add-to-cart=88&quantity=3″

You can also redirect to Cart, Checkout and another page in the same way we’ve seen for the simple product page:

URL: Add One Variable Product to Cart & Redirect to Cart

href=”http://yourdomain.com/cart/?add-to-cart=88″

URL: Add One Variable Product to Cart & Redirect to Checkout

href=”http://yourdomain.com/checkout/?add-to-cart=88″

URL: Add One Variable Product to Cart & Redirect to Any Page

href=”http://yourdomain.com/any-page-url/?add-to-cart=88″

3) Grouped Products: Add to Cart URL

I recently worked with Grouped Products and my task was to add it to cart via a custom URL. A grouped product is a combination of two or more sub-products, and each one can be added with a custom quantity to cart.

WooCommerce Grouped ProductsWooCommerce Grouped Products
WooCommerce Grouped Products

So, here are the custom links.

URL: Add a Grouped Product to Cart

You will need the Grouped Product ID, which can be found in the usual way, and also the sub-product IDs. Then, use something like:

href=”http://yourdomain.com/?add-to-cart=3111&quantity[1803]=5&quantity[1903]=2″

In this case, we’re adding Grouped Product ID = 3111, and specifically we’re adding 5x product ID = 1803 and 2x product ID=2.

Note: if you want to add “zero” for one of the sub-products, you still need to specify that i.e. &quantity[1903]=0.

References

Thanks so much to these amazing folks:

Share:

Leave a Reply