How to remove cart icon from menu when cart is empty?

Hi @station7

Thanks for reaching out!

I understand that you want to hide the cart icon on your site when it is empty, correct?

I did some research and found this article could be a good starting point: Hide Cart (or “0 Items”) When Empty In Divi & WooCommerce

Hope this helps!

Hi @xue28

Thank you for taking the time to reply. Yes, I have implemented this. That is the reason for my question. Unfortunately as I already mentioned, this method doesn’t work when interacting with the cart via AJAX or Javascript. You have to refresh the page each time for it to work.

So what I am looking for is an additional client-side solution that will work with the cart when interacting via AJAX or Javascript (not PHP and adding CSS, I have already done it).

Is there any code available that will show/hide the cart when the user interacts with the cart via AJAX (add-to-cart button on shop page) or JavaScript (e.g. removing items from the mini-cart dropdown)?

• This reply was modified 1 year, 9 months ago by station7.

Hi,

Can you please check if this custom code works for you? You can add the code directly to your functions.php file, or using a plugin, e.g. Code Snippets.

If not, you can achieve that functionality using a plugin, for example using WooCommerce Hide Cart When Empty.

I hope this helps.

• This reply was modified 1 year, 9 months ago by Igor H.

Hi @ihereira

Thank you for your reply. But as I have already stated, I have already implemented this type of code on my site. Both the plugin and the custom code you linked to are PHP-only, run inside the functions.php file and hide the cart with CSS only after the page has loaded. This is not what I am looking for as I have already implemented this.

My problems with this approach were stated in the OP and in my previous reply. It is an incomplete solution, which I am hoping to be able to complete with client-side code.

I am now looking for a client-side (i.e. JavaScript/AJAX) solution and not a PHP one, so that the cart will show when the “Add to Cart” AJAX button is clicked, and hide when the last item is removed from the cart dropdown in the header.

I hope I have explained the problem well, and that there is code out there that can accomplish this. Thank you!

Hi @station7

Thanks for providing further information about what you are trying to achieve here.

Kindly be informed that custom coding is outside our scope of support, hence, I am leaving this thread open for a bit to see if anyone can chime in to help you out.

For questions related to development and custom coding, your best bet is to ask on any of these channels for support. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, too.

• WooCommerce Developer Resources Portal
• WooCommerce Advanced Facebook group
• WooCommerce Community Forum
• WooCommerce Developer Slack Channel
• Hire a WooCommerce Expert

Hope this helps!

Hi @station7

Now I have Cart icon in Astra like this:

<i class="astra-icon ast-icon-shopping-cart" data-cart-total="0"><span class="ast-icon icon-cart"><svg 

Try this CSS:
.ast-icon-shopping-cart[data-cart-total="0"] {display: none;}