Express Lane Shopping: Improving the WooCommerce add to cart button

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.

Comments

  1. says

    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

    • says

      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?

  2. andrew says

    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?

  3. Alice says

    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

  4. says

    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?

  5. says

    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

  6. Tom Griner says

    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.

  7. says

    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?

  8. John says

    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 says

      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”

  9. says

    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.

  10. says

    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?

      • says

        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 says

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

  11. says

    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?

  12. says

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

  13. says

    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

  14. John says

    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 says

      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

    • says

      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?

  15. says

    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.

  16. Robert says

    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

  17. says

    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?

  18. says

    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?

    • says

      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.

Leave a Reply