The Problem
Not everyone has huge carts filled with tons of goods. Not every store has tons of products which require the kind of workflow that WooCommerce initially sets up. Sometimes you don’t want a “shop” screen with product categories listed. Sometimes you don’t want a a products detail page. Sometimes you just have a “buy now” or “add to cart” button and you want to move people directly to the cart after they click it.
The problem is that WooCommerce sets things up to navigate from the shop page, to the product detail page, and from there to the cart page. That’s two clicks to cart.
What you want is 1-click to cart.
The Goal: A Better WooCommerce Add to Cart Button
Now, the truth is that WooCommerce does have a setting (WooCommerce > Settings > Catalog) that lets you navigate people directly to the cart after adding an item. This check box triggers the right behavior. But there’s one problem. It only does it from the single product page.
Maybe you’ve read about this hook you can use but you noticed it wasn’t working. That’s because it only works from the single product page.
So don’t waste time with this action:
add_to_cart_redirect
Instead, get ready to build an express lane.
You want people to click “add to cart” and have the page redirected right away to the cart.
The Solution
Here are the three steps you need to take, each of which is pretty easy. Of course if you don’t want to do the work yourself, you could contact Tweaky, who could probably do it for you for $25.
Step 1. Change the Setting
The first step is to go into your WooCommerce settings and change the routing so that you have it set to route to the cart after you click the “add to cart” button. I know it only works on single pages, but you still need to set the setting, in order to use it later.
Step 2. Change the Add to Cart Template
The second step requires you to look in your WooCommerce plugin directory.
Look in /Templates/Loop for a file called add-to-cart.php
Make a copy of that file and then open it. In that file, you’re going to look towards the bottom of it for code that outputs the “add to cart” button. It looks like this:
printf(‘<a href=”%s” rel=”nofollow” data-product_id=”%s”>%s</a>’, $link, $product->id, $product->product_type, $label);
This is the code that creates your button, and this is what you want to change. So when you find it, you’ll replace it with this code:
printf(‘<a href=”%s” rel=”nofollow” data-product_id=”%s”>%s</a>’, $link, $product->id, $label);
Now, before you think I’m telling you something horrible (like editing core files), just finish reading step 3.
Step 3. Copy Template into Theme
Now you have one last step to take. What you’re going to do is take that file that you’ve changed (the copy of the original plugin template), and you’re going to move it into your active theme folder.
But not just the file! It needs to be in a specific folder.
So inside wp-content/theme-folder/ you’re going to want to create a folder called woocommerce. Inside that, you’ll want to create a loop folder. Inside that, you’ll copy your file. That’s it!
Why This Works
In essence you’ve done two things. You’ve told WooCommerce to output the “add to cart” button that it normally does on single pages, only now you’re asking for it to always be that kind of button. This means that the feature of auto-routing will now work because WooCommerce thinks it’s on the single products page.
The second thing you’ve done is made that happen by overwriting the template files. The way it works is that WooCommerce first looks in your theme and if it doesn’t find files, then it goes back to the plugin files to look for it. You’ve basically created the place it initially looks for, and because of that, you take priority.
Thanks Chris! Another awesome tutorial for WooCommerce.
You are certainly offering a great tip and good advice. The minimum amount of clicks from selection to check-out keeps customers happy and buying again.
Thanks Chris – this was really useful.
Wouldn’t it be easier — for a one-off product — to just add the add-to-cart variable to any url?
http://domain.com/?add-to-cart=ID will add the product with the numerical ID to the cart for you, so:
http://domain.com/cart/?add-to-cart=27 will take the user to the cart and add product 27 to it.
You can even use it with Google URL tracking, like this (live) example to a site I’m working on:
http://guides.indietravelpodcast.com/cart/?add-to-cart=217&utm_source=something&utm_medium=somethingelse&utm_campaign=somethingother
Yes, for one product, on one page, you could do this. But if you have many, then changing the template is a faster approach.
I was having issues with the shortcode not properly adding items to the cart in 2.0+ and decided to use this for my products.
How do you make a add to cart button though? I want to link an image button and use that as the add to cart button – but how do I do this after following the steps above to make sure they’re redirected?
You can style a button using CSS.
A really great how-to, but it didn’t seem to work for me. Any tips?
What are you seeing?
I have a page of product grid.
After I used your suggestion, my product grid shows only one product and then a smiley face.
I think it is working… but from the Cart, can I have “continue shopping” if the user changes mind?
There should already be that. Check your cart templates (/woocommerce/templates/cart/)
Oh I fixed with that:
http://wcdocs.woothemes.com/snippets/set-a-custom-add-to-cart-url-to-redirect-to/
Hi Chris,
Is there a way to make the ‘add to cart’ button always visible on the product page, i.e. without having to pre-select the default values?
I want a customer to be able to select the product variable from the dropdown menu and be reset the values back while the ‘add to cart’ button is always visible.
And is there a way to add an error message if the customer clicks “add to cart’ but doesn’t select the required variation?
Thank you in advance for your help,
Alice
I am trying to have the add to cart button beneath an “event” listing from the plugin “event manager”. I use the shortcode for the add to cart by Id #. I want users to be directed to the cart when they click add to cart but when I make the changes above My “add to cart” button disappears completely and all the details of my event are wiped out. Any ideas?
Thanks Chris!
I followed your steps exactly and it still only adds it to cart instead of directing me to the cart. Any ideas?
Site: http://realfoodfitness.com/shop/
Thanks!
Do you have the setting checked that routes to the cart when an item is placed in it?
Yes, I’ve ticked the “Redirect to cart after adding a product to the cart (on single product pages)” page as instructed.
Hi Chris,
Awesome post! What if I want someone to click my custom “Buy” button that adds it to their cart but then redirects to a non-cart page (with more items for sale)? How would I go about doing that?
Thank you!
Warmly,
Lucy
tinytreasurehunts.com
OK, I just read a little note by woocommerce guru Jay and he basically said that the problem was due to the need of a good theme for woocommerce to work from, I changed the theme and presto, all is well.
Great Article on Woo Commerce. Thanks it has really helped me.
Hi Chris Lema,pleased to meet you. This is what I want:
I need an image can go directly to the shopping cart without showing the product page with the add to cart button. I need to use woocommerce with less steps.
How can I link the add to cart(that goes directly to the shopping cart) to an image?
Recently I had to do this on a theme, and your above suggestion did not work, as I got a php error that the printf function was missing an argument. However Changing product type to false fixed it.
before
printf(‘%s’, $link, $product->id, $product->product_type, $label);
after
printf(‘%s’, $link, $product->id, false, $label);
It then redirected to Cart after adding.
Passing ‘false’ as an argument did the trick for me. I also suspect the tutorial was written for an earlier version of woocommerce because there’s also a class being passed for the link which doesn’t feature in the tutorial’s code:
class=”add_to_cart_button button product_type_%s”
This saved my life!!! Buddy, congratulations for the excellent work and this great blog!
Just in case you wanna see where I implemente it, the address is: http://www.anunciosnaweb.com/index.php/planos
Thanks one more time!
Chris very helpful
Do you know why it would NOT work for a registered user? Looks great when they look at the page, once they register and then log back in, the express lane disappears.
Great tutorial Chris!
This is a perfect start for me with a current project – the only problem is that I need to either be able to add multiple variable products to the cart with 1 click using a shortcode based on this OR I might be able to do it using a modified version of your code and the woocommerce “Bundled Products” addon.
I need to display visuals for my products in a grid and just allow the customer to click one of the options which will add all the different variable products to the cart. Any ideas on where to start?
Check out bundled products, it might do the trick for you.
Yea, I think that’s the way I’m going to go. So do you think it’s safe to assume that if I can get my shortcode to recreate the button portion (including all the hidden inputs) of the product page I should be good to go?
Oh and the button for the bundled products addon looks like this….
product_type); ?>
So I should probably change the “$product->product_type” argument to “false” right?
That would probably work. Passing false makes it act like a button on a single page, not a group page (which doesn’t work)
Very good post. Thanks for the insightful articles on real world applications for WooCommerce.
I was using this code for a button on a landing page and it was working fine , it would add the product and go straight to checkout , but then I updated woo-commerce and now it’s not working. Any ideas?
http://domain.com/?add-to-cart=ID
Is there a way to do this in woocommerce 2.0? The code is similar but slightly different, any ideas?
Awesome post Chris. Do you think that we can still use this hook (custom add to cart URL) with your solution so that it can work with the redirect for all “add to cart” scenarios?
Chris, something seems to be amiss with this after an update 2013-03-31. The version number of the add-to-cart.php file did not change:( , it was 1.6.4 and it still is 1.6.4, but the code in the last part of the newer file is different. Old version was:
printf('%s', $link, $product->id, $product->product_type, $label);
new version is:
echo apply_filters( 'woocommerce_loop_add_to_cart_link', sprintf('%s', esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );
Hi Chris
Excellent articles, a quick question, I am trying to get all the products on single page in list view, however I want customer to select the options on the same page and not be directed to single-product page for selection of variation, I tried to follow your post “How to use WooCommerce without a Products Page” that didnt work, as we have around 7 products and 3 of these use “name your price” extension from WooThemes.
p.s. I am using the latest version (2.0.7) of woocommerce
Any help would be great please.
Regards
I’m in the same trouble as Chip D!
Could you please provide the code for the new version? Would be A-some
I would imagine that
changin this
esc_attr( $product->product_type )
to false would have the same effect
i havent tried it but
Before-
echo apply_filters( ‘woocommerce_loop_add_to_cart_link’, sprintf(‘%s’, esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), esc_attr( $product->product_type ), esc_html( $link['label'] ) ), $product, $link );
After –
echo apply_filters( ‘woocommerce_loop_add_to_cart_link’, sprintf(‘%s’, esc_url( $link['url'] ), esc_attr( $product->id ), esc_attr( $product->get_sku() ), esc_attr( $link['class'] ), false, esc_html( $link['label'] ) ), $product, $link );
thats my guess
Chris,
Thank you for taking the time to post on these subjects.
One idea that I think would benefit from the focus of your attention is the idea of “bundled products” in WooCommerce.
I have the current bundle plug-in being sold. However, it does not offer a way to have variable quantities of the sku’s with variations on each quantity.
For example, we can have T-Shirts in Blue or Green and Large or Small, but we can’t offer a way to select 4 blue small t-shirts,3 Green Large and 3 blue small for a total of 10 shirts all for a bundled price of $19.99.
Unless, I am misreading the support documentation, one can change the variations in the bundle, but not the quantity.
I am working on a Formidable Forms Display that would ascertain the number of each sku, and the appropriate variation. Where I could use your help is some direction on how to hand the gathered information off to WooCommerce.