Terry Tsang

Logo - Terry Tsang
About
WooCommerce Snippet Series 01 Add to Cart URLs

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]

WooCommerce How to Find 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)

WooCommerce How to Find Variable Product ID

 

WooCommerce How to Find Variable Product Variation ID

 

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.