There’re some scenarios where you’re needed to create a custom add to cart link in WooCoomerce, this article is going to illustrate a step by step guide on how to create a custom add to cart link in WooCommerce.
WooCoomerce is one of the commonly used eCommerce platforms in WordPress. At times, there is a need to add a few functionalities in the fucntions.php that’s not provided by default functionalities of WooCoommerce.
Have you ever wondered how you would create a custom link to add to the cart in WooCommerce? This article is going to give you a complete guide on how to achieve this.
In most of my WooCoomcerce Tutorial Series, we’ll be editing the fucntions.php file of a child theme. Please do not edit the main theme’s fucntions.php because the code will be deleted upon the theme update.
I have written a comprehensive article on how to create a child theme for any WordPress theme with zero coding experience. No coding is required to create a child theme and if you follow my guide on how to create a child theme, you will not lose any settings, menus, or CSS from your main theme.
For this article, we don’t need a child theme, so just proceed reading.
How to Create a Custom Link to add to Cart in WooCommerce
After following my complete guide, you will leave my article smiling.
Before creating a custom link to add to the cart, you will be required to create a simple product in the WooCommerce.
Navigate to your WordPress admin dashboard and hover on products then add new (Products > Add New).
Fill in the product details, such as Product Title, Price, Description, Short Description, and Featured Image of the product.
If you’ve created a product, the next thing would be accessing the product id. We need Product Id to create a custom add to cart link in WooCoommerce.
To access your product Id, navigate to all products by hovering products as shown the screenshot below
To view product ID, please hover on the Product Name
Create Custom Add to Cart Link in WooCoommerce
Now that we have a product Id, please create a custom add to cart link as shown in the code below.
<a href='https://example.com/?add-to-cart=12'>Buy This Product</a>
By clicking the above link, the item will be added to the cart. To confirm if the product is in the cart, please check your cart page.
By the way, “https://example.com” is the root of your website, replace it with your domain name or WordPress’s site URL.
This link will redirect you to the homepage and add an item to the cart. I have created another tutorial on how to redirect users after adding to the cart, that is, redirecting users to a custom page after adding to the cart. If you need to redirect users after adding to the cart, please check this tutorial.
The following code is going to add the item to cart with a quantity of 3
<a href='https://example.com/?add-to-cart=12&quantity=3'>Add to Cart</a>
If you need to redirect users to cart after clicking the link, please navigate to WooCoomerce > Settings > Products > Redirect to the cart page after successful addition as shown in the image below:
In case you need to redirect to a custom page please read my guide on how to redirect users to a custom page after adding to cart.
Custom Add to Cart Link for Variable Products
The above illustration indicated how to create a custom add to cart button for simple products.
To add a variable product to cart, you’ill need VARIATION ID we will replace product id with VARIATION ID:
To add a variable product to cart, please see the following code
<a href='https://example.com/?add-to-cart=88'>Add Variable Product to Cart</a> <!-- add a variable product to cart with a quantity of 3 --> <a href='https://example.com/?add-to-cart=88&quantity=3'>Add Variable Product to Cart</a>
To access variation id, please navigate to product edit page > Variation. Please see the image below
If you enjoyed the article, please let me hear your views in the commenting system below.