Express Lane Shopping: Improving the WooCommerce add to cart button

68 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.

About This Site

This site is hosted by Pagely - running on Amazon's hardware, making it lightning fast. They're a managed WordPress host which means they take care of my site so I don't have to. Starting at $24/month, this may be the perfect solution for you too.

68 comments

  1. Craig 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

    • 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. Matt 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. Lucy 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. Yolanda 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. philmykland 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. Matt 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?

      • Matt 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. rwilk 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. Chip D. 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. Zafi 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

    • 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. 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

    • Tarun Rai says:

      Hi Robert,

      You could get this done using Product Enquiry Pro for WooCommerce. This plugin provides an enquiry button on every product page just below the add to cart button. On click, this button opens a quick lightbox with a form to accept customer details and enquiry.

      For cases such as rentals, you can easily use this plugin to get more leads and reply back via mail. For more details you can take a look here. http://wisdmlabs.com/woocommerce-product-enquiry-pro/

  17. 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. 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?

    • John 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.

  19. Nico says:

    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

  20. Cleo says:

    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

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

  21. javed says:

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

  22. Brian Merritt says:

    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
    }

  23. Adrian Halliday says:

    I was quite frustrated with the fact that WooCommerce has limited functionality to only one workflow or the other. IE, I miss the days of having both an Add to Cart and Buy Now button on a page to let the user decided which action to take. Maybe research showed having only one option is less confusing.

    Well, I took matters into my own hands. I needed most products to use “Add to Cart” without redirect, but for two other products, I needed immediate redirect.

    By setting up a custom Buy Now button in a content page, and then hacking add-to-cart.js in the WooCommerce core, I was able to setup custom functionality for my custom button.

    Just wish there was a better (IE built in) way to do this…

  24. kay singian says:

    Hi, I’d like to know if there is a hack for this software to include both the Add-to-Cart Button and Buy Button? WooCommerce lets me choose between the two, but I can’t find a solution to let me include the two buttons on my project. And by the way, I am using the WooCommerce Amazon Affiliates to show Amazon Products.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>