WooCommerce Cart

In this guide we’ll bring together many of the options available within Max Mega Menu to display a WooCommerce cart icon with “ajax enabled” cart totals.

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:

Adding the WooCommerce Cart page to the 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:

Mega Menu button on the Cart menu item

Set a ‘Cart’ Icon for the menu item

Select a suitable icon for the menu item. In this case we’re using the Cart icon from Dashicons, but you can select one from Font Awesome if you prefer, or upload your own icon.

Dashicons cart icon selected on the Icon tab

You can adjust the styling of the icon (size, colour etc) within the Styling tab

In the Settings tab, enable “Hide text” so we only see the Cart icon in the menu, and enable “Hide arrow” to remove the sub menu indicator. To position the cart on the right hand side of the menu bar, set “Menu item align” to “Right” and “Sub menu align” to “Right edge of Parent”.

Hide text, Hide arrow, Menu item align and Sub menu align settings for the Cart menu item

Output the Cart Total as a Menu Item Badge

Click the Badge tab and paste one or both of the following shortcodes into the “Badge Text” field to display your cart count/total:

[maxmegamenu_woo_cart_count]

[maxmegamenu_woo_cart_total]

 

Cart count shortcode in the Badge Text field

There are 4 built in styles for menu item badges, which can be edited under Mega Menu > Menu Themes > Badge.

Final Result

Cart icon with cart count badge aligned to the right of the menu

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

WooCommerce Cart widget settings in the mega menu

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

Cart sub menu open below the right aligned cart icon

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]
Cart icon block and HTML block in the mobile Toggle Bar Designer

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: