Create a “Empty Cart” button for WooCommerce

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

 

About the author

Remi Hey! My name is Rémi Corson, I'm a French WordPress Developer, I code stuff and I write from time to time ;-) Buy a coffee
Show your support

Related Posts

32 comments

  1. Michael:

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

  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

  3. jeff:

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

    • Remi:

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

      • 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)
        }
        }

        • Remi:

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

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

          • Jeff:

            Great, thank you so much!

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

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

      • 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. Muhammad Irfan:

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

  5. darrentucs:

    Hi There,

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

    Great snippet though!

  6. 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!

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

  8. VB:

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

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

  10. mwdstudio:

    Hi there,

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

    Any ideas?

  11. kevvs:

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

  12. charlespakpak:

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

Leave a Reply