Express Lane Shopping: Improving the WooCommerce add to cart button

64 Comments

woocommerce add to cart tweaks

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.

Like this post? Never miss one again.

Never miss my weekly digest of posts, and get a bonus video on WordPress hosting.

  • http://gravatar.com/debbiebigham Gregg Franklin

    Thanks Chris! Another awesome tutorial for WooCommerce.

  • Pingback: How to change the Add to Cart text in WooCommerce (and other changes)

  • Pingback: How to use WooCommerce without a Products Page

  • http://24x7Social.com denniscarpenter

    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.

  • @simongarlick

    Thanks Chris – this was really useful.

  • http://indietravelmedia.com/ Craig

    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

    • http://chrislema.com chrislema

      Yes, for one product, on one page, you could do this. But if you have many, then changing the template is a faster approach.

    • http://www.facebook.com/devinSD Devin Walker

      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.

    • http://www.youronlinesuccess.com.au Vanessa Rothwell

      Hi, This all sounds great. I just need to do a simple add to cart from a button image on a regular page and i tried the solution above by Craig. However I find that although it goes to the cart page, it ignores the ?add-to-cart=ID action so there is no product added (and just says cart is empty). Do you know how I can get this to work with a simple url?

  • andrew

    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?

    • http://chrislema.com chrislema

      You can style a button using CSS.

  • http://www.tinytreasurehunts.com Lucy

    A really great how-to, but it didn’t seem to work for me. Any tips?

    • http://chrislema.com chrislema

      What are you seeing?

  • http://www.motherhoodmeansbusiness.com/shop MeeMee

    I have a page of product grid.
    After I used your suggestion, my product grid shows only one product and then a smiley face.
    :-(

  • http://www.motherhoodmeansbusiness.com/shop MeeMee

    I think it is working… but from the Cart, can I have “continue shopping” if the user changes mind?

    • http://chrislema.com chrislema

      There should already be that. Check your cart templates (/woocommerce/templates/cart/)

  • http://www.elan42.com Elan42
  • Alice

    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

  • http://biomimeticdentistryce.com Matt

    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?

  • http://www.NirdBird.com Stewart

    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!

    • http://chrislema.com chrislema

      Do you have the setting checked that routes to the cart when an item is placed in it?

      • http://www.NirdBird.com Stewart

        Yes, I’ve ticked the “Redirect to cart after adding a product to the cart (on single product pages)” page as instructed.

  • http://www.tinytreasurehunts.com Lucy

    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

  • Tom Griner

    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.

  • http://kipkem.wordpress.com kipkem

    Great Article on Woo Commerce. Thanks it has really helped me.

  • http://gravatar.com/yoligrana Yolanda

    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?

  • John

    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.

    • Buj

      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”

      • L.

        Yes, this did the trick for me as well. I had a problem with the class.
        Thanks guys!

  • http://www.anunciosnaweb.com Alexandre

    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!

  • http://portaldistribution.com philmykland

    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.

  • http://corradomatt.com Matt

    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?

    • http://chrislema.com chrislema

      Check out bundled products, it might do the trick for you.

      • http://corradomatt.com Matt

        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?

        • John Caldwell

          That would probably work. Passing false makes it act like a button on a single page, not a group page (which doesn’t work)

  • http://www.taylormoss.me taylor

    Very good post. Thanks for the insightful articles on real world applications for WooCommerce.

  • http://www.goodwinenglish.com Randall League

    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

  • http://52ps.co.uk Michael

    Is there a way to do this in woocommerce 2.0? The code is similar but slightly different, any ideas?

  • http://gravatar.com/rwilk rwilk

    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?

  • http://marine.the-justgroup.com/ Chip D.

    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 );

    • http://gravatar.com/rudometkin rudometkin

      Hi, Chip!
      Have you solved the problem with the new version of woocommerce?

      • http://chrislema.com chrislema

        If you read above, in the comments, someone looks like they did resolve it. I also wrote about a slightly different hack here: http://chrislema.com/woocommerce-tips/

  • http://gravatar.com/zaffarn Zafi

    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

  • http://antropologisk.dk Mark Buskbjerg

    I’m in the same trouble as Chip D!

    Could you please provide the code for the new version? Would be A-some

  • John

    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

    • Patrick

      Dear John,
      sorry, but no effect on this one I have to admit.

      I’d love to have a helping hand on that subject too as I’m messing around with it for two full days now…

      Hope to get some help here … :)

      Thanks in advance
      Patrick

      • http://chrislema.com chrislema

        Patrick,
        Sorry you’re not getting answers here. Have you contacted WooThemes for support?

        • Patrick

          Hi Chris,
          thank you for the hint ;) Have no answer from woo so far…

          CU Patrick – and thank you for the good work on your blog

    • https://www.facebook.com/greg.mcewanmarriott Greg McEwan Marriott

      mmm just tried that with – no go…. i have the changed add to cart php file sitting in mytheme/woocommerce/loop …. i also tried mytheme/woocommerce/templates/loop… no luck …. ajax option is off in admin and redirect is on in admin… original add to cart is where it was

      any ideas?

  • http://gravatar.com/johnlanglois John Langlois

    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.

  • Robert

    Chris,

    do you know if there is a solution for two different add to cart buttons?

    1 button which is generally used to buy items
    1 button (for the category: rental), which doesn’t say ‘add to cart’ but ‘rent me’

    Hope to hear from you

    Cheers,
    Robert

  • http://guitarplayeracademy.com Kenny Salter

    How do you remove the continue shopping button from the cart page

  • http://gravatar.com/mediotic José Esteban Mucientes Manso

    Hey!!

    I came here as I’m trying to find a solution to change the add to cart redirect link from cart to main shop URL.

    As far as I’ve seen (and I’m not very code savvy) this might be done on WC 2.0 and so on using a custom function, the same as we do when changing the order of products info.

    Couldn’t the solution be that? Anyone willing to try it?

  • http://gravatar.com/belalmubarik belalmubarikBilal

    Nice post Chrislema.
    Is it possible to add the functionality of ‘Buy’ button on ‘Ad to cart’ button?
    Such that if I click on button it redirects me to another page but not on checkout page (Just like as it happens on affiliate website- visitor is redirected to product owner’s website).
    I can change the name of ‘add to cart’ to ‘Buy’ easily from settings but how can I add a unique link every time I post a new product on my website from the admin panel?

    • http://Www.nocanvas.com John

      Choose ‘External/Affiliate’ from the product type drop down. This will remove unnecessary tabs such as tax and inventory and insert a new product URL field. This is the destination at which users can purchase the product. Rather than add to cart buttons, they will see a read more button directing them to this URL.

      • http://gravatar.com/belalmubarik Bilal

        Thank you John :)

  • http://www.leewriteprep.com Lilee

    I found a free plugin that skips the cart and goes to a direct checkout, which is what I was searching for. Maybe it’ll help some others too:
    http://wordpress.org/plugins/woocommerce-direct-checkout/

    • http://gravatar.com/belalmubarik belalmubarik

      Thanks Lilee. That was helpful :)

  • Pingback: Tips for WooCommerce | Heidi

  • Pingback: 100 WooCommerce Tips and Tricks - Pootlepress

  • http://www.instantmacsupport.nl Nico

    Hi Chris, Thanks for your post. I implemented in my site and it works very nice. I combined it with WooCommerce. Visitors can drop selected products in the shopping basket and are directed to the checkout. All from one click at the landing page. Check it out: http://www.instantmacsupport.nl

  • http:/jaelcreative.com/ Cleo

    I figured out the URL string parameters to pass in quantity for a “single” and “variation” product. So, my issue was “The client has to separate carts (on diff domains) but want to only use 1 cart”.

    So what I plan on doing is from the details page of the site that needs to “Add to the cart” of a diff site (which has the same products but maybe diff product IDs) is have a custom meta field value in the admin, in which I can insert the product ID for that same product on the destination site’s cart.

    On the front-end of the traffic driving site’s details page (where I want to push to a diff cart from) I will have a custom “Add to Cart” button that shows depending on the isset() of the custom meta field value existing.

    IF it exist I will show the custom button that adds the add in the URL string and open the link in the same window, also passing in the quantity if it has changed.

    Thus, doing a cross domain form POST via thr URL string.

    =======================================================

    Variation Product (Must pass in the “attribute” that makes the price different):
    /cart/?add-to-cart=18&variation_id=21&attribute_pa_sizes=8-ounces&quantity=5

    =======================================================

    Single Product (THIS WORKS FOR SINGLE):
    /cart/?add-to-cart=1273&quantity=5

    =======================================================

  • javed

    Chris is that possible to add the qyt box with variation box where my product list is appearing on my homepage?

  • Brian Merritt

    Woo make it very easy to skip the cart these days. It’s explained here: http://docs.woothemes.com/document/set-a-custom-add-to-cart-url-to-redirect-to/

    So just add your favourite add to cart link (?add-to-cart=956 etc etc) and the following code to your theme’s functions.php…

    add_filter(‘add_to_cart_redirect’, ‘custom_add_to_cart_redirect’);

    function custom_add_to_cart_redirect() {
    return get_permalink(get_option(‘woocommerce_checkout_page_id’)); // Replace with the url of your choosing
    }