Ajax update product count on cart menu in Woocommerce

Question

I have a menu item that points to the cart and that reads the number of products currently in the cart.

CART (3)

When, on the cart page, I change the number of products and click the "Update cart" button, or delete an item, the number doesn't refresh. Any idea why?

/*CHANGE CART MENU TITLE IN MENU*/
add_filter( 'wp_setup_nav_menu_item','my_item_setup' );
function my_item_setup($item) {

    if ( ! is_admin() ) {
        if ( class_exists( 'woocommerce' ) ) {

            global $woocommerce;

            if ( $item->url == esc_url( wc_get_cart_url() ) ) {

                if (is_null($woocommerce->cart)){

                } else {
                    if( get_locale() == 'fr_FR' ) {
                        $item->title = 'PANIER ('. '<span class="count-cart">' .  $woocommerce->cart->get_cart_contents_count() . '</span>)';
                    } else {
                        $item->title = 'MY CART ('. '<span class="count-cart">' .  $woocommerce->cart->get_cart_contents_count() . '</span>)';
                    }
                }

            }
        }
    }
    return $item;
}

And

add_filter( 'woocommerce_add_to_cart_fragments', 'my_woocommerce_add_to_cart_fragments' );
function my_woocommerce_add_to_cart_fragments( $fragments ) {
    // Add our fragment
    $fragments['li.menu-item-type-woocommerce-cart'] = my_item_setup( '');
    return $fragments;
}

EDIT:

Using Ajaxify the cart items count in Woocommerce answer code, seems to work a little better. The product number updates when I delete an item from the cart page, or when I change the number of items, but it doesn't update when I empty the cart. Moreover, there's a space before and after the product number (see picture with empty cart and "CART ( 1 )" .

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_cart_fragments');
function wc_refresh_cart_fragments($fragments){
    ob_start();
    ?>
    <span class="count-cart"><?php echo WC()->cart->get_cart_contents_count(); ?></span>
    <?php
        $fragments['li a span.count-cart'] = ob_get_clean();
    return $fragments;
}

Answer 1

Updated

It's better to set a tag ID than a tag CLASS to ajaxify a cart count, as this selector reference need to be unique. If it's not the case, and there is a hidden mobile duplicated menu, it can't work.

So this item menu need to be unique on the generated html code of your page… If this menu item is duplicated in a mobile version, you will need to change the tag ID or the tag CLASS for the mobile code version.

I have revisited your code a bit:

add_filter( 'wp_setup_nav_menu_item','my_item_setup' );
function my_item_setup( $item ) {
    if ( ! is_admin() && class_exists( 'woocommerce' ) ) {
        if ( $item->url == esc_url( wc_get_cart_url() ) && ! WC()->cart->is_empty() ){
            $title = get_locale() == 'fr_FR' ? 'PANIER' : 'MY CART';
            $item->title = $title . ' (<span id="count-cart-items">' .  WC()->cart->get_cart_contents_count() . '</span>)';
        }
    }
    return $item;
}

add_filter( 'woocommerce_add_to_cart_fragments', 'wc_refresh_cart_fragments', 50, 1 );
function wc_refresh_cart_fragments( $fragments ){
    $cart_count = WC()->cart->get_cart_contents_count();

    // Normal version
    $count_normal = '<span id="count-cart-items">' .  $cart_count . '</span>';
    $fragments['#count-cart-items'] = $count_normal;

    // Mobile version
    $count_mobile = '<span id="count-cart-itemob">' .  $cart_count . '</span>';
    $fragments['#count-cart-itemob'] = $count_mobile;

    return $fragments;
}

Code goes in function.php file of your active child theme (active theme). It should better work.

Answer 2

To Ajaxify your cart viewer so it updates when an item is added or deleted (via ajax) use:

/**
 * Show cart contents / total Ajax
 */
add_filter( 'woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment' );

function woocommerce_header_add_to_cart_fragment( $fragments ) {
    global $woocommerce;

    ob_start();

    ?>
    <a class="cart-customlocation" href="<?php echo esc_url(wc_get_cart_url()); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
    <?php
    $fragments['a.cart-customlocation'] = ob_get_clean();
    return $fragments;
} ?>

Reference Link