Blog Categories Tips & Tricks Contact

HOME WOOCOMMERCE HOW TO ADD WOOCOMMERCE CART ICON IN MENU WITH ITEM COUNT?
RECENT POSTS

How to Add WooCommerce Cart

Icon in Menu with Item Count?
How to Add WooCommerce Cart Icon in
How to Secure Password Using
Menu with Item Count? bcrypt in PHP?

HOW TO WOOCOMMERCE WORDPRESS How to Make a DataTable in

ReactJS?
AMAN MEHRA MAY 12, 2021 LEAVE A COMMENT
How to Inline Style in ReactJS?
Tweet on Twitter Share on Facebook
How to Install WordPress Theme
(2021 Edition)?

CATEGORIES

How To

PHP

ReactJS

Tips & Tricks

WooCommerce

WordPress

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
MOST VIEWED POSTS
this article, I’ll show you how you can create a custom cart icon without any
plugin using the WordPress and woocommerce action hooks. WooCommerce Remove
Update Cart Button and
Make it Automatically
So, Let’s get started. Update.
October 5, 2020

To add the woocommerce cart icon button in the menu, we will follow these How to Change Price of
steps: Speci c Product and
Quantity in Cart?
October 14, 2020
1. Create a shortcode for woocommerce cart icon
How can I Prevent SQL
2. Filter Hook for update woocommerce fragments to update cart count
Injection in PHP?
automatically October 7, 2020

3. Embed cart icon in the header menu

4. Style the cart icon How to Redirect to

Checkout After Add to
Cart?
Before starting, I would suggest you use a child theme to add the below code in October 16, 2020
the respective les. If you don’t know how to create a child theme then read the
Upload Multiple Featured
article here. Images in a Post OR Page
January 4, 2021
Hope! you are using the child theme.

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

FOLLOW US

Create Shortcode for WooCommerce Cart Icon Stay updated via social channels

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:

 /*
* Shortcode for WooCommerce Cart Icon for Menu Item
*/
add_shortcode ('woocommerce_cart_icon', 'woo_cart_icon' );
function woo_cart_icon() {
ob_start();

$cart_count = WC()->cart->cart_contents_count; // Set variable for cart

item count
$cart_url = wc_get_cart_url(); // Set variable for Cart URL

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 lter hook function to get the real-time woocommerce
cart item count and show it in the cart icon menu item.

/*
* Filter with AJAX When Cart Contents Update
*/
add_ lter( 'woocommerce_add_to_cart_fragments', 'woo_cart_icon_count' );
function woo_cart_icon_count( $fragments ) {

ob_start();

$cart_count = WC()->cart->cart_contents_count;
$cart_url = wc_get_cart_url();

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 lter 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.

/*
* Append Cart Icon Particular Menu
*/
add_ lter('wp_nav_menu_items','woo_cart_icon_menu', 10, 2);
function woo_cart_icon_menu($menu, $args) {

if($args->theme_location == 'primary') { // 'primary' is my menu ID

$cart = do_shortcode("[woo_cart_but]");
return $cart . $menu;
}

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 eld and
in the square bracket ([]) will be your menu ID.

Next and nal 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 le. Change the cart image
as per your theme design and save it.

.cart-contents {
position: relative;
display: ex !important;
ex- ow: column nowrap;
justify-content: center;
}

.cart-contents:hover {
text-decoration: none;
}

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 le 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 Speci c Product and Quantity in Cart Page
Add Text after OR before Add to Cart Button

Happy Coding 🙂
MINI CART MINICART WOOCOMMERCE WOOCOMMERCE MINCART WORDPRESS
WORDPRESS SHORTCODE

Tweet on Twitter Share on Facebook

YOU MAY ALSO LIKE

How to Secure Password Using How to Make a DataTable in

bcrypt in PHP? ReactJS?

How to Inline Style in ReactJS? How to Install WordPress Theme

(2021 Edition)?
 How to Install WordPress – How to Add jQuery Script to
Beginners Guide? WordPress?

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 nd solutions to bugs.

LEAVE A REPLY

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

Comment

Name * Email * Website

Save my name, email, and website in this browser for the next time I comment.

POST COMMENT

ABOUT QUICK LINKS RECENT POSTS JOIN OUR NEWSLETTER

Your Blog Coach is the best site Blog How to Add WooCommerce Cart Name
for nding the solution to any Icon in Menu with Item Count?
WordPress
issue related to coding and learn
How to Secure Password Using
more cool stuff and tricks. WooCommerce Email
bcrypt in PHP?
Contact
How to Make a DataTable in
ReactJS?
SUBSCRIBE

© 2020 Your Blog Coach Privacy Policy Terms and Conditions Sitemap