How To Add an Empty Cart Button in WooCommerce Website

How To Add an Empty Cart Button in WooCommerce Website

If you run an online store using WooCommerce, you know how important it is to make shopping easy and enjoyable for your customers. One small but helpful feature you can add is an “Empty Cart” button. This allows customers to quickly clear their cart with just one click, saving them time and frustration.

Follow the tutorial on how to do that easily. Here, I will show you how you can do that either by using code snippets or using a plugin.

Let’s Start.

Why Add an Empty Cart Button?

Adding an Empty Cart button makes shopping easier for your customers. Instead of removing items one by one, they can clear their cart with just one click. This improves the shopping experience, saves time, and reduces frustration.

A simple feature like this can help keep customers happy and encourage them to complete their purchases.

Steps to Add an Empty Cart Button using Code snippet

If you want to add the Empty cart button without using any plugin then you need to use this simple code snippet on your Website.

add_action( 'woocommerce_cart_actions', 'ecommercehints_empty_cart_button' ); 
function ecommercehints_empty_cart_button() {
    echo '<a href="' . esc_url( add_query_arg( 'empty_cart', 'true' ) ) . '" class="button" title="' . esc_attr( 'Empty Cart', 'woocommerce' ) . '">' . esc_html( 'Empty Cart', 'woocommerce' ) . '</a>';
}
 
add_action( 'wp_loaded', 'ecommercehints_empty_cart_button_empty_cart_action', 20 );
function ecommercehints_empty_cart_button_empty_cart_action() {
    if ( isset( $_GET['empty_cart'] ) && 'true' === 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);
    }
}

You can directly use this code in your theme’s function.php file or use a code snippet plugin.

Code snippet plugin allows you to manage multiple code snippets on the website and provide flexibility to load the code on specific pages, Device types, Post types and more.

You can use the WP code Plugin for this.

WP-Code-Insert-Headers-and-Footers

Just install and activate this plugin.

Now you need to add the code snippet and save it by assigning any name like “Empty cart button”

How to add Code snippet in WP code plugin in WordPress

Here, Under the Custom Code option, paste the provided code and select the code type to php snippet and make sure to activate it.

Empty cart button code for woocommerce

Now you can Go to the cart page and check there is a New button called Empty cart Showing and now user can remove all cart items with just one click.

empty cart button on Woocommerce website

Empty Cart Button using Plugin

You can also add an empty cart button using plugins. For this I have created a simple plugin which you need to install and activate and that’s it.

Now, You will see the same empty cart button as we did using the custom code. The plugin uses the same coding and quite lightweight.

After installing the plugin you will have the option to change the Text “Empty cart” on the button with your own like “Clear Cart”.

For this You need to Go to Woocommerce > Settings > Products.

empty cart plugin

Video Tutorials

YouTube video

Conclusion

Adding an Empty Cart button to your WooCommerce store is a small change that can have a big impact on your customers’ shopping experience. It’s a simple feature that makes it easier for customers to manage their carts.

By making your store more user-friendly, you’re not only improving the shopping experience but also encouraging customers to return.

Similar Posts

One Comment

  1. Plugin size is just 1.6KB, Good job.

Leave a Reply

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