How to add an “empty cart” button in WooCommerce

By default, WooCommerce allows users to remove individual products from the cart page but does not include a button to empty the entire cart at once. Adding this function can improve user experience and make purchase management easier. In this article, you will learn how to add an “Empty Cart” button on both the cart page and the checkout page.

Adding the “empty cart” button to the cart page

To add an “Empty Cart” button to the cart page, you can use the following code in your theme’s  functions.php file or in a custom plugin:

<?php
function add_empty_cart_button_to_cart() {
    if ( WC()->cart->is_empty() ) {
        return;
    }
    
    $clear_cart_url = wc_get_cart_url() . '?empty-cart=true';
    echo '<p><a href="' . esc_url( $clear_cart_url ) . '" class="button wc-empty-cart">' . __( 'Empty Cart', 'woocommerce' ) . '</a></p>';
}
add_action( 'woocommerce_cart_actions', 'add_empty_cart_button_to_cart' );

function handle_empty_cart() {
    if ( isset( $_GET['empty-cart'] ) ) {
        WC()->cart->empty_cart();
    }
}
add_action( 'init', 'handle_empty_cart' );

This code adds a button inside the cart page that empties the cart when clicked.

Adding the “empty cart” button to the checkout Page

WooCommerce does not display the product list on the checkout page by default, but we can still add the button in this section.

Add the following code to your  functions.php file:

<?php
function add_empty_cart_button_to_checkout() {
    if ( WC()->cart->is_empty() ) {
        return;
    }
    
    $clear_cart_url = wc_get_checkout_url() . '?empty-cart=true';
    echo '<p><a href="' . esc_url( $clear_cart_url ) . '" class="button wc-empty-cart">' . __( 'Empty Cart', 'woocommerce' ) . '</a></p>';
}
add_action( 'woocommerce_review_order_before_payment', 'add_empty_cart_button_to_checkout' );

This code displays the button just before the payment section on the checkout page.

Styling the “empty cart” button

To improve the appearance of the button, add the following CSS to your  style.css file or your theme’s custom CSS section:

.wc-empty-cart {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #ff3b3b;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}
.wc-empty-cart:hover {
    background-color: #cc0000;
}

With these simple steps, you can add an “Empty Cart” button on the cart page and checkout page in WooCommerce. This will provide your customers with a quick and easy way to clear their cart if they want to start over.

If you are developing an eCommerce site with WooCommerce, this functionality can improve the shopping experience and reduce potential frustrations in the checkout process.