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? 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.
e.g: 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. And you can also check with inspect element on that menu’s checkbox at the backend under Appearance > Menus and look for menu location input field and in the square bracket ([]) will be your menu ID.

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

Design the Cart Icon

OK. So, add this CSS in 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 the 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 question or query then let me know in the comment. I’ll respond to you.

More WooCommerce Related Article

WooCommerce Remove Update Cart Button
Redirect to Checkout After Click on Add to Cart Button
Change the Price of Specific Product and Quantity in Cart Page
Add Text after OR before Add to Cart Button

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Exit mobile version