How to Add WooCommerce Cart Icon in Menu with Item Count?

Hey, are you looking to add a woocommerce cart icon button in the header menu or wherever you want to show it in WordPress?

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.

See Also: How to Add Custom Menu Item in My Account Page?

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:

/*
 * 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
  
        echo '<li><a class="menu-item cart-contents" href="'.$cart_url.'" title="Cart">';
        
        if ( $cart_count > 0 ) {
        
            echo '<span class="cart-contents-count">'.$cart_count.'</span>';
       
        }
        
        echo '</a></li>';
        
            
    return ob_get_clean();
 
}

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.

/*
 * Filter with AJAX When Cart Contents Update
 */
add_filter( '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();
    
    
    echo '<a class="cart-contents menu-item" href="'.$cart_url.'" title="View Cart">';
    
    if ( $cart_count > 0 ) {
        
        echo '<span class="cart-contents-count">'.$cart_count.'</span>';
                    
    }
    echo '</a>';
 
    $fragments['a.cart-contents'] = ob_get_clean();
     
    return $fragments;
}

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.

/*
 * Append Cart Icon Particular Menu
 */
add_filter('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("[woocommerce_cart_icon]");
        return $cart . $menu;
    }

    return $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.

For example, 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.

You can also check with inspect element on that menu’s checkbox at the backend under Appearance > Menus and look for the menu location input field and in the square bracket ([]) will be your menu ID.

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

Design the Cart Icon

OK. So, add this CSS to your active theme’s style.css file. Change the cart image as per your theme design and save it.

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

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

.cart-contents:before {
    content: "";
    background-image: url("https://img.icons8.com/pastel-glyph/2x/shopping-cart--v2.png");
    width: 30px;
    height: 20px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 999;
    position: inherit;
}

.cart-contents-count {
    position: absolute;
    top: 10px;
    right: -5px;
    transform: translateY(-105%) translateX(25%);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 12px;
    line-height: 17px;
    height: 18px;
    width: 18px;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    background: #000;
    border-radius: 50%;
    padding: 1px;
    z-index: 999; 
}

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 then 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 questions or queries 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 🙂