FEWER clicks lead to MORE purchases.
A wise man once said, “He who clicks less, shall squander more”. Just kidding, it was not a wise old man, but the Marketing Science Institute.
In 2020 they published a paper that explores the science of this for you nerds (🙋♂️ proud card-carrying member here) out there, but it makes sense, doesn’t it? If we are presented with something we are somewhat interested in, and the path to purchase has a minimal amount of friction, we are more likely to throw money at it like it is a commercial with starving street puppies set to “In the arms of an angel” by Sarah McLachlan as the soundtrack.
You know what I’m talking about.
We are all about helping folks feed those puppies, so let’s take a look.
Table of Contents
Why create a custom “Add-to-Cart” URL for WooCommerce?
The answer is really simple. The fewer hurdles (clicks) you place between the moment a customer visits your site and the finish line (purchase), the more likely they are to complete the race. This means that not only should your homepages be designed in a way that allows the customer to get to the content they covet most pain-free, but your marketing strategy should also employ easy links to get the customer to make a purchase. Enter “Add-to-Cart” URLs.
For those that might be in the dark, an “Add-to-Cart” URL is a clickable link that will automatically add a product from your online store to the customer’s cart when clicked. This makes the process seamless when you have embedded this link in things like your online PPC (Pay-Per-Click) advertising, social posts, and email marketing. All this is in the name of boosting your revenue. Our “Why”.
In this tutorial we will show you how to construct various WooCommerce “Add-to-Cart” URLs using Simple Products, Variable Products, and Grouped Products.
NOTE:One limitation of this method is that you can only add 1 product to the cart per link, not multiple. If you want to work around this, you should create a grouped product.
Anatomy of a WooCommerce “Add-to-Cart” URL
To get grounded I think it would be smart to first take a peek at what these WooCommerce “Add-to-Cart” URLs look like and dissect the information.
Take a look below at a link I built that will help you get a Divi Engine Membership if you don’t have one yet 😉 (Copy and paste this in your browser to see what happens, dare ya!).
https://diviengine.com/checkout/?add-to-cart=61493&quantity=1
Now some of this is pretty straightforward like the domain, but then there are some other parts that bare some explanation, and here we go.
https://diviengine.com
This should be pretty explanatory, and if it is not, check out some of our other tutorials. The first part is the URL for the domain of our WooCommerce store. Pretty simple stuff, so let’s move on.
/checkout/
You can actually control where the user lands after the product has been added to the cart which can be pretty useful. In this example WooCommerce URL I am taking the user directly to the checkout page so that we can get that money. Remember, we are trying to minimize clicks to conversion.
Alternatively, you could of course also take them to a different page better explain what just happened, which is a certain product was added to their cart. I would then also maybe offer an additional coupon code they can use on the checkout page, it is really up to the marketing brains at your agency.
Got that? Good! Let’s move on.
?add-to-cart=61493
Admittedly, this part can get a little more confusing, so let me explain what is going on here.
This is what devs call a query string. These are parts of URLs that can pull some information (a product) from the website database, then perform a function (add it to the cart) on it.
That makes sense, right? But what about those crazy numbers? Glad you asked.
This is the product id assigned to your fancy product in the database. In this case, the 61493 represents our Annual Divi Engine Membership (that includes all our plugins and courses 🎉). Finding this is probably the most complicated step of building your custom WooCommerce “Add-to-Cart” URL, but it is not complicated at all.
Depending on the type of product you are adding, the spot where you find the ID will vary, so we will cover that a little later in the tutorial.
Let’s cover the last part of our WooCommerce “Add-to-Cart” URL which is also pretty easy.
&quantity=1
Yes, I know you’re smart, this is where you specify the quantity of the product you want to add to the cart. Let me just explain one quick thing about query strings.
Sometimes devs want to pass multiple pieces of information to your website and perform functions with that information. Oh look, this is an additional piece of information we need, like the number of products. Smart.
To string multiple query strings together, we use an ampersand (&), and that ladies and gentlemen is why this part of our custom WooCommerce “Add-to-Cart” URL starts with one.
You didn’t know we were going to get this deep into it, did you? Now that we are all smarter, let’s look at how we would use this new knowledge to build WooCommerce “Add-to-Cart” URLs for the different product types I mentioned earlier.
Create a URL to add a Simple Product to the cart
Follow these steps:
From the WordPress dashboard, click on "Products"
Find the simple product you wish to be added to the cart
Hover the product with your mouse and you'll see the product ID directly under the title
That is super easy, so now you can just add that to your URL, and you are good to go.
If using this example of Divi Protect, and wanted the custom WooCommerce URL to add 1 product to the cart, then take the user to our landing page, the resulting URL would be:
https://diviengine.com/?add-to-cart=1049&quantity=1
To take them directly to the checkout page, the resulting URL would be:
https://diviengine.com/checkout/?add-to-cart=1049&quantity=1
Create a URL to add a Variable Product to the cart
Variable products require a little bit more leg work, but only the littlest amount of little.
Follow these steps:
From the WordPress dashboard, click on "Products"
Click on the variable product you wish to be added to the cart
Scroll down to the Product data and click on Variations
Find the variation you want to add to cart and note the product ID on the left
Not too complicated with only one extra step, now you can just add that to your URL, and you are good to go.
Switching to an example of a Lifetime Divi Engine Membership, we want the custom WooCommerce URL to add 1 product to the cart, then take the user to our landing page, the resulting URL is:
https://diviengine.com/?add-to-cart=61494&quantity=1
To take them directly to the checkout page, the resulting URL would be:
https://diviengine.com/checkout/?add-to-cart=61494&quantity=1
Create a URL to add a Grouped Product to the cart
Lucky for you, this is just as easy as getting the product ID for simple products. Exactly the same, actually.
Follow these steps:
From the WordPress dashboard, click on "Products"
Find the grouped product you wish to be added to the cart
Hover the product with your mouse and you'll see the product ID directly under the title
By now you are a pro, so you did that with your eyes closed, didn’t you?
In this example I created a grouped product with a few linked items, we want the custom WooCommerce URL to add 1 group to the cart, then take the user to our landing page, the resulting URL is:
https://diviengine.com/?add-to-cart=1902&quantity=1
To take them directly to the checkout page, the resulting URL would be:
https://diviengine.com/checkout/?add-to-cart=1902&quantity=1
Don’t be gettin’ *clicky* wit it…
Conclusion
And bam! There you have it. You are now well on your way to limiting those clicks and increasing your conversions. Sounds good to me.
We hope you enjoyed this Guide to creating custom WooCommerce “Add-to-Cart” URLs using no plugins at all. Let us know what you loved about it and how you will be using this on future projects in the comments below.
Catch you in another tutorial real soon!
0 Comments