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

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

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 🙂

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

7 thoughts on “How to Add WooCommerce Cart Icon in Menu with Item Count?”

  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 ?

    Reply
  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?

    Reply

Leave a Comment