A dedicated “Empty Cart” button can significantly streamline the customer journey on your WooCommerce website.
Yes, you can manually change the product quantities to 0 on the cart page, or click on the “remove item” icon for each product… but having a button that can do all that could be a time saver, especially for B2B WooCommerce customers.
This post will guide you through creating a custom empty cart button. We’ll cover a code-based solution that uses jQuery to listen to button clicks and Ajax to trigger the empty cart function.
Enjoy!
PHP Snippet: Empty WooCommerce Cart Upon Custom Button Click
A note before you copy and paste the code below.
I use the “woocommerce_proceed_to_checkout” hook to echo a button above the “Proceed to Checkout” button. This works for the Classic Cart but not the Cart Block.
In case you use the Cart Block, remove the button echo as per the snippet comment below, and try using “wp_footer” instead of “woocommerce_proceed_to_checkout“. Or use the Cart Block visual hook guide to achieve something similar without adding a button by hand.
/**
* @snippet Custom WooCommerce Empty Cart Button
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 9
* @community https://businessbloomer.com/club/
*/
add_action( 'woocommerce_proceed_to_checkout', 'bbloomer_empty_cart_button_and_listener', 21 );
function bbloomer_empty_cart_button_and_listener() {
// IF YOU ARE USING THE CART BLOCK, REMOVE THE FOLLOWING LINE
// AND ADD A BUTTON WITH THE "empty-button" CLASS INSTEAD
echo '<a role="button" class="empty-button">Empty Cart</a>';
wc_enqueue_js( "
$('.empty-button').click(function(e){
e.preventDefault();
$.post( '" . '/wp-admin/admin-ajax.php' . "', { action: 'empty_cart' }, function() {
location.reload();
});
});
" );
}
add_action( 'wp_ajax_empty_cart', 'bbloomer_empty_cart' );
add_action( 'wp_ajax_nopriv_empty_cart', 'bbloomer_empty_cart' );
function bbloomer_empty_cart() {
WC()->cart->empty_cart();
}
