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…
In this way, you can create an Add to Cart button can that automatically adds the single product, variable product (certain product variation), and grouped product (or some products from the group) to the cart. If you only need a custom Add to Cart button for a single product, ie to add one specific product to the cart immediately, we recommend that you use Qi Addons.
Add to Cart Link for Single Product
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:
https://yourdomain.com/?add-to-cart=X
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:
https://yourdomain.com/?add-to-cart=X&quantity=Y
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.
https://yourdomain.com/cart/?add-to-cart=X
In case you want to send the customer to the checkout page instead, simply add checkout:
https://yourdomain.com/checkout/?add-to-cart=X
This way, you can redirect the customer to any page you want:
https://yourdomain.com/any-page-url/?add-to-cart=X
Of course, you can add quantity to those links too.
Add to Cart Link for Variable Product
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:
https://yourdomain.com/?add-to-cart=X
The same goes for adding quantity:
https://yourdomain.com/?add-to-cart=X&quantity=Y
For redirecting customers to the cart page:
https://yourdomain.com/cart/?add-to-cart=x
For redirecting customers to the checkout page:
https://yourdomain.com/checkout/?add-to-cart=x
For redirecting customers to any other page:
https://yourdomain.com/any-page-url/?add-to-cart=X
For more details, go back to the previous section.
Add to Cart Link for Grouped Product Type
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:
https://yourdomain.com/?add-to-cart=X&quantity[Y]=1&quantity[Z]=1
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:
https://yourdomain.com/cart/?add-to-cart=X&quantity[Y]=1&quantity[Z]=1
Redirecting to the checkout page:
https://yourdomain.com/checkout/?add-to-cart=X&quantity[Y]=1&quantity[Z]=1
Redirecting to any other page:
https://yourdomain.com/any-page-url/?add-to-cart=X&quantity[Y]=1&quantity[Z]=1
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:
The methods mentioned above can be applied in any builder, however, if you use Elementor and want to add a cart button there is one easy solution. With Qi Addons for Elementor and its Add to Cart Button widget, the process is quicker and easier. This tool allows you to insert a shopping button anywhere on the page. Of course, if you want the link to be part of a paragraph, as part of a sentence, you have to do it as described above, this widget gives you the option to make an add to cart button. Also, if you want to automatically determine the amount of product you will have to use the method described above. This button allows you to add a single product immediately to the cart, and in case the Add to Cart is set for a group product or a product that has more variations, then Add to Cart button leads to the very page of the product where the customer can select the product variation, there is no option to set which of the offered is automatically added.
What is great about this addon is that it is the biggest free addon that comes with 60 widgets that can contribute a lot to the look and functionality of the site. All widgets are highly customizable so everything can be customized to the style and needs of the theme used.
Let’s explain how it works.
Find the Add to Cart Button widget and add it to the desired location. We will add it below the existing one to show how we can easily style it to match the theme.
When we add it, the settings Customize and Style will be found on the left, and on the side, we can see that a field has appeared. There is currently a notification and a request to add a product ID.
Content tab refers to the setting of button elements, ie whether it will have an icon, border, etc, and the stylization itself is done in the Style tab.
As usual, look for the ID, go to Products > All Products, and find ID info on hover.
In general settings, we add the Product ID. A button automatically appears that implies a specific action on the product whose ID we entered.
As we already know WooCommerce offers several types of products. The following image illustrates what the button for different product types will look like before styling.
The Add to cart button is a button for a single product that is in stock and is automatically added to the cart by clicking.
Buy product is an affiliate product button, it leads to the page where the product is located, it cannot be automatically added to the cart.
The View products button is for a group product type. It leads to the product page and the buyer can choose what he wants to buy. Remember, in the above way of adding an Add to Cart link, we could create a link that determines which product from the group will be added to the cart as well as product quantity.
The Select options button is for products with multiple variables, again leading to the very page of the product from where the customer further selects the options.
Now when we have clarified this and added the product ID we go to Button settings. You can experiment with these options, you have different layouts and types, you can choose the text of the button to be underlined and specify the size of the button.
Another interesting option is the option for adding the icon. You can add an SVG as per your wish or choose one from the Icon Library. You can also set the icon position depending on the position of the text.
Once we have selected the elements we move on to stylization. It is done in the style tab and you will see that the options are split into Button style, Button Icon Style, Inner Border Style and Underline style.
Button style refers to adjusting the text style, its color, but also the background and border colors. Border width serves us to actually add a border. When we set this value, the border will also appear and we can select its color. We also have a border radius, if we want to trim its edges.
The Padding refers to the space around the text.
As for typography text options, this is another place where one can experiment. By default, this widget pulls the font off the theme but you can easily change it, adjust another size, width, line height, and so on.
What is important here is the hover setting. Normal is the state of the button when the mouse is not on it, and Hover when it is. We can assign a different color of text, background, and border to the Hover if there is a need for it.
Button icon style affects the icon, its size, color, and margins. There is also a setting for icons on hover.
Very similar settings are for the Inner border and Underline. Test, explore and experiment – we are sure you’ll find your way easily.
We hope we’ve made it easy for you to use this add-on. We consider it a great solution for the Add to Cart button. Try it and let us know in the comments how you like it.
In Conclusion
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!
Matt
This article helped me a ton. Thank you!