Last item not removed from cart in Woocommerce

Question

I can’t remove the last item from cart. I add several products to the cart - remove all items, but the last are not. Ajax works, shows a message that the product has been removed from cart, but visually - it has not gone away. After refreshing the page, the cart is empty.

Answer 1

I had the same issue on one of our websites. I have been following the javascript in /woocommerce/assets/js/frontend/cart.js and I noticed that there is the following line of code $( '.woocommerce-cart-form__contents' ).closest( '.woocommerce' ).replaceWith( $cart_html ); which replaces all the cart content from the cart page.

Most probably you have overridden the default woocommerce cart template and have removed the class .woocommerce-cart-form__contents from your custom template, therefore the html cannot be replaced by javascript.

You have 2 options to solve this:

Option 1: Try to include the .woocommerce-cart-form__contents in your cart.php template

Option 2: In case you prefer not to add that class, woocommerce triggers the javascript event wc_cart_emptied when the cart has been emptied. Therefore you can use the below code in your theme's javascript to make sure that you empty the DOM elements from the cart page when this is triggered:

    /**
     * When Cart has been emptied we need to make sure that cart form and cart collaterals in /cart page are removed.
     *
     * @param {Event} e
     */
    function cartEmptied(e) {
        //The below 2 elements can be changed according to the classes you use in your custom cart template
        var cartForm = $('.woocommerce-cart-form');
        var cartCollaterals = $('.cart-collaterals');

        if (cartForm.length > 0) {
            cartForm.remove();
        }

        if (cartCollaterals.length > 0) {
            cartCollaterals.remove();
        }
    }
    $(document.body).on('wc_cart_emptied', cartEmptied);