Cart Summary / Info

Since UberMenu v3.5

How to add a WooCommerce cart summary item to your menu

1. Allow shortcodes in your menu item Navigation Labels

We’re going to create a menu item with a dynamic navigation label, the content of which will change depending on the contents of your cart, using a shortcode. Therefore we need to tell UberMenu to allow shortcodes by going to Appearance > UberMenu > Main Configuration > Miscellaneous and enabling the Allow shortcodes in Navigation Label & Description setting.

UberMenu Allow Shortcodes in Navigation Label setting

2. Add a menu item linking to your cart

In Appearance > Menus, add the Cart page to your menu.

UberMenu WordPress add WooCommerce cart to menu

3. Display the cart summary using the provided shortcode

Example A – Cart Count Badge

Requires v3.7+

Open the UberMenu Item settings for the Cart item.

In the General tab, enable Disable Text

In the Badge tab, add the shortcode to the Badge Content setting

[ubermenu_woocommerce_cart_info show_count_label="off" total="off"]

You can also set your badge background and text color in these settings.

Example B – Full Summary in Navigation Label

WooCommerce cart summary info in UberMenu

Open the newly added menu item, and edit the Navigation Label to add the shortcode:

[ubermenu_woocommerce_cart_info]

UberMenu WooCommerce Cart Info Summary Shortcode

See below for more ways to configure this shortcode to display only the content you want.

4. Set the cart icon

To make the cart icon appear beside the cart summary info, set the icon in the UberMenu menu item settings

Select cart icon

5. Align your item to the right (optional)

If you would like to align your cart summary to the right, set the Alignment menu item setting to Right

6. Save your work

Save the menu item settings, then save your menu if you haven’t already.

View the front end of your site and you should see the cart summary appear on the right edge of the menu

WooCommerce cart summary info in UberMenu

WooCommerce Cart Info Shortcode

[ubermenu_woocommerce_cart_info]

By default, the WooCommerce Cart Info shortcode will display your cart summary in the following format:

{quantity} items - ${total}

You can configure this output with the following shortcode attributes:

countSet to on or off to enable/disable display of the cart item count.

Example: [ubermenu_woocommerce_cart_info count="off"]

This will show just the total price, with no quantity information.

Default: on

count_label and count_label_pluralRather use a term other than “items”? Set it with the count label attributes.

Example: [ubermenu_woocommerce_cart_info count_label="Foo" count_label_plural="Foos"]

Instead of “3 items” the shortcode will print “3 Foos” for the quantity.

Default: item/items

show_count_labelToggle the count label on or off.

Example: [ubermenu_woocommerce_cart_info show_count_label="off"]

Instead of “3 items” this will just display “3” for the count.

Default: on

dividerChange the divider - to something else.

Example: [ubermenu_woocommerce_cart_info divider=" / "]

will print “3 items / $50.00” instead of “3 items – $50.00”

Default: –

totalEnable or disable display of the cart total.

Example: [ubermenu_woocommerce_cart_info total="off"]

Only the count, not the total price, will be shown.

Default: on

emptyContent to display when the cart is empty.

Note that if you use this setting, the display will not dynamically update when an item is added to the cart via AJAX.

Example: [ubermenu_woocommerce_cart_info empty="Empty cart"]

Will display just “Empty cart” when the cart count is zero.

Default: displays 0 items – $0 dynamically

On this page