How to add WooCommerce cart icon to menu

Add WooCommerce Cart Icon to Menu with Item Count

Do you want to add WooCommerce Cart Icon to menu bars?

WooCommerce is an amazing platform to sell physical and digital products. The WooCommerce plugin runs effortlessly and gives you everything you need to begin.

To make great shopping experiences in your store, you can display shopping cart Icons and totals on your WooCommerce top header menu. That way, your customer can see their cart items and check out whenever they want.

Today, In this article, We will show you how to add WooCommerce cart Icon to menu bars programmatically.

Below is the programmatic way to add WooCommerce cart icon to the menu and the WooCommerce cart item count, this links to the cart icon and displays the number of products that your customers have added to the cart.

First, let’s create a WooCommerce cart shortcode.
You can display the cart icon anywhere on your page or theme also this can be added to the menu.

The shortcode, Look Like: [woo_cart_but]
cart-shortcode.php

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.

cart-fragments.php

Add WooCommerce Cart Icon to Menu

Add WooCommerce cart icon to an existing menu.
This PHP code adds to a menu using the WordPress wp_nav_menu_items function. In the filter hook, for example, the menu has an id of “top-menu”.

So, filter name look like, wp_nav_menu_top-menu_items

if an id name is bottom-menu, then filter name: wp_nav_menu_bottom-menu_items Or ID: primary-menu
then, wp_nav_menu_primary-menu_items

cart-add-menu.php

Add WooCommerce Cart Icon Anywhere

You can display cart icon on your pages or posts using the shortcode also you can add it to your theme template.
[woo_cart_but]
and here is the PHP template shortcode:

Here is CSS:

Display Cart Icon:

Now, you can easily add the cart icon to the header menu of your WordPress website and add the icon code in the admin panel Navigation Label. Look Like: Admin panel -> Appearance -> Menus

In the menu sections, You can use the Font Awesome 5 icon.

Add WooCommerce Cart Icon to Menu with Plugin

In this section, We are going to show you, how to add WooCommerce Cart Icon to Menu with Plugin.

• WooCommerce Menu Cart

The WooCommerce Menu Cart plugin will work with WooCommerce, WP-eCommerce, EDD, Eshop, and Jigoshop. This plugin automatically installs a cart button into the menu area. The plugin takes less than a minute to install and configure and it is a very lightweight plugin. The Pro version is available for you.

However, You can try The WooCommerce Menu Cart plugin for your website.

Wrap Up

Adding a shopping cart icon to the website header menu is now simple. With only a few steps, you can attend to your target. Keep trying to how you could do it with the above information.

We hope this article will help you to Add WooCommerce Cart Icon To Menu with a plugin or programmatically.

Hence, This is a great idea to give your customers a better shopping experience.

If you have any questions, please comment below.