Max Mega Menu Pro includes functionality that lets you replace an existing menu item with something else: either a logo, a search box, a shortcode, a WooCommerce cart total, an Easy Digital Downloads cart total or HTML.

We’ll use this functionality to add a WooCommerce cart total to the menu.

Our WooCommerce cart replacement uses Ajax to detect when an item has been added to the cart and will update automatically without the page refreshing.

How to add a WooCommerce Cart Total to your Menu

Create a new menu item for the cart total

To add a WooCommerce Cart total to your menu, first add the Cart menu item to your menu:


Open the mega menu settings

Position the menu item where you’d like the Cart item to appear and click the Save Menu button, then open the Mega Menu settings for the item:


Set a ‘Cart’ Icon for the menu item

Select a suitable icon for the menu item.


Replace the menu item text with a WooCommerce Cart Total

Click the Replacements tab and select “WooCommerce Cart Total” as the replacement type.


Final Result


Looking for more flexibility?

You can switch the replacement type to HTML instead and use two built in shortcodes:

[maxmegamenu_woo_cart_count] [maxmegamenu_woo_cart_total]



This will result in a menu item like this:


Displaying a Cart Widget below the cart total

​You can add a WooCommerce cart widget to the sub menu of your cart total menu item (see “Displaying Widgets in a mega menu: https://www.megamenu.com/documentation/mega-menus/).

If you wish to make the sub menu containing the cart narrower, see: https://www.megamenu.com/documentation/change-width-individual-sub-menu/

Adding a cart count to the Mobile Toggle Bar

To show the WooCommerce cart count in the mobile toggle bar, add 2 mobile toggle blocks:

  1. An icon block set to the Cart icon
  2. An HTML block showing the WooCommerce shortcode [maxmegamenu_woo_cart_count]

The HTML block displaying the cart count will not have any specific styling attached to it. If you wish to adjust the styling, go to Mega Menu > Menu Themes > Custom Styling and add the following:


Like what you see? This functionality is available in Max Mega Menu Pro

Related Articles