Remi's blog

Create a “Empty Cart” button for WooCommerce

—

by

Remi
in ,

Here is quick tutorial to show you how to add a “Empty Cart” button on the WooCommerce cart page. Here is the result:

woocommerce-empty-cart-button

To do so, there are two steps. The first one is to add this little snippet in your functions.php file (this file is located in your theme folder):

And the second step is to create a custom template for the cart. Basically a custom template allow you to override WooCommerce default files and use your own custom files instead. Here is a quick tutorial that will explain you how to create your custom templates: http://docs.woothemes.com/document/template-structure/

Finally, in “templates/cart/cart.php”, add at line 134 the HTML code to output the button:

And that’s it! ;-)

 

32 responses to “Create a “Empty Cart” button for WooCommerce”

  1. Michael

    Is there a way to empty cart automatically after a session of 10 minutes?

    1. Remi

      yes probably, otherwise you can check the “clean sessions when logging out” in settings.

    2. Seth Neal

      Michael, did you ever find out a way to have the cart clear after a set period of time? I have a one product site that skips the cart–which is great–except if people have abandoned checkout previously and then go to buy the product again they have multiple items at check out.

      1. Remi

        you need to setup a cron task that activate the function to empty the cart depending on the user sessions.

  2. rajit

    I added the code and the button appeared but when I click it, the cart won’t empty …
    my test site is : babacreation.com/dev197

    1. Remi

      I don’t see the button on your cart page

  3. jeff

    Is there a way to redirect to a new page like the shop page after clicking the empty cart button?

    1. Remi

      Sure, simply add a wp_redirect() in the if statement

      1. Jeff

        Like so?

        // check for empty-cart get param to clear the cart
        add_action( ‘init’, ‘woocommerce_clear_cart_url’ );
        function woocommerce_clear_cart_url() {
        global $woocommerce;

        if ( isset( $_GET[’empty-cart’] ) ) {
        $woocommerce->cart->empty_cart();
        wp_redirect(example.com/shop)
        }
        }

        1. Remi

          yes, simply change a little bit the wp_redirect() to:

          wp_redirect( ‘http://www.example.com’ ); exit;

          1. Jeff

            Great, thank you so much!

          2. Jeff

            Sorry to keep bugging you but just trying to get this to work.

            I’m actually trying to add this to the checkout page. Is there something in the function that needs to be modified for the link to work on the checkout page?

            Based on the php code that existed before, I rewrote the link like this:
            …
            ‘cart->get_cart_url() . ‘?empty-cart”> Empty Cart ‘
            …

            Unfortunately, that is linking to ‘example.com/checkout?empty-cart’.

            Thanks again for your help.

          3. Jeff

            I take all that back. Everything works so thank you so much!

            Just so you know, this button was the key for me to get rid of the cart page entirely.

            In the settings, I change the cart page from “Cart” to “Checkout”.

            Then I added remove links for each item in the order review table on the checkout page so that you can still edit the “cart.”

            I used your “empty cart” button instead of an ordinary “remove from cart” link only if there is only one item left in the cart. Then by adding the redirect, the checkout page doesn’t fail due to an empty cart.

      2. madzzoni

        Hello Remi, I’ve tried this redirect snippet in my theme functions.php, because the Checkout-page makes to many redirect Loop when empty the Cart:

        add_action( ‘init’, ‘woocommerce_clear_cart_url’ );
        function woocommerce_clear_cart_url() {
        global $woocommerce;

        if ( isset( $_GET['empty-cart'] ) ) {
        $woocommerce->cart->empty_cart();
        wp_redirect('http://ivsstiftelse.dk/registrering/'); exit;
        }
        }

        But when i try to empty the Cart on my Checkout-page (https://ivsstiftelse.dk/bestilling-checkout/) the page still makes to many redirect Loops instead of redirect.

        Can you help med here??

        Thx.

  4. Jeff

    Sorry that code looked like this:

    https://gist.github.com/chishaku/7344295

  5. Muhammad Irfan

    Thanks Alot Remi . . .
    Your Tutorials Are really helpful for me . . .
    How can i get ur video tutorials???

  6. darrentucs

    Hi There,

    How can I add this to the mini cart in woocommerce. Its doesnt seem to work.

    Great snippet though!

    1. Remi

      you need to edit the mini-cart.php custom template in templates/cart/. Basically a custom template allows you to override WooCommerce default files and use your own custom files instead. Here is a quick tutorial that will explain you how to create your custom templates: http://docs.woothemes.com/document/template-structure/

      1. darrentucs

        Hi Remi,

        Ok Ive done that, but everytime I click the empty cart button, I just get redirected to the cart page.

        Ive cleared the cache, killed all cookies and sessions and same thing.

        Is there something im doing wrong?

        1. Remi

          you’re redirected to the cart AND it’s not empty?

          1. darrentucs

            That’s correct. I just get redirected back to the cart page and the cart doesn’t empty.

            I’d like to redirect it back to a specific page, but I need the cart to empty first.

  7. Pippa

    Dear Remi,

    thank you so much for this nice tut!

    Unfortunately, I can’t get the button to work in my checkout page, it breaks the site.

    I would appreciate if you have an instruction for dummies.

    Kind regards!

    1. Pippa

      I’m a fool and so sorry! Forgot the

      global $woocommerce;

      in my review-order.php… Talking helps! ;o)

      1. Remi

        Oh, right, well spotted!

    2. Remi

      If the snippet breaks the site it means that you pasted it incorrectly, a common issue is to have two opening or closing PHP tags.

  8. pcooper114

    Hey Remi,

    I’m working on a site that bypasses the cart page altogether. The client wants them to be able to click buy and go directly to checkout…. However, they are now realizing that doing that means they can’t empty what is already in the cart. Anyway you can make this work for the Checkout page?

    Thanks
    Patrick

  9. VB

    Is it possible to redirect to homepage when cart is empty?

  10. sanjays442

    hey remi im facing a problem in quick checkout in woocommerce
    when i add item using quick checkout the item is loaded in cart but when add next item previous item is showing in cart

  11. mwdstudio

    Hi there,

    When I add this, all my buttons with cart disappear as well as the basket totals underneath.

    Any ideas?

    1. kevvs

      Use:
      <a href="cart->get_cart_url(); ?>?empty-cart" class="button">

  12. kevvs

    @mwdstudio use cart->get_cart_url(); ?> in your link instead of cart->get_cart_url(); ?>

  13. charlespakpak

    Hello I’ve the same problem that mwdstudio, nothing appears now and I don’t understand your advise just above….

Leave a Reply