In Storefront, there is a mini cart in the header, where the price and number of items are displayed. I need to remove the word "item"/"items" from the .count element. I tried overriding storefront_cart_link() with the following:
function storefront_cart_link() {
if ( ! storefront_woo_cart_available() ) {
return;
}
?>
<a class="cart-contents" href="<?php echo esc_url( wc_get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart', 'storefront' ); ?>">
<?php /* translators: %d: number of items in cart */ ?>
<?php echo wp_kses_post( WC()->cart->get_cart_subtotal() ); ?> <span class="count"><?php echo wp_kses_data( WC()->cart->get_cart_contents_count() ); ?></span>
</a>
<?php }
The code above works but when the page is loaded it says "items" after the count number again. I guess it has something to do with AJAX. As the word isn't wrapped in its own element, I can't hide it with CSS. How do I remove it while keeping the same functionality (if possible)?
I found that the problem was caused by Woocommerce Cart Fragments. The fragments does not update until the contents of the cart are modified. I didn't understand this because making a hard refresh did not work. I modified the storefront_cart_link() and Woocommerce template file mini-cart.php,. After adding/removing products in the cart, the fragments were updated and it worked as expected.