WooCommerce Add to Cart Custom URLs

 

This tutorial explains how to create a custom HTML link/button URL for your website to add that product to the cart by clicking it.

 

1) For a “Simple” Product

 

First, you need to know how to check the Product ID if you want to add that product to the cart through a custom HTML link or button.

How to check “Simple” Product ID?

Go to Products > All Products, and you can see a list of products. Hover one of them to see the ID: [the product id]

Above screenshot show the product ID is 13.

For all the scenarios below, do replace yourdomainname.com in the example below with yours, and the button/text link will be working fine.

Scenario #1: Add One Simple Product to the Cart

 

<a href="https://yourdomainname.com/?add-to-cart=13&quantity=1">button html or text here</a>

Expected outcome: 1 product with ID=13 will be added to the cart.

 

---

Scenario #2: Add One Simple Product to the Cart with Quantity = 5

 

<a href="https://yourdomainname.com/?add-to-cart=13&quantity=5">button/text</a>

Expected outcome: A total of 5 products with ID=13 will be added to the cart.

 

---

Scenario #3: Add One Simple Product to the Cart & Redirect to Cart Afterward

 

<a href="https://yourdomainname.com/cart/?add-to-cart=13&quantity=1">button/text</a>

Expected outcome: 1 product with ID=13 will be added to the cart and you will be redirected to the cart page afterward.

 

---

Scenario #4: Add One Simple Product to the Cart & Redirect to Checkout Afterward

 

<a href="https://yourdomainname.com/checkout/?add-to-cart=13&quantity=1">button/text</a>

Expected outcome: 1 product with ID=13 will be added to the cart and you will be redirected to the checkout page afterward.

 

---

Scenario #5: Add One Simple Product to the Cart & Redirect to A Custom Landing Page Afterward

 

<a href="https://yourdomainname.com/customURL/?add-to-cart=13&quantity=1">button/text</a>

Expected outcome: 1 product with ID=13 will be added to the cart and you will be redirected to the checkout page afterward.

Note: Do replace customURL in the example above with your custom page URL For example https://yourdomainname.com/newsletter/?add-to-cart=13&quantity=1

 

 

2) For a “Variable” Product

 

First, you need to know how to check the Variable Product ID if you want to add that variable product to the cart through a custom HTML link or button.

How to check “Variable” Product ID?

Go to Products > All Products, and you can see a list of products.

Hover the Variable product to Edit or click directly the Product name.(For example: Variable Product 1)

 

 

Scenario #6: Add One (Yellow) Variable Product to the Cart

 

<a href="https://yourdomainname.com/?add-to-cart=23&quantity=1">YELLOW</a>

Expected outcome: 1 variable product (color: Yellow) with ID=23 will be added to the cart.

 

---

Scenario #7: Add One (White) Variable Product to the Cart with Quantity = 3

 

<a href="https://yourdomainname.com/?add-to-cart=21&quantity=3">WHITE</a>

Expected outcome: A total of 3 variable products (color: White) with ID=21 will be added to the cart.

 

---

Scenario #8: Add One (White) Variable Product to the Cart & Redirect to Cart Afterward

 

<a href="https://yourdomainname.com/cart/?add-to-cart=21&quantity=1">button/text</a>

Expected outcome: 1 product with ID=21 will be added to the cart and you will be redirected to the cart page afterward.

 

---

Scenario #9: Add One (White) Variable Product to the Cart & Redirect to Checkout Afterward

 

<a href="https://yourdomainname.com/checkout/?add-to-cart=21&quantity=1">button/text</a>

Expected outcome: 1 product with ID=21 will be added to the cart and you will be redirected to the checkout page afterward.

 

---

Scenario #10: Add One (White) Variable Product to the Cart & Redirect to A Custom Landing Page Afterward

 

<a href="https://yourdomainname.com/customURL/?add-to-cart=21&quantity=1">button/text</a></pre >
Expected outcome: 1 variable product with ID=21 will be added to the cart and you will be redirected to the checkout page afterward.