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

The shortcode, in this case, would be [woo_cart_but] – for template files you can use do_shortcode

<?php echo do_shortcode("[woo_cart_but]"); ?>
<?php // <~ don't add me in
add_shortcode ('woo_cart_but', 'woo_cart_but' );
/**
* Create Shortcode for WooCommerce Cart Menu Item
*/
function woo_cart_but() {
ob_start();
$cart_count = WC()->cart->cart_contents_count; // Set variable for cart item count
$cart_url = wc_get_cart_url(); // Set Cart URL
?>
<li><a class="menu-item cart-contents" href="<?php echo $cart_url; ?>" title="My Basket">
<?php
if ( $cart_count > 0 ) {
?>
<span class="cart-contents-count"><?php echo $cart_count; ?></span>
<?php
}
?>
</a></li>
<?php
return ob_get_clean();
}
view raw cart-shortcode.php hosted with ❤ by GitHub

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

<?php // <~ don't add me in
add_filter( 'woocommerce_add_to_cart_fragments', 'woo_cart_but_count' );
/**
* Add AJAX Shortcode when cart contents update
*/
function woo_cart_but_count( $fragments ) {
ob_start();
$cart_count = WC()->cart->cart_contents_count;
$cart_url = wc_get_cart_url();
?>
<a class="cart-contents menu-item" href="<?php echo $cart_url; ?>" title="<?php _e( 'View your shopping cart' ); ?>">
<?php
if ( $cart_count > 0 ) {
?>
<span class="cart-contents-count"><?php echo $cart_count; ?></span>
<?php
}
?></a>
<?php
$fragments['a.cart-contents'] = ob_get_clean();
return $fragments;
}
view raw cart-fragments.php hosted with ❤ by GitHub

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

<?php // <~ don't add me in
add_filter( 'wp_nav_menu_top-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;
}
view raw cart-add-menu.php hosted with ❤ by GitHub

 

Finally, add some CSS…

/* # WooCommerce Cart Icon CSS with FontAwesome 5
---------------------------------------------------------------------------------------------------- */
.cart-contents {
position: relative;
display: flex !important;
flex-flow: column nowrap;
justify-content: center;
}
.cart-contents:before {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f290" !important;
font-size: 30px;
color: #FF1493;
}
.cart-contents:hover {
text-decoration: none;
}
.cart-contents-count {
color: #fff;
background: transparent;
font-weight: bold;
border-radius: 50%;
padding: 1px 6px;
line-height: 1.5;
font-family: Arial, Helvetica, sans-serif;
vertical-align: top;
height: 17px;
width: 17px;
transform: translateY(-105%) translateX(25%);
font-size: 10px;
}
view raw cart-css.css hosted with ❤ by GitHub

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

12 Comments

  1. Cristien on May 20, 2019 at 3:35 am

    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.

  2. Miguel on May 1, 2019 at 9:42 pm

    This is awesome thanks so much <3

  3. Erik Chavez on April 30, 2019 at 5:42 pm

    I got the shortcode to display the number of items in the cart, but the icon is missing. What am I doing wrong?

  4. Owen Fletcher on April 23, 2019 at 2:04 pm

    I found that the code on line 9 needed to be changed to “$items .= do_shortcode(‘[woo_cart_but]’) ;” & this generates the shortcode correctly.

  5. Sean on April 20, 2019 at 9:32 pm

    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?

    • Neil Gowran on April 20, 2019 at 11:51 pm

      The code functions need to be in functions.php the shortcode can be added in templates files/widgets/pagebuilders etc

  6. Chris Coffin on April 19, 2019 at 5:41 pm

    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.

    • Neil Gowran on April 20, 2019 at 11:58 pm

      This would go in the template file not functions.php < ?php echo do_shortcode("[woo_cart_but]"); ?> but not needed if you are using the add to menu method in the 3rd function.

  7. Neil Smart on March 28, 2019 at 2:13 pm

    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

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

    • Cristien Lefrancois on May 25, 2019 at 9:56 pm

      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.

Leave a Comment