How to Create a Custom Add to Cart link in WooCommerce

In an online business, marketing is a must for the sellers to attract more customers coming to their store and purchase. Thus, an affiliated button is a literally potential method in marketing that is on-trend thanks to the Internet. That said, a custom Add to Cart link is very popular, so that you should catch up with the mainstream of the trend as an effective way to implement it in your website.

This article will introduce a tutorial of How to create a custom Add to Cart link in WooCommerce, describing the steps of adding one or more products to the cart and redirect to specific website pages.

Without further ado, let’s get right into the post now!

Benefits of using Add to Cart link

Firstly, we would like to show you a typical example of an Add to Cart scheme, helping you know how a product is displayed in a manner and can appeal to customers to purchase the goods on the spot. However, before jumping to the main part of this article, it is better to decide whether you should add the Add to cart link or not, after considering its benefits, which we will mention right now:

• Add products to the customer’s cart automatically when they visit a product page

• Attract customers directly from any pages to enter your store. Once they successfully add a product to their cart - apparently increase sales

• Replace standard WooCommerce plugin drop-down box with radio buttons in variable products

• Enable to open the external product in a new window on add to cart option

• Determine the number of products that will be added to the cart through the URL in order to avoid order misunderstandings

How to Create Custom Add to Cart links in WooCommerce

Step 1: Find the product ID

In the first stage of the tutorial, let’s start with simple products which are easy to add a cart link through a custom URL. In order to customize the link as we desire, we have to search the product ID by the steps: WooCommerce > Products.

Below each product information, when dragging to that product you choose, you can find the ID despite the fact that the number is too small to see.

Now you can copy the ID of the product that you want to custom Add to Cart link:

After getting the product ID, you are entering the Edit theme of your store so as to add the link as you want:

Then, you can update the change and check if the Add to Cart link is working or not. Here is an example of adding the link in the “Click me” section, as you can see below:

When choosing it, it directly comes to that product cart information that they did add before. Even the link on a tab is modified as well.

It is only a demonstration of showing you where to add the link. As for the type of cart links, we will mention them in the steps specifically, so you can use one of them depending on the need of your business.

Step 2: Add to Cart link in single product

Once you know an ID product, it is incredibly easy to add the link as given below, like the guide we showed you in step 1:

href = “http://yourdomain.com/?add-to-cart=number″

Notice that you must change the domain name into your store domain, so the button can work out of the box seamlessly.

URL : One simple product to cart with quantity

href = ”http://yourdomain.com/?add-to-cart=25&quantity=3″

One product with ID as 25 and quantity as 3 will be added to the cart. Keep in mind that two different products cannot be added to the same cart link.

URL : One simple product to cart and then redirect to cart

href = ”http://yourdomain.com/cart/?add-to-cart=25″

If you modify the URL for the cart, make sure that you also change “/cart/” on the above link we gave you, depending on which type of products are.

After doing that, as for redirecting to a cart, you have to take one more step: WooCommerce > Settings > Products > General. Next, check or tick the enabled AJAX “Add to Cart” section.

URL : One simple product to cart and redirect to checkout page or any page

For checkout: href = ”http://yourdomain.com/checkout/?add-to-cart=25”

For any page: href=”https://yourdomain.com/your_custom_page/?add-to-cart=25″

Similar to the previous term we mentioned, you need to navigate to WooCommerce > Settings > Products > General to redirect to any page. Then, enable the AJAX “Add to Cart” button and disable “Redirect to cart page after successful addition” at the same time.

Step 3: Add to Cart link in grouped products

Talking about grouped products, they basically are a combination of two or more products customized to Add to Cart links individually. The way that utilization of group products in a cart provides a time-saving benefit to the customer.

URL : A grouped product to the cart

It would be a little bit harder for you to find a grouped product ID than a single ID product, which can be found through the above step: Products > All products. After that, you can use a reference like this:

href=”http://yourdomain.com/?add-to-cart=1000&quantity[1800]=5&quantity[1900]=2″

In case, we are adding the grouped products ID 1000 including the 5x product ID 1800 and 2x product ID 1900. Remember that the products need to be clarified for the quantity.

Now you have successfully added the WooCommerce “Add to Cart” URLs. After understanding this module feature, let’s move to the last type of Add to Cart link.

Step 4: Add to Cart link in variable products

Here things get relatively challenging for you!

In this situation, there will be one or more attributes and quantities of the variable products. Of course, before customizing any Add to Cart links, you must get the ID variable products by following the Products > Variations.

For a better demonstration, we give you an example below. When you have a product ID, variation ID and its particular features, now you can start customizing the cart URL.

URL : One variable product to cart with 1 attribute

href=”http://yourdomain.com/?add-to-cart=47&variation_id=88&attribute_pa_colour=blue”

On the above link form, we add a variable product ID 47 as well as the variation ID 88, where its attribute is blue color. Although it is complicated to do, this example makes it easier for you to work on this.

URL : One variable product to cart with 2 attributes

href=”http://yourdomain.com/?add-to-cart=47&variation_id=88&attribute_pa_colour=blue&attribute_pa_size=m”

For two or more attributes, don’t worry because you just have to add one more attribute in the link form. In the example, the variable product ID is 47, its variation ID is 88.

URL: One variable product to cart with 2 attributes and quantity

href=”http://yourdomain.com/?add-to-cart=47&variation_id=88&quantity=3&attribute_pa_colour=blue&attribute_pa_size=m”

With a product quantity, you add the information after the variation ID product like the one we display above.

URL : One variable product to cart and redirect to cart

href=”http://yourdomain.com/cart/?add-to-cart=47&variation_id=88&attribute_pa_colour=blue”

URL : One variable product to cart and redirect to checkout

href=”http://yourdomain.com/checkout/?add-to-cart=47&variation_id=88&attribute_pa_colour=blue”

URL : One variable product to cart and redirect to any page

href=”http://yourdomain.com/any-page-url/?add-to-cart=47&variation_id=88&attribute_pa_colour=blue”

Step 5: Redirection to cart page automatically

Indeed, when you can redirect your visitors to the Cart page immediately, it is likely to increase the rate of purchasing those goods. To do that, you set that option in WooCommerce settings. From this method, you no longer have to set the link, in return, the customers will be automatically taken to the Cart page right after they add the product to the cart.

To automate it, go to Woocommerce > Settings > Products tab:

Common problems

Add to Cart error

If the Add to Cart link does not work, maybe the error come from one of the reasons below:

• A Theme or Plugin conflict

• Memory issues

• Wrong Cart or Checkout page link

Therefore, you should check all possible factors above, then you can need help from WooCommerce center support to discuss your problem with them.

Conflict theme or plugin

The first piece of advice for you as you see the conflict in your store is to disable all your current plugins, excluding the WooCommerce plugin. Next, check whether it can be solved itself or not. If it cannot resolve the issue, the main possibility derives from plugin conflicts. Once you find where it is from, you are allowed to enable the plugins again.

An alternative solution for you is to switch to a default theme. In case it works, you can summarize that that is from a technical fault in the theme. Furthermore, you need to contact the theme vendor who created the design to find out the conflict. Or else, if you buy the theme on the website, you have to contact them to get help for your problem.

Final words

Now, after reading our share - How to create a Custom Add to Cart link in WooCommerce, it is up to you to decide carefully about which options would work best for your store. Indeed, there will be no absolute recipe to do a successful online business since the goal of each owner is different. Therefore, take other advice as a suggestion to make better progress, but you yourself must know your goal, products, and targeted customers well. Once you get it, it is not far from creating a good user experience.

Do you use some of the options from our suggestion above? Feel free to ask questions and share your experience with us in the comment section! It would be great if this article is useful for your practice.

If you are interested in our post, you can also check out some of the other articles as well to make your business run better!