How to Add WooCommerce Cart Icon in Menu with Item Count?

WooCommerce Cart Icon Menu

Hey, are you looking to add a woocommerce cart icon button in the header menu or wherever you want to show it in WordPress?

Then you are reading the right article. In this article, I’ll show you how you can create a custom cart icon without any plugin using the WordPress and woocommerce action hooks.

So, Let’s get started.

To add the woocommerce cart icon button in the menu, we will follow these steps:

  1. Create a shortcode for woocommerce cart icon
  2. Filter Hook for update woocommerce fragments to update cart count automatically
  3. Embed cart icon in the header menu
  4. Style the cart icon

Before starting, I would suggest you use a child theme to add the below code in the respective files. If you don’t know how to create a child theme then read the article here.

Hope! you are using the child theme.

OK. So let’s start with these steps one by one.

Create Shortcode for WooCommerce Cart Icon

First of all, you should familiar with a shortcode in WordPress. How to create and use shortcodes in WordPress? For more detail check here. Because we will create a shortcode for the cart icon and display it in the menu.

See the code below:

In the above code, we used add_shortcode() function to create the shortcode. In our case it would be [woocommerce_cart_icon], but you can change this and take any relevant name.

So, in this code, we count the cart item to show the count on the cart icon and made a condition if the count is greater than 0 then show it otherwise not.

Let’s jump into the next step to refresh the woocommerce fragments content with ajax and show at the same time.

Filter Hook for Update WooCommerce Fragments

Now, we will make the filter hook function to get the real-time woocommerce cart item count and show it in the cart icon menu item.

The above code will run automatically continuously when the cart will be updated. It will fetch the count of items in the cart and show it in the icon of the woocommerce cart.

Move on next step, to embed the cart icon in the header menu.

Add Cart Icon Button in the Menu

For this step, we will make wp_nav_menu_items filter hook to append the cart icon to existing menu. We will check the menu ID to compare against, for which nav menu we want to show this cart icon and will make condition accordingly.

See the code below.

I used the primary as my menu ID and show it for my primary menu. But in your case, the menu ID will be different and you have to check your menu ID and make the condition.

For example, if your menu ID is ‘primary-menu’ then the condition will be if($args->theme_location == 'primary-menu') {. Please note that, menu ID will be different like ‘top-menu’, ‘primary-menu’, ‘header-menu’, etc.

If you don’t know what is your menu ID then you can check with print the print_r($arg) parameter, it will show your menu ID then you can use it.

You can also check with inspect element on that menu’s checkbox at the backend under Appearance > Menus and look for the menu location input field and in the square bracket ([]) will be your menu ID.

The next and final step is to design our woocommerce cart icon button that we just placed in the menu.

Design the Cart Icon

OK. So, add this CSS to your active theme’s style.css file. Change the cart image as per your theme design and save it.

So, that’s it.

IMPORTANT TIP

If you want to show your cart icon on any other page, footer, or woocommerce template then just place this shortcode [woocommerce_cart_icon] on your page.

And if you want to show in the PHP template file then use like this <?php echo do_shortcode("[woocommerce_cart_icon]"); ?>. It will show the cart icon on the frontend.

Hope you understand! If still have any questions or queries then let me know in the comment. I’ll respond to you.

More WooCommerce Related Article

Happy Coding 🙂

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

7 Comments

  1. Thanks for the codes
    but im having an issue the icon is showing to the left side of the main menu , that is aside of home button, how can I change its position ?

      1. Hi Aman,

        Thanks for a very good article.

        I have the same problem as sujith, but I don’t quite know what you mean by change the position using CSS.

        I can see that a new li has been created with the cart and counter, but I don’t know how I go about changing the position of that li using CSS.

        Can you give us a pointer as to what we should do.

  2. This isn’t working for me. I placed all the code inside my astra child theme functions file and the css inside my child theme css file like you tell us. I used the view page source to find my id which is shown as primary-site-navigation. I also tried just primary, primary-navigation and site-navigation but it still isn’t working. What am I doing wrong?

Leave a Reply

Your email address will not be published.