How to Add a Clear Cart Button in WooCommerce

WooCommerce does not include a "Clear Cart" button by default. However, you can easily add one using a few lines of code. This article will guide you step by step on how to add a Clear Cart button next to the Update Cart button.

Image Placeholder 1

Step 1: Add the Clear Cart Button

To add a Clear Cart button, insert the following code into your theme's functions.php file:

function add_clear_cart_button() {
    if (is_cart()) {
        echo 'Clear Cart';
    }
}
add_action('woocommerce_cart_actions', 'add_clear_cart_button');
        

Step 2: Make the Button Functional

Now, add the following function to clear the cart when the button is clicked:

function clear_cart_on_button_click() {
    if (isset($_GET['clear-cart'])) {
        WC()->cart->empty_cart();
        wp_redirect(wc_get_cart_url());
        exit();
    }
}
add_action('init', 'clear_cart_on_button_click');
        

Image Placeholder 2

Step 3: Customize the Button Style

If you want to make the button look better, add this CSS to your theme’s style.css file:

.clear-cart-btn {
    padding: 10px 15px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
}
.clear-cart-btn:hover {
    background-color: darkred;
}
        

Final Thoughts

Now, when users visit the cart page, they will see a "Clear Cart" button next to the "Update Cart" button. This allows them to empty the cart with a single click.

Image Placeholder 3