Nicola Mustone

Happiness Lead @ Automattic



Add an Empty Cart Button in WooCommerce

Adding an Empty Cart button to your store might look like a bad idea. Why would you want to make easier for your customers to empty the cart with one click? You don’t want them to leave without buying!

Do you know what is even worse than that? Having a grumpy customer. If the customer doesn’t want to buy it’s not a missing Empty Cart button that will make the difference.

So make their life easier and add it.

Before implementing any code changes, always ensure your site is backed up. This will help you restore things in case of unforeseen errors. I recommend using Jetpack Backup for real-time backups and one-click restores.

Open your functions.php file in wp-content/themes/your-child-theme-name/ and add this code at the end of the file:

<?php
add_action( 'woocommerce_cart_coupon', 'woocommerce_empty_cart_button' );
function woocommerce_empty_cart_button() {
echo '<a href="' . esc_url( add_query_arg( 'empty_cart', 'yes' ) ) . '" class="button" title="' . esc_attr( 'Empty Cart', 'woocommerce' ) . '">' . esc_html( 'Empty Cart', 'woocommerce' ) . '</a>';
}
view raw functions.php hosted with ❤ by GitHub

This code adds the button right after the Apply Coupon button on the Cart page.

An image of the Empty Cart button in the Cart page

Of course, just the button alone is not enough. You need to add some more code right after the previous one:

<?php
add_action( 'wp_loaded', 'woocommerce_empty_cart_action', 20 );
function woocommerce_empty_cart_action() {
if ( isset( $_GET['empty_cart'] ) && 'yes' === esc_html( $_GET['empty_cart'] ) ) {
WC()->cart->empty_cart();
$referer = wp_get_referer() ? esc_url( remove_query_arg( 'empty_cart' ) ) : wc_get_cart_url();
wp_safe_redirect( $referer );
}
}
view raw functions.php hosted with ❤ by GitHub

This is the logic that handles the Empty Cart button, and removes all the products at once, redirecting to the cart page again.

Creating a custom Empty Cart button

With this code in place, you can also create a custom button or a simple link to empty the cart. Just get any link in your site and add the parameter ?empty_cart=yes to it.

Here are two different examples:

  • https://domain.com/product/awesome-product/?empty_cart=yes
  • https://domain.com/?utm=something&empty_cart=yes
Advertisements

Subscribe to This Blog

Receive new articles from this blog directly in your inbox! No spam guaranteed!

Join 651 other subscribers

Contribute to Improving This Blog

Did you enjoy this article? Was it helpful? Contribute to help me write more articles! The funds collected from this blog are reinvested directly into improving my skills or the blog so that I can provide more and better content!

One-Time
Monthly
Yearly

Make a one-time donation

Make a monthly donation

Make a yearly donation

Choose an amount

€5.00
€15.00
€100.00
€5.00
€15.00
€100.00
€5.00
€15.00
€100.00

Or enter a custom amount


Your contribution is appreciated.

Your contribution is appreciated.

Your contribution is appreciated.

DonateDonate monthlyDonate yearly
Advertisements

More Posts That You Might Like…


5 responses to “Add an Empty Cart Button in WooCommerce”

  1. Hi, Thank you for the tutorial – the button works brilliantly. However, on a mobile device it looks off – is there any way to set the width of the button so that it doesn’t break the design?

    Thanks

  2. you need to add exit; after wp_safe_redirect( $referer );

    wp_safe_redirect( $referer );
    exit;

    or it will not redirect and url still stays the same

  3. Not working at the moment.

  4. Not working if coupons are disabled

    1. Just use the “woocommerce_cart_actions” hook instead of “woocommerce_cart_coupon”. This will add the button where the “Update Cart” button is (and where actions should be IMO). This area will always be visible, even if coupons are disabled.

Leave a Reply

Advertisements

Categories

Newsletter

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 651 other subscribers

About The Author

Hi, I’m Nico! Support Lead at Automattic, championing WordPress.com & WooCommerce. Off-duty, I’m at Elemental Beacon, leading epic D&D adventures. Let’s connect, whether it’s about WordPress or a quest!

Advertisements

Don't Miss a Thing!

Receive new articles from this blog directly in your inbox!

No spam guaranteed!

Join 651 other subscribers

Continue Reading

%d bloggers like this: