Here is a way to add WooCommerce cart icon to a menu with the cart item count, it links to the cart page and displays the number of items that have been added to the cart.
The code uses three functions which need to be added to functions.php and some CSS in style.css.
(If you just want the icon only – the process is a lot easier)
Create a shortcode for the WooCommerce cart, this can be appended to a menu or just added anywhere in your theme templates or hooked in with actions in the theme.
Create Shortcode
The shortcode, in this case, would be [woo_cart_but]
Filter to enable Ajax on the Cart Count
Add a filter to get the cart count to update when it changes using the Ajax fragments.
Add Cart Icon to an existing menu
The third code snippet it to add to a menu using a variant of wp_nav_menu_items the variant being to specify an actual menu in the filter, in the example the menu has an id of ‘top-menu‘ – so the filter name can be adjusted like so wp_nav_menu_top-menu_items
If your menu had the ID of primary-menu – the filter name would be changed to wp_nav_menu_primary-menu_items etc
(Add Cart Icon by itself)
If you wanted the Cart Icon by itself (not in a menu) – you can use the shortcode or for PHP template files you can use do_shortcode
<?php echo do_shortcode("[woo_cart_but]");?>
Add CSS
Finally, add some CSS…
That’s it a working icon with cart count items displaying.
Display Icon Only
If you don’t care for the cart count functionality the process is a lot easier, you simply add the Cart page to the desired menu in WordPress menus and add the icon code in the Navigation label.
In the above, a Fontawesome 5 icon is being used as it is already loaded in the theme.
Thank you for writing this code, as it has helped me with my site.
It all works well, except for one issue. When the user has items in the cart and increases/decreases the quantity while on the cart page, the $cart_count does not get updated until the page is refreshed.
Any idea how to add this functionality and get it to update automatically?
Got it! Thanks for taking the time to write this up and post it. I had to do some tweaks. “::marker” – had to set content:””;, and some small CSS tweaks to place the counter next to the basket.
You are the guy!
I just used for Hello Theme from Elementor.
An easier way to add the icon in menu is using a plugin to add shortcodes in menu. The “Shortocode in Menus” plugin worked just fine for me.
With this you can skip the Step: Add Cart Icon to an existing menu
Bests!
Hi, great tutorial. i followed the steps and the only thing that is not working is the cart icon everthing else is. I get the number of items showing but not the image.
Hey, thanks for the code!!!
i’m trying to do this with Hello theme and Elementor.
I don’t know how to find the nav name.
Did anypne was able to do this with Elementor?
Thanks :)
Hi, I’m having difficulty whereby I see a bullet point with the cart count indented?
I’ve tried amending the code with the advice above on one of the previous comments but I then get about 10/15 versions of the cart and counter. Appreciate any help you can give please.
Right, I’ve resolved the bullet point by removing the but I now have a massive space between the trolley icon and the actual cart counter. Can you help with this please.
Hi,
I have addes the three functions in the article to functions.php (changed p_nav_menu_primary-menu_items because I want to diosplay the cart in the main menu) and added the above mentioned custom CSS.
Results:
– no cart icon in the main menu
– short code: cart color is pink, has a bullet point an the count numbder is not inside the icon.
Woundering if is possible to move the icon (with the item count function – not just the icon) right side of the SHOP name in the menu if I place the SHOP … lets say… in the middle and not at the end of the menu.
Example:
HOME / MEDIA / FISHING / UTILE / CONTACT / TALCIOC (icon here)
TALCIOC being the SHOP.
So… if I move TALCIOC before CONTACT the icon will remain where it is and will show after CONTACT.
is there a way where I can call the icon to stick with a menu id or something?!
the code worked just fine. awesome!!!
I would also like to add a wishlist icon or button next to the basket. can you please help me through this. guidelines of what should I change in the above code should be fine for me.
thanks in advance.
Hello Sir,
I’ve inserted the code, but nothing really happened. I believe I may be doing something wrong, so I thought to send you some details to know how you can help me:
The issue I face is it gives me a weird style of cart and I want to add the same style as the menu one but for the life of me I can’t figure it out since I don’t know where to place the in the code listed above…
For those who prefer the menu variant… just make a small change:
This:
*****
function woo_cart_but_icon ( $items, $args ) {
$items .= do_shortcode(“[woo_cart_but]”); ‘[woo_cart_but]’; // Adding the created Icon via the shortcode already created
return $items;
}
to this:
*******
function woo_cart_but_icon ( $items, $args ) {
$items .= do_shortcode(“[woo_cart_but]”); // Adding the created Icon via the shortcode already created
return $items;
}
I would like my cart icon to be next the the search in the upper right on the homepage. How do I get it there? Right now it wraps off the primary menu. Here is my code.
add_filter(‘wp_nav_menu_items’,’sk_wcmenucart’, 10, 2);
function sk_wcmenucart($menu, $args) {
// Check if WooCommerce is active and add a new item to a menu assigned to Primary Navigation Menu location
if ( !in_array( ‘woocommerce/woocommerce.php’, apply_filters( ‘active_plugins’, get_option( ‘active_plugins’ ) ) ) || ‘primary’ !== $args->theme_location )
return $menu;
ob_start();
global $woocommerce;
$viewing_cart = __(‘View your shopping cart’, ‘your-theme-slug’);
$start_shopping = __(‘Start shopping’, ‘your-theme-slug’);
$cart_url = $woocommerce->cart->get_cart_url();
$shop_page_url = get_permalink( woocommerce_get_page_id( ‘shop’ ) );
$cart_contents_count = $woocommerce->cart->cart_contents_count;
$cart_contents = sprintf(_n(‘%d item’, ‘%d items’, $cart_contents_count, ‘your-theme-slug’), $cart_contents_count);
$cart_total = $woocommerce->cart->get_cart_total();
// Uncomment the line below to hide nav menu cart item when there are no items in the cart
// if ( $cart_contents_count > 0 ) {
if ($cart_contents_count == 0) {
$menu_item = ‘‘;
} else {
$menu_item = ‘‘;
}
$menu_item .= ‘ ‘;
$menu_item .= $cart_contents.’ – ‘. $cart_total;
$menu_item .= ‘‘;
// Uncomment the line below to hide nav menu cart item when there are no items in the cart
// }
echo $menu_item;
$social = ob_get_clean();
return $menu . $social;
Good morning. I added the 3 PHP snippets to my child theme’s functions.php file, and I added the CSS to the Additional CSS. In Appearance > Menus my top navigation menu is named TopNavMenu, and when I inspect the top navigation menu I see “menu-topnavmenu” as the id. Assuming that is correct, I updated the cart-add-menu.php to “add_filter( ‘wp_nav_menu_menu-topnavmenu_items’, ‘woo_cart_but_icon’, 10, 2 ); // Change menu to suit – example uses ‘top-menu'”.
After doing that (and saving functions.php) I’m still not seeing the cart in the menu. What am I doing wrong? Am I overlooking something simple? Please help. Thank you.
My menu slug is top-navigation and I’ve added this code:
add_filter( ‘wp_nav_menu_top-navigation_items’, ‘woo_cart_but_icon’, 10, 2 );
I am setting a global variable in woo_cart_but_icon function to see if it’s being called and it’s not being called. Why?
Thank you for this snippet – it works great.
I’m wondering how to make it so the cart icon / shortcode only displays when something is added to cart, with AJAX.
I modified the code so it only shows when there is an item but I don’t understand how to make it refresh without reloading the page.
Neil, I can’t seem to get the icon to show up in my menu. If I paste the “” in my template, it shows up – but not where I want it to be. I really need it to be part of the menu. My menu id is “primary-menu”. Here is the code in the functions.php file:
add_filter( ‘wp_nav_menu_primary-menu_items’, ‘woo_cart_but_icon’, 10, 2 ); // Change menu to suit – example uses ‘top-menu’
/**
* Add WooCommerce Cart Menu Item Shortcode to particular menu
*/
function woo_cart_but_icon ( $items, $args ) {
$items .= ‘[woo_cart_but]’; // Adding the created Icon via the shortcode already created
Thanks for the great code snippets. They are awesome.
However, I needed to adjust the menu add_filter thus the Font Awesome Icon disappeared on the cart page all the time.
add_filter( ‘wp_nav_menu_main-menu_items’, ‘woo_cart_but_icon’, 10, 2 ); // Change menu to suit – example uses ‘top-menu’
/**
* Add WooCommerce Cart Menu Item Shortcode to particular menu
*/
function woo_cart_but_icon ( $items, $args ) {
if (is_page(‘cart’)) {
return $items;// just show the menu w/o the cart icon
}else{
$items .= do_shortcode(‘[woo_cart_but]’) ; // Adding the created Icon via the shortcode already created
return $items;
}
}
Maybe you have an idea why this happens. Once I refreshed the cart page and I saw the icon loading but disappearing after a second.
I did all the steps above but I am getting the [woo_cart_but] part only to show on the menu. There is no icon, and it isn’t even linking. I copied the three segments in to my template.php file.
Where does the code snippet go?
shortcodeoutput = do_shortcode( ‘[woo_cart_but]’ );
items .= $shortcodeoutput; // Adding the created Icon via the shortcode already created
When I place it my functions.php it breaks the site.
This is displaying the shortcode as plain text as a menu item. In other words, it’s not returning a number of items even though there’s several items in the cart.
I’ve added “do_shortcode” in the woo_cart_but_icon function and it worked for me. Like so:
[code]
function woo_cart_but_icon ( $items, $args ) {
$items .= do_shortcode(‘[woo_cart_but]’); // Adding the created Icon via the shortcode already created
…
[/code]
Thank you for writing this code, as it has helped me with my site.
It all works well, except for one issue. When the user has items in the cart and increases/decreases the quantity while on the cart page, the $cart_count does not get updated until the page is refreshed.
Any idea how to add this functionality and get it to update automatically?
thanksssssss
Hi, the code works great! However, if there is no product in the cart, the cart icon will not appear at all. How to fix this?
Got it! Thanks for taking the time to write this up and post it. I had to do some tweaks. “::marker” – had to set content:””;, and some small CSS tweaks to place the counter next to the basket.
You are the guy!
I just used for Hello Theme from Elementor.
An easier way to add the icon in menu is using a plugin to add shortcodes in menu. The “Shortocode in Menus” plugin worked just fine for me.
With this you can skip the Step: Add Cart Icon to an existing menu
Bests!
Nice, but where is the ul for the li?
Hi, great tutorial. i followed the steps and the only thing that is not working is the cart icon everthing else is. I get the number of items showing but not the image.
Any suggestions?
Hi, great tutorial. the only issue i am having is that it does not show the icon of the cart but only the number of items.
any suggestions?
thx
Thank you so much for this!!! It took me so long to find a tutorial that didn’t require a plugin. This was exactly what I needed!
Hello !
I’ve tried it on Hello theme + Elementor and it worked fine.
Now i’ve copy/paste the same code on another WordPress install with Storefront + Elementor with same CSS and it outputs html differently, like this :
Cart icon
0,00€
0 article
Here is a screenshot :
Hey, thanks for the code!!!
i’m trying to do this with Hello theme and Elementor.
I don’t know how to find the nav name.
Did anypne was able to do this with Elementor?
Thanks :)
Hello
I have the icon that appears in the menu, but I do not have the number of items in the icon inserted
Can you help me?
Thank you
Hi, I’m having difficulty whereby I see a bullet point with the cart count indented?
I’ve tried amending the code with the advice above on one of the previous comments but I then get about 10/15 versions of the cart and counter. Appreciate any help you can give please.
Right, I’ve resolved the bullet point by removing the but I now have a massive space between the trolley icon and the actual cart counter. Can you help with this please.
Hi,
I have addes the three functions in the article to functions.php (changed p_nav_menu_primary-menu_items because I want to diosplay the cart in the main menu) and added the above mentioned custom CSS.
Results:
– no cart icon in the main menu
– short code: cart color is pink, has a bullet point an the count numbder is not inside the icon.
What ist wrong?
https://test.barbaraskueche.de/
Thank you! Very useful! You are amazing!!! :)
This is wonderful. Thank you! What would one add in order to hide the whole icon (and count) if the cart is empty?
Thank You Very Much
Hey!
Woundering if is possible to move the icon (with the item count function – not just the icon) right side of the SHOP name in the menu if I place the SHOP … lets say… in the middle and not at the end of the menu.
Example:
HOME / MEDIA / FISHING / UTILE / CONTACT / TALCIOC (icon here)
TALCIOC being the SHOP.
So… if I move TALCIOC before CONTACT the icon will remain where it is and will show after CONTACT.
is there a way where I can call the icon to stick with a menu id or something?!
https://angler.ro is the site where I want to implement this.
Thank you!
Hi Neil. Have spoken in a long while, found this one today, solved my problem – thanks!
Hope you’re keeping well.
Hi Peter, glad it helped!
the code worked just fine. awesome!!!
I would also like to add a wishlist icon or button next to the basket. can you please help me through this. guidelines of what should I change in the above code should be fine for me.
thanks in advance.
And also line 3 :
wp_nav_menu_items
It worked for me.
line 9 on the last code is wrong. it must be:
$items .= do_shortcode(“[woo_cart_but]”);
true
Cool! Thnx for this! Is there a way to add a ‘current-page’ class when the user is actually on the cart page?
Hello Sir,
I’ve inserted the code, but nothing really happened. I believe I may be doing something wrong, so I thought to send you some details to know how you can help me:
This are screenshots of my Menu– https://prntscr.com/ugt8hi
My Menu Location– https://prntscr.com/ugt8zd
And my Header Menu– https://prntscr.com/ugt9mj
While I’ve implemented the code, the shortcode shows on my menu. Later, it’s no longer there.
Please, How do I get the code to work as expected?
Desperate to hear from you soon.
Regards
Hi, how would i add the cart total instead of the count
This worked PERFECTLY. Just a little CSS tweaks for the site I’m working on, and I’m off and running! Thank you very much for this!
The issue I face is it gives me a weird style of cart and I want to add the same style as the menu one but for the life of me I can’t figure it out since I don’t know where to place the in the code listed above…
Hey Daniel, thanks for sharing this, it is pretty awesome in fact
I´ve a question. When you reply a comment above explaining how to remove the list-style is applying on the shopping cart, I get lost how to remove it:
You said:
“You have to remove both in short code. final result:
cart_contents_count; // Set variable for cart item count
$cart_url = wc_get_cart_url(); // Set Cart URL
?>
//removedli
0 ) {
?>
//removed li
<?php
return ob_get_clean();
}
but this isn´t affecting the list-style image at all. Can you help me with this please
Great! Thank you.
For those who prefer the menu variant… just make a small change:
This:
*****
function woo_cart_but_icon ( $items, $args ) {
$items .= do_shortcode(“[woo_cart_but]”); ‘[woo_cart_but]’; // Adding the created Icon via the shortcode already created
return $items;
}
to this:
*******
function woo_cart_but_icon ( $items, $args ) {
$items .= do_shortcode(“[woo_cart_but]”); // Adding the created Icon via the shortcode already created
return $items;
}
Then everything works as described.
Great, but wheres the plug in version of this for us armchair coders?
I would like my cart icon to be next the the search in the upper right on the homepage. How do I get it there? Right now it wraps off the primary menu. Here is my code.
add_filter(‘wp_nav_menu_items’,’sk_wcmenucart’, 10, 2);
function sk_wcmenucart($menu, $args) {
// Check if WooCommerce is active and add a new item to a menu assigned to Primary Navigation Menu location
if ( !in_array( ‘woocommerce/woocommerce.php’, apply_filters( ‘active_plugins’, get_option( ‘active_plugins’ ) ) ) || ‘primary’ !== $args->theme_location )
return $menu;
ob_start();
global $woocommerce;
$viewing_cart = __(‘View your shopping cart’, ‘your-theme-slug’);
$start_shopping = __(‘Start shopping’, ‘your-theme-slug’);
$cart_url = $woocommerce->cart->get_cart_url();
$shop_page_url = get_permalink( woocommerce_get_page_id( ‘shop’ ) );
$cart_contents_count = $woocommerce->cart->cart_contents_count;
$cart_contents = sprintf(_n(‘%d item’, ‘%d items’, $cart_contents_count, ‘your-theme-slug’), $cart_contents_count);
$cart_total = $woocommerce->cart->get_cart_total();
// Uncomment the line below to hide nav menu cart item when there are no items in the cart
// if ( $cart_contents_count > 0 ) {
if ($cart_contents_count == 0) {
$menu_item = ‘‘;
} else {
$menu_item = ‘‘;
}
$menu_item .= ‘ ‘;
$menu_item .= $cart_contents.’ – ‘. $cart_total;
$menu_item .= ‘‘;
// Uncomment the line below to hide nav menu cart item when there are no items in the cart
// }
echo $menu_item;
$social = ob_get_clean();
return $menu . $social;
}
Hi
This all looks good, but there is a ‘bullet point’ and this indents the cart see here: https://www.screencast.com/t/lLqXL8R5
How is this removed?
You have to remove both in short code. final result:
<?php // cart->cart_contents_count; // Set variable for cart item count
$cart_url = wc_get_cart_url(); // Set Cart URL
?>
<a class="menu-item cart-contents" href="” title=”My Basket”>//removedli
0 ) {
?>
//removed li
<?php
return ob_get_clean();
}
Great Work, Thanks!!
Good morning. I added the 3 PHP snippets to my child theme’s functions.php file, and I added the CSS to the Additional CSS. In Appearance > Menus my top navigation menu is named TopNavMenu, and when I inspect the top navigation menu I see “menu-topnavmenu” as the id. Assuming that is correct, I updated the cart-add-menu.php to “add_filter( ‘wp_nav_menu_menu-topnavmenu_items’, ‘woo_cart_but_icon’, 10, 2 ); // Change menu to suit – example uses ‘top-menu'”.
After doing that (and saving functions.php) I’m still not seeing the cart in the menu. What am I doing wrong? Am I overlooking something simple? Please help. Thank you.
My menu slug is top-navigation and I’ve added this code:
add_filter( ‘wp_nav_menu_top-navigation_items’, ‘woo_cart_but_icon’, 10, 2 );
I am setting a global variable in woo_cart_but_icon function to see if it’s being called and it’s not being called. Why?
Thanks for the short code it looks great, but in my case it does not show number of items in the cart, only the cart icon.
Thank you for this snippet – it works great.
I’m wondering how to make it so the cart icon / shortcode only displays when something is added to cart, with AJAX.
I modified the code so it only shows when there is an item but I don’t understand how to make it refresh without reloading the page.
Neil, I can’t seem to get the icon to show up in my menu. If I paste the “” in my template, it shows up – but not where I want it to be. I really need it to be part of the menu. My menu id is “primary-menu”. Here is the code in the functions.php file:
add_filter( ‘wp_nav_menu_primary-menu_items’, ‘woo_cart_but_icon’, 10, 2 ); // Change menu to suit – example uses ‘top-menu’
/**
* Add WooCommerce Cart Menu Item Shortcode to particular menu
*/
function woo_cart_but_icon ( $items, $args ) {
$items .= ‘[woo_cart_but]’; // Adding the created Icon via the shortcode already created
return $items;
}
What am I doing wrong?
Thanks for the great code snippets. They are awesome.
However, I needed to adjust the menu add_filter thus the Font Awesome Icon disappeared on the cart page all the time.
add_filter( ‘wp_nav_menu_main-menu_items’, ‘woo_cart_but_icon’, 10, 2 ); // Change menu to suit – example uses ‘top-menu’
/**
* Add WooCommerce Cart Menu Item Shortcode to particular menu
*/
function woo_cart_but_icon ( $items, $args ) {
if (is_page(‘cart’)) {
return $items;// just show the menu w/o the cart icon
}else{
$items .= do_shortcode(‘[woo_cart_but]’) ; // Adding the created Icon via the shortcode already created
return $items;
}
}
Maybe you have an idea why this happens. Once I refreshed the cart page and I saw the icon loading but disappearing after a second.
Thanks a lot and keep up the good work.
It works fine … but how can u add the total amount of price left to the right item numbers?
Hi,
thank you, it works fine.
But not working on the cart page: if I change the quantity and click ‘update cart’ button, the mini cart does not update…
Any chance to fix this?
Neil, can you tell me how to append the shortcode to the menu?
I am a beginner and this step is vital for it to work correctly.
You’ll find that in the cart-add-menu.php gist
This is awesome thanks so much <3
I got the shortcode to display the number of items in the cart, but the icon is missing. What am I doing wrong?
I found that the code on line 9 needed to be changed to “$items .= do_shortcode(‘[woo_cart_but]’) ;” & this generates the shortcode correctly.
I did all the steps above but I am getting the [woo_cart_but] part only to show on the menu. There is no icon, and it isn’t even linking. I copied the three segments in to my template.php file.
Is there additional code that is required?
The code functions need to be in functions.php the shortcode can be added in templates files/widgets/pagebuilders etc
Where does the code snippet go?
shortcodeoutput = do_shortcode( ‘[woo_cart_but]’ );
items .= $shortcodeoutput; // Adding the created Icon via the shortcode already created
When I place it my functions.php it breaks the site.
This would go in the template file not functions.php
but not needed if you are using the add to menu method in the 3rd function.Use this code to display/add shortcode to menu:
$shortcodeoutput = do_shortcode( ‘[woo_cart_but]’ );
$items .= $shortcodeoutput; // Adding the created Icon via the shortcode already created
This is displaying the shortcode as plain text as a menu item. In other words, it’s not returning a number of items even though there’s several items in the cart.
I am also only getting plain text. The fontawesome icon is showing up but [woo_cart_but] is showing in plain text beside the icon in the menu.
I’ve added “do_shortcode” in the woo_cart_but_icon function and it worked for me. Like so:
[code]
function woo_cart_but_icon ( $items, $args ) {
$items .= do_shortcode(‘[woo_cart_but]’); // Adding the created Icon via the shortcode already created
…
[/code]
Thanks for the “do_shortcode()” bit!