A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Set a Custom Woocommerce Add to Cart Link

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:

Default Add to Cart Option in WooCommerce

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.

Default add to cart option in woocommerce

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 on the product page

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.

Add to cart button in the related product sections

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.

What is a Custom Add to Cart Link

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:

Custom Add to cart button

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:

Add to Cart Custom link with quantity

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…

How to Add Custom Add to Cart Button in Elementor With Custom Link and a Button

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.

WooCommerce simple product ID

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.

Product ID for variation product type

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.

Variable product custom Add to cart link

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).

Add to cart for grouped product

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.

Grouped product custom Add to cart link broken

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

Automatic Redirection to Cart 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:

Automaticly redirect to cart

How to Add Custom Add to Cart Button in Elementor With Qi Addons

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.

Add to Cart Button widget

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.

Add to Cart Button widget settings

As usual, look for the ID, go to Products > All Products, and find ID info on hover.

How to Set a Custom WooCommerce Add to Cart Link 1

In general settings, we add the Product ID. A button automatically appears that implies a specific action on the product whose ID we entered.

Add to Cart Button widget default

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.

Add to cart for different product types

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.

Add to Cart Button widget button settings

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.

Button Icon Settings

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.

Qi Add to cart button 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.

Button style qi

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.

Qi Typography settings

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.

Normal and hover

Button icon style affects the icon, its size, color, and margins. There is also a setting for icons on hover.

Icon button style

Very similar settings are for the Inner border and Underline. Test, explore and experiment – we are sure you’ll find your way easily.

Border and line settings

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.

Add to Cart Link gif

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!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply