How to add a cart widget to your menu This tutorial shows you how to add a submenu to your Cart Summary / Info item which displays a mini cart. Please note that the styling of your WooCommerce cart widget will be dictated by WooCommerce and your theme (if your theme provides cart widget styles. UberMenu does not apply its own styling to the cart widget 1. Add a Widget Area item as a child of your Cart Summary item In Appearance > Menus, add a new Widget Area item from the UberMenu Advanced Items group. Drag it into position as a child below your top level cart summary item. 2. Set up the Widget Area In your new Widget Area item, open the UberMenu settings and enter the name for your widget area in the Custom Widget Area setting. We’ll use Cart Click Save Menu Item to save the UberMenu item settings. Click Save Menu to save the new menu item to the menu – or you can do this later after you’ve set up the Widget in Step 3. 3. Add the widget Navigate to Appearance > Widgets in your WordPress admin. Find the Cart Widget Drag it into the [UberMenu] Cart widget area You can remove the title to just show the cart with no header above it if you like. Click Save to save the widget. 4. Set the submenu position and width, disable the submenu indicator (optional) Back in Appearance > Menus, Open the UberMenu menu item settings for the top level (Cart summary) item In the General tab, enable the Disable Submenu Indicator setting. In the Submenu tab, set the Mega Submenu Position to Right Edge of Parent Item or as desired. In the Submenu tab, set the Submenu Width to 450px or as […]

UberMenu supports WooCommerce Product and Product Category menu items, and includes the ability to add cart summary and mini cart widget to your menu. Basic Menu Item Compatibility UberMenu has standard WooCommerce compatibility – you can add Products and Product category menu items to your mega menu. If they do not appear by default, you can activate them in your Appearance > Menus > Screen Options: and they will appear in the sidebar: These items function the same as any other item in your menu. Featured Images Featured images are supported both for static items and dynamic items. Products You can use the Dynamic Featured Image Inheritance feature to automatically display the featured image for the product. Product Categories As of UberMenu v3.7, the featured images functionality also supports WooCommerce Product Category images. WooCommerce Item Layouts There are two WooCommerce item layout options that will display the price and product image. Dynamically display WooCommerce Products and Product Categories In addition to adding static items as shown above, you can use Dynamic Terms to display WooCommerce Product Categories and Dynamic Posts to display WooCommerce Products dynamically. Cart Info/Summary Since UberMenu 3.5 You can add a cart summary (item count and total price) via the [ubermenu_woocommerce_cart_info] shortcode. Learn more about How to add a cart summary info item to your menu Cart Widget Dropdown You can display a mini cart in your submenu via the WooCommerce cart widget. Learn more about How to add a WooCommerce cart widget to your mega menu dropdown

Overview To build a multi-level mega menu structure of automatically generated terms, you can “nest” the [Dynamic Terms] items – that is, create multiple levels of parent/child relationships where the items inherit from one another. This tutorial walks you through setting up a menu with two submenu levels that automatically mirror a taxonomy structure. We’ll use this menu structure: To create this display: The parent [Dynamic Terms] item creates the second level column headers (Tops, Bottoms, Footwear, Accessories), while the child [Dynamic Terms] item creates the content below each header. Key Concepts 1. One level per [Dynamic Terms] item First, it’s important to understand that each [Dynamic Terms] item creates one level in the menu structure hierarchy. You can think of this as the results of the [Dynamic Terms] query expanding to replace that item in your menu structure. In other words, this structure: – Top Level — [Dynamic Terms] will generate this: – Top Level — Term A — Term B — Term C It will *not* generate a third level, even if your Terms query returns multiple levels of terms items. To do that, we would use nesting: – Top Level — [Dynamic Terms] (set parent term) — [Dynamic Terms] (inherit parent term) which will generate this when properly configured: – Top Level — Term A — Term A1 — Term A2 — Term B — Term B1 — Term B2 — Term C — Term C1 — Term C2 2. To filter the Terms results to a single level, use the Parent Term setting The Parent Term setting allows you to filter the [Dynamic Terms] results to children of a single term. Note: to show all top level terms, select [Top Level Terms Only], or set the ID to 0. 3. The Parent Term setting can be […]

Quick Tips For basics on how to add product and product category items to the menu, please see the WooCommerce Guide The “New” and “Savings” badges are added via the Badges feature The feature product item is created using the special WooCommerce Product Item Layout Menus Panel Submenu Structure This is the submenu structure for the “Shop” top level item, which is a link to the WooCommerce shop page. Its Submenu Column Default should be set to 1/5. “Featured” header above item To create the “Featured” header, in your Custom Content item, set the custom content to and add this custom CSS in your CSS Tweaks

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. 2. Add a menu item linking to your cart In Appearance > Menus, add the Cart page to your 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 Open the newly added menu item, and edit the Navigation Label to add the shortcode: [ubermenu_woocommerce_cart_info] 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 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 Info Shortcode [ubermenu_woocommerce_cart_info] […]

Please note, manual integration may no longer be required with the current version of Sahifa. Please test the standard automatic integration first, to see if you encounter residual styling with your setup Sahifa creates significant residual styling as it wraps UberMenu inside its own menu system. To fix this, we’ll need to use Manual Integration to replace the theme’s menu system and prevent the theme from interfering. Manual Integration Always make changes in a child theme in order to preserve them when you update the theme First, copy your theme’s header.php into the child theme. Open the file up in the child theme and find the theme’s menu system. It looks like this (please note that this may change in the future, so be sure to base your code on the current header.php) We want to conditionally replace this with UberMenu as described in the Manual Integration guide, so we check for the existence of UberMenu, and print the line of UberMenu integration code, otherwise display the theme menu. We end up with this:

Due to residual styling, Storefront breaks UberMenu when installed. To prevent the theme from interfering, we can use Manual Integration. Need a Storefront child theme? You can download the official starter version here: Storefront child theme documentation Recommended Solution: Pluggable Function Since Storefront’s menu function is pluggable, the simplest way to do this is to just paste this PHP in your child theme’s functions.php Alternative Solution: Hook system An alternative solution is to use the Storefront Hook System to unhook the theme menu and add in UberMenu instead. This solution is necessary if there is already a plugged version of the storefront_primary_navigation() function registered on your site (such as if you are using Storefront Pro). Here’s the code you’d add in the child theme in that case: One possible downside is that if your storefront_header hook priorities have been changed, you’ll need to adapt the code above to those new hook priority values.

Out of the box, Salient’s menu styles will interfere with UberMenu due to significant residual styling. Therefore we will use Manual Integration to replace Salient’s menu system with UberMenu. We will also make some special configurations in the settings to make UberMenu and Salient integrate more smoothly. Manual Integration First we’ll replace the theme’s menu with UberMenu in the child theme template files. Make sure to install and activate the child theme before proceeding. Here is the documentation on the Salient Child Theme Replacing the main menu Salient v10+ Salient v6, v7, v8, v9 Salient v5 1. Copy the header-menu.php template into your child theme In the child theme, recreate the parent theme directory structure: includes/partials/header/ Then copy the file from the parent theme salient/includes/partials/header/header-menu.php into the child theme salient-child/includes/partials/header/header-menu.php 2. Edit the header-menu.php template Open the file you copied to the child theme and find the nav block to replace. This template is not commented, and their line numbers change frequently, and the nav tag doesn’t use a unique identifier, so it’s hard to be specific as to where you’re looking for. I recommend looking for these three markers so that you are replacing the right section. Specifically, make sure you are replacing the menu with the ‘top_nav’ theme location. Replace the entire nav block with UberMenu. So you’ll paste this code before the opening nav tag: and this after the closing nav tag: (make sure you find the very next closing nav tag, as there are multiple remaining in the file) so they’ll look like this: In Salient’s header.php, we will replace the existing menu with UberMenu. Note that this code may have changed, so you’re looking for this similar area, including the mobile toggle button and nav section. This code: becomes: After editing the header.php, copy this […]

UberMenu includes several shortcodes that allow you to insert special content into the menu, including a Search Bar, WooCommerce Cart Summary / Info, Google Maps, and Recent Posts