Add WooCommerce Cart Icon to Menu with Cart Item Count

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.

Cart Icon In Menu

The code uses three functions which need to be added to functions.php and some 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.

Add a filter to get the cart count to update when it changes using the Ajax fragments.

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

 

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.

Add Cart Woocommerce Menu

In the above, a Fontawesome 5 icon is being used as it is already loaded in the theme.

Ref

1 Comment

  1. Scott Rod on March 14, 2019 at 7:41 pm

    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.

Leave a Comment