Custom cart item counts by product category in Woocommerce 3

I am trying to display the Woocommerce cart count by product category.

I have two categories: "protein" and "pantry"
I want to display the count by item category. So if there are 2 protein and 4 pantry, I want those two item category counts to be displayed next to each other, updating with ajax.
e.g. the final look would say: PROTEIN 2 in cart and PANTRY 4 in cart (depending on the amount of item types in the cart)

I have found this snippet here which displays the cart count for a given category, but I am having trouble displaying it on the web page correctly. Currently It just displays the total amount of items in the cart:

function cat_cart_count( $cat_name ) {

global $woocommerce; $cat_count = 0; 

// For each product in the cart
foreach(WC()->cart->get_cart() as $cart_item_key => $values) { 
    $_product_id = $values['product_id']; // product ID
    $_product_qty = $values['quantity']; // product quantity

    // Getting categories of the product (could be more than one)
    $terms = get_the_terms( $_product_id, 'product_cat' );

    // Checking this product has a category
    if ( $terms && ! is_wp_error( $terms ) ) { 
        $term_name = array();

        // For each category of that product
        foreach($terms as $term) {

            // Adding the category name to an array
            $term_name[] = $term->name;

            // if the product has $cat_name category
            if ( in_array( $cat_name, $term_name ) ) {

                // add 1 x product quantity to the count
                $cat_count =+ 1 * $_product_qty;
            }
        }
    }
}
// Returning category count
if ( $cat_count != 0 ) {
    return $cat_count;
} else {
    return '';
}
}

I am trying to just display the counters as HTML so that I can embed on the page anywhere and customise from there:

<a class="cart-contents" href="<?php echo WC()->cart->get_cart_contents_count(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf (_n( '%d protein', '%d protein', cat_cart_count( "protein" ) ), cat_cart_count( "protein" ) ); ?> - <?php echo sprintf (_n( '%d pantry', '%d pantry', cat_cart_count( "pantry" ) ), cat_cart_count( "pantry" ) ); ?> - <?php echo WC()->cart->get_cart_contents_count(); ?></a>

Thanks in advance!

The main problem comes from the refreshed woocommerce ajax cart fragments that use by default "cart-contents" class and the existing content with the refreshed default cart count.

So we will need to:

rename that class differently,
add the content (to be refreshed on add to cart) in a specific hooked function.

I have also revisited, simplified and compacted your function cat_cart_count().

The complete code:

// Utility function that count specific product category cart items
function cat_cart_count( $term ) {
    $count = 0; // Initializing

    // Loop through cart items
    foreach( WC()->cart->get_cart() as $cart_item ) {
        if( has_term( $term, 'product_cat', $cart_item['product_id'] ) )
            $count += $cart_item['quantity'];
    }
    // Returning category count
    return $count == 0 ? false : $count;
}

// Utility function that displays the cart items counters
function display_cart_counters() {
    ob_start();

    $link  = wc_get_cart_url();
    $title = __( 'View your shopping cart', 'woocommerce' );
    $count = __( '0 item', 'woocommerce');

    // Displayed on first page load
    echo '<a class="cart-contents-cat" href="' . $link . '" title="' . $title . '">' . $count . '</a>';

    return ob_get_clean();
}

// Displaying refreshed content on add-to cart
add_filter( 'woocommerce_add_to_cart_fragments', 'counters_add_to_cart_fragment', 30, 1 );
function counters_add_to_cart_fragment( $fragments ) {
    ob_start();

    $term1   = 'protein';
    $count1  = cat_cart_count( $term1 );
    $output  = $count1 ? sprintf ( __( '%d %s', 'woocommerce'), $count1, $term1 ) . ' - ' : '';

    $term2   = 'pantry';
    $count2  = cat_cart_count( $term2 );
    $output .= $count2 ? sprintf ( __( '%d %s', 'woocommerce'), $count2, $term2 ) . ' - ' : '';

    $count   = WC()->cart->get_cart_contents_count();
    $output .= $count ? sprintf (_n( '(%d item)', '(%d items)', $count ), $count ) : __( '0 item', 'woocommerce');

    $link    = wc_get_cart_url();
    $title   = __( 'View your shopping cart', 'woocommerce' );

    // Replacement display on any cart item events
    ?>
    <a class="cart-contents-cat" href="<?php echo $link; ?>" title="<?php echo $title ?>"><?php echo $output; ?></a>
    <?php
    $fragments['a.cart-contents-cat'] = ob_get_clean();

    return $fragments;
}

Code goes in function.php file of your active child theme (or active theme).Tested and works.

USAGE

1) To place the counter in the html code of a php file you will use: