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.
