Ajax cart item count also shows 0 products in WooCommerce

Question

I'm using Elementor (Pro) for a WooCommerce website where I added an icon widget to the header and a HTML element next to it with CSS to show to cart count which will update via Ajax when add/remove items to/from the cart.

It works as desired, when I add an item the number increase, and when I remove an item the numbers decreases.

But my problem is that the element is also visible when there's nothing in the cart. It just shows the number 0. How can I hide it?

This is my code:

add_filter( 'woocommerce_add_to_cart_fragments', 'dwd_cart_count_fragments', 10, 1 );

function dwd_cart_count_fragments( $fragments ) {
    
    $fragments['div.header-cart-count'] = '<div class="header-cart-count">' . WC()->cart->get_cart_contents_count() . '</div>';
    
    return $fragments;
    
}

And this the html element:

<div class="dwd-cart-count"><?php echo WC()->cart->get_cart_contents_count(); ?></div>

And the CSS:

.dwd-cart-count {
    position: absolute;
    top: 10px;
    right: 2px;
    transform: translateY(-105%) translateX(25%);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 10px;
    line-height: 20px;
    height: 20px;
    width: 20px;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    background: #99c001;
    border-radius: 50%;
    padding: 1px;       
}

I think I need an extra function before the filter. Something like this but can't get it to work:

function dwd_cart_count() {     
    $cart_count = WC()->cart->get_cart_contents_count();     
    if ( $cart_count > 0 ) {
        ?>
        <span class="dwd-cart-count"><?php echo $cart_count; ?></span>
        <?php
    }
}

7uc1f3r · Answer 1 · 2022-05-23T17:27:20.140

You can pass the result of get_cart_contents_count() in an if function, and only if the result is 1 or greater actually return a number.

So you get:

function cart_contents_count() {
    // Default
    $result = '';

    // True
    if ( WC()->cart ) {
        // Get number of items in the cart
        $cart_contents_count = WC()->cart->get_cart_contents_count();

        // Greater than or equal to
        if ( $cart_contents_count >= 1 ) {
            return $cart_contents_count;
        }
    }

    return $result;
}

function dwd_cart_count_fragments( $fragments ) {
    $fragments['div.header-cart-count'] = '<div class="header-cart-count">' . cart_contents_count() . '</div>';
    
    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'filter_woocommerce_add_to_cart_fragments', 10, 1 );

<div class="header-cart-count"><?php echo cart_contents_count(); ?></div>

@MediaCreandum it will conflict with other existing code on your website, but it seems like this is the general trend on your particular setup. My answer has been tested, and I can't add much more than a working answer. Looks like you'll have to [debug](https://stackoverflow.com/questions/61740111/how-to-debug-in-woocommerce-3) to find the issue — 7uc1f3r, May 25 '22 at 11:13

Ajax cart item count also shows 0 products in WooCommerce

1 Answers1