Creating a Custom Add to Cart URL – WooCommerce

The first step to convert a user into a customer is to ask him to add a product to the cart.

Natively in WooCommerce, you can add a product to the cart either from the single product page or from the shop page like adding a simple product to cart for example.

Sometimes it is needed to display a custom add to cart URL button on a featured product page where you have styled your product in an attractive way and would like to put the add to cart button at a custom area of your page.

In such a case, you can put the WooCommerce shortcode [add_to_cart] which is predefined by the WooCommerce team.

Sometimes it is not just enough to display the add to cart button. It becomes difficult when you have used a visual page builder or pricing tables to display your product or services.

You can create your own custom Add to Cart URL by the method I am going to explain you here.

As we all know that by using the default [add-to-cart] shortcode, the add to cart button displays and works well but in most of the cases, you may face styling issues due to any theme or plugin conflicts.

So, in such cases, you can create your own custom Add to Cart URL.

And trust me it is as easy as throwing a ball on the wall.

Well, the answer is that rather than displaying or embedding the whole product on a specific page, you can simply create a custom add to cart URL button and display it anywhere on the website.

You can make pricing tables and display the custom add to cart URL button at the bottom to directly add a product to the cart rather than redirecting users to the single product page.

There are many reasons to create a custom add to cart URL in WooCommerce.

Yes, of course, it is possible but you need to add a few more steps to create a custom add to cart URL for a variable product.

Along with the URL, you need to include specific variation into it to add the product to the cart.

In order to work with variable product, simply go to the specific product and after selecting the variation value, you can hit the Add to Cart button and your product goes to the cart.

For example, if I have a variable product T-shirt with attributes Size, Color then I will select Size = Small and Color = Red and as per this selection, the price updates and I can add my product to the cart by clicking on Add to Cart button.

On the cart page, right click on the main product and select Copy Link Location or Copy Link Address.

Open notepad or any text editor and paste the link that you copied. You will have the link something like this:
https://websoftglobal.com/product/product-name/?attribute_size=Small&attribute_color=Red

Now, copy the entire part just after the “?” i.e. attribute_size=Small&attribute_color=Red

Its time to start building your own custom add to cart URL as you did before in the previous steps.

Likewise, for a simple product, you needed the product ID. In the same way, for a variable product, you need the product variation ID to specify which variation of the variable product can be added to the cart when customer hit the Add to Cart button.

To get the Variation ID, simply go to the WordPress admin area and then products. Now, open the specific variable product and jump to Variation tab.

Here, you can find the Variation ID of a specific product variation as shown below.

In the above example, 786 is the product variation ID.

Now, as I asked you earlier to copy the complete link address of the variable product from the cart page. So, its time to make some basic changes to that link and your custom Add to Cart URL will be ready to use on any of the landing page or pricing tables.

Now, we need to add two statements to the link to make it work.

1. 1. ?add-to-cart=476
   2. &variation_id=786

So, the complete custom add to cart URL for a variable product in WooCommerce will look like this:
https://websoftglobal.com/?add-to-cart=123&variation_id=786&attribute_size=Small&attribute_color=Red

Replace 123 with the correct product ID and 786 with the variation ID of the specific product variation.

Now, you can use this link on any of the pages to create custom Add to Cart URL button in WooCommerce.