X Theme jQuery or CSS overwriting cart items?

[kb0wwp]

I’m trying to add a simple numerical indicator next to the cart icon in the header showing the number of items in the cart. My modifications have been fairly straight-forward. I duplicated the x_woocommerce_navbar_cart() function in my child theme functions.php file and added the CSS to style it the way I wanted.

BUT… some CSS or jQuery is overwriting the code in the menu item.

When I load a page and view the source code, I see this:

<span class="inner"><i class="x-icon-shopping-cart cart-qty" data-x-icon-s="&#xf07a;" aria-hidden="true"></i></span><span class="outer">4</span>

That is exactly what I want and expect. However when I view the source in Google dev tools (which as you know shows the code after CSS is applied and Javascript has run), I see this:

<span class="inner"><i class="x-icon-shopping-cart" data-x-icon-s="" aria-hidden="true"></i></span><span class="outer">4 Items</span>

Which is definitely NOT what I want. It’s removing my custom class and adding the word “Items”. How is this happening?

You can see this behavior at https://mightysparkfood.com. I currently have the “outer” class set to display: none because it’s not working yet.

[rad]

Hi @kb0wwp,

Thanks for reaching out.

I checked and I don’t see any Item word from the menu item after adding a product on cart. Perhaps it’s just a cache on your mobile browser? Please clear the cache and test it again.

Thanks!

[kb0wwp]

Ok, I now suspect it’s a caching issue related to Chrome. Thanks!

[mldarshana]

Hi There @kb0wwp

It should be a caching issue then. I have tested your site URL in couple of browsers and I could not see such issue.

You can use the following guide on how to clear all caches when testing your site (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/). Also sometimes, it’s good to check your site on Incognito mode as well (https://www.lifewire.com/incognito-mode-google-chrome-4103635) to see whether it is a caching issue.

Thanks!