How to Set a Custom Woocommerce Add to Cart Link
Any type of WordPress website can easily become a terrific online store thanks to the famous WooCommerce plugin. Once you install and activate this popular eCommerce tool it will add all the elements necessary for setting up an eCommerce platform and you will be able to run a full-fledged online store in just a couple of clicks. Some of the reasons behind the sheer popularity of WooCommerce are that it is incredibly simple to use, allows you to control every aspect of your store and it is totally scalable. Your store can grow as your business grows, managing products and purchases is as easy as it can get no matter what niche you cover and which type of product you sell.
Although a combination of a quality eCommerce WordPress theme and WooCommerce plugin is a winning recipe for a successful online store, there are plenty of details you should also think about when setting up your shop. The better the overall user experience you provide, the more customers you will attract and retain. If your customers find buying from you is too complicated, no matter how good your products are, they will leave your site and look for a more customer-friendly store. In this article, we will be talking about one of the essential steps in any purchase – adding products to the cart. You will find out about a variety of Add to Cart options and how to set them:
Before we see how we can make an Add to Cart button for a product, let’s see what the default WooCommerce options are. Sometimes the set options in the WordPress template differ from the default WooCommerce options, but this is a special case and we won’t be dealing with it in this article.
The shop page where all products are listed has an Add to Cart button – so that customers can make a purchase on the spot. But, let’s not forget that there are different types of products in WooCommerce, and you shouldn’t be surprised or worried if there is no add to cart button under some products. For example, if the product is a variable product type, the button below will say Select Options because there are several variations of the product and a customer needs to choose which one he wants to buy first. In the case of external/affiliate product type, the button will say Buy Product because the link for it leads to an external source where the product is purchased. The titles on the buttons may differ depending on the template, but these two types of products that we have mentioned are the most common cases where the product cannot be purchased directly from the shop page.
There is always an Add to Cart button on the product page and this is mandatory because the product page is where the purchase takes place, so there would be no point in having a product page without this button. In this case, the variable product type also has an Add to Cart button because the option to choose the variant of the product is also there and the purchase can actually be made only after the customer selects the variation. External/affiliate product type has a button that leads to the external page where the product is actually bought, there is no add to cart button because we are only intermediaries in the purchase.
Add to cart button can also be found in the related product sections by default, whether the related product section is an integral part of the WP theme you are using or you have added related products yourself.
You will also find the Add to Cart button on WooCommerce product tables and various product lists if they are part of the WP theme. Where exactly this button will show depends also on the options of your WP theme and on the theme authors. What we want to talk about is how to add an Add to Cart button wherever you want.
As we have already mentioned, the WooCommerce plugin provides sheer possibilities, and the one we are focusing on in this article is the possibility of creating an Add to Cart link which allows the customer to buy a product from any place we specify. The point of this is of course to increase sales.
Take the following section as an example:
This is a classic example of how we can display a product in an interesting manner and invite a customer to buy the product on the spot. All you need in this case is to learn how to create a URL that will be put on the Add to Cart button and allow the customer to buy the displayed product. Creating a link is incredibly simple, you just need to pay attention to the type of product for which you are creating the link.
When you create the link, you can also use it in the text, in the picture (for example on a banner), or pretty much anywhere and not just on the button. It is only important to make it clear that the selected elements contain the link and that the purchase can be made.
Another great thing is that you can determine the number of products that will be added to the cart through the URL. This is not an option that is often used and here is one example where it makes sense to put the quantity on the Add to Cart link:
The description itself says that when you buy 2, you get a free pendant, so it is logical that the customer clicks on Buy Now to add 2 pieces to get a gift. The quantity should be taken into account, it must be indicated how much is added to the basket in order to avoid misunderstandings.
From this example, we see that it is not always necessary for the link to say Add to Cart. You decide what will be written on the link, it just needs to clearly show what is happening by clicking on it, regardless of whether it is on the button, image, text…
Now when you understand what a custom Add to Cart link is for, let’s see how it’s created. As we mentioned the way it is created depends on the type of product.
If you need a custom Add to Cart link for a non-group product that has no variation (ie a link for simple product type, virtual product type and downloadable product type) it is made according to a specific scheme. All you need is the ID of the WooCommerce product.
You will easily find the ID when you go to the product list (Products > All Products) and hover over the desired product. The ID will show.
To create an URL you need to include your domain name and then add strong>?add-to-cart=X where X stands for the product ID:
A link created in this way can be added to any button, text, or any other element and by clicking on it, the product with that ID is added to the cart.
If you want to add product quantity, that is also possible, you just need to add one more element to the URL:
After you added your domain, ?add-to-cart=X simply add &quantity=Y where Y stands for the number/quantity of the product.
When a link like this is placed, and when the customer chooses to buy the product from that place, ie to add to the cart by default, the product is added to the cart but the customer remains on the same page. If you want the customer to automatically get to the Your Cart page simply add the cart element to the link.
In case you want to send the customer to the checkout page instead, simply add checkout:
This way, you can redirect the customer to any page you want:
Of course, you can add quantity to those links too.
The procedure for creating an Add to Cart custom link is exactly the same for the variable product type, the only difference is that you need to find the ID number of the variation in this case. In order to do that, you need to go to the product and find the ID of the variation in the variations tab.
If we find the ID on the Product page as in the example above for single products, the link will not be good and nothing will be added to the cart but there will be a message to visit the product page and choose one of the variations.
When we find the proper ID, the URL is built in the same way as in the example above.
For Add to Cart:
The same goes for adding quantity:
For redirecting customers to the cart page:
For redirecting customers to the checkout page:
For redirecting customers to any other page:
For more details, go back to the previous section.
To create a link for a group product, you need the ID of both the group product and the Product Id contained in it. Take for example this part where add to cart means buying the whole group (dress and bag).
To add a link like this we need to know the Group Product ID, Bag ID and Dress ID. We can find all this on Products > All Products.
This is how the link looks like:
X is the ID of the group product, Y is the ID of one product from the group, Z is the id of another product from the group. Of course, there can be more products included in the group and they are added in the link by adding &quantity[X]=1. 1 as quantity can be changed as needed.
If you want to exclude some product from the cart, just add &quantity[x]=0.
For group products, there is no URL without quantity, therefore an error is displayed because WooCommerce does not recognize which product from the group the customer wanted to buy. In this way, we make it clear which product and in what quantity is being bought.
Redirecting to the cart page:
Redirecting to the checkout page:
Redirecting to any other page:
If your goal is to send the customer to the cart page immediately after adding the product to the cart, you can also set this option in the WooCommerce settings. This way, you don’t have to set it in the link, the customers will be automatically directed to the Cart page after they put the product in the cart.
Woocommerce > Settings > Products tab:
Now it is up to you to think carefully about which options would work best for your store. There is no universal recipe for success, so make sure you know your niche, products, and customers well. When you understand the needs of your target audience, you will easily create a good user experience. Have you already used some of the options from this article? Feel free to post questions and share your experience with us in the comment section! We look forward to hearing from you!
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!