Adding products to the cart is the first step to convert a user to a customer.
In WooCommerce you can add products to the cart from their details page or from the shop page, for some kind of products, like simple products in example.
But sometimes this is not enough. It would be a lot better to have a landing page featuring the awesome product you just created.
In this case you could use the shortcode [add_to_cart].
But you can also create your own button by using a custom Add to Cart URL. It could be particularly useful when you have a visual builder or a pricing table plugin.
In those cases the Add to Cart shortcode may not work properly, may have styling issues because it could be not compatible with the plugin you are using.
In those cases, you will need to create your own Add to Cart URL.
Doing so is easy as drinking a glass of water.
To begin, open your dashboard and go to Products.
In the products’ list, hover over the product you want to create a custom Add to Cart URL for. On the left, you will notice a text like ID: 123 where 123 is the ID of that product.
To create a custom Add to Cart URL for that product, you will need to add ?add-to-cart=123 replacing 123 with the ID of your product.
The result will be something like https://www.yourwebsite.com/?add-to-cart=123. Whoever clicks on this link, will add the product 123 to their cart.
What is awesome about this?
That you can use it anywhere. You could create a pricing table with different tiers for your product and people will be able to skip the product page and add it directly from the pricing table on your landing page which is already properly configured for a Google Ads campaign and well indexed on Google and other search engines.
Can I create a URL for a variable product too?
Of course. That needs more steps though since you need to create the URL including the specific variation you want to add to the cart.
The easiest way to create an Add to Cart URL for a variable product is by going to the variable product page and choosing the options that you want to use in your URL. Then add the product to the cart and visit the cart page.
In example, I have a T-Shirt for which the customer can choose the size and the color. I want to feature the black small T-shirt. So I’ll go to the product page and will choose Small for the size and Black for the color and then I’ll click the button Add to Cart.
By visiting the cart I’ll have this:
Click on the product name with the right mouse button and click on Copy Link Address.
You will have something like this: https://www.yourwebsite.com/product/product-name/?attribute_size=Small&attribute_color=Black
Copy the part after the ? in the URL: attribute_size=Small&attribute_color=Black
Then start building your URL exactly like you did before, adding your product ID and the ?add-to-cart=123 in the URL. After this last part, you need the variation ID to specify exactly what the customer will add to the cart. To get the variation ID, open the product admin page, and click on the tab Variations. In the variations list, you will see their ID on the left, in this example you will see a variation like this in your admin:
117 is the variation ID. So add &variation_id=117 in the URL.
You are not ready yet. After the variation ID you need to add the part of the URL I asked you to copy before from the cart page.
The complete URL will look like: https://www.yourdomain.com/?add-to-cart=123&variation_id=117&attribute_size=Small&attribute_color=Black
Now use this URL on your landing page, on your pricing table, or in a button, wherever you want.
By clicking on it, your customers will add a Small Black T-shirt to their cart.
Leave a Reply