Web Development: How To Use the UberMenu Plugin To Create a WooCommerce Mega Menu

How To Use the UberMenu Plugin To Create a WooCommerce Mega Menu

The menus that appear on your website are the gateway to your entire website's content. They provide the user with a quick and easy way to find exactly what they are looking for on your website.

No matter what type of business you are running on your WordPress website, this hassle-free site navigation must be present on your website. Without this, your website viewers will become lost and frustrated and your webpages will have high bounce rates.

Unfortunately, the menu customization options in WordPress themes are very limited. Even if you have purchased a dedicated theme for your site, these menus can leave you with only a few basic customization features. By using the UberMenu WordPress plugin, you will have the flexibility to create menus that will suit any of your websites needs. This feature-rich plugin is the most advanced WordPress menu on the market and is a must-have if you require more than just a few basic menu customization options.

In this article, I am going to show you just how powerful this plugin by creating a nested header menu for an online clothing store. Watch the video below to see how we do it.

What We Will Be Building

eCommerce stores require stylish and deeply structured menus to categorize all of the companies products in a way that the user can easily navigate the site. Our clothing company is no different. By using the UberMenu plugin, we will be able to create a nested menu structure to fit all our different categories and subcategories of clothing. We will also be styling the menu to fit with the theme of our website. We will begin by setting up the actual menu in the WordPress dashboard and then move on over the plugin’s settings to further customize the menu. Below is an image of what our finished nested and styled menu will look like for our WordPress eCommerce clothing website.

Creating the Mega Menu

First, we are going to start with the creation of the menu. To do this, we first need to install the UberMenu plugin. Once we have installed the plugin, we can then head on over to Appearance > Menus in the WordPress dashboard. We will create a new menu in the menu editor by clicking the create a new menu link on the top of the editor and label it "eCommerce menu." From here, we can start adding in all our pages. For our clothing store menu, we want to make sure we have all the categories of clothing for men and women in a detailed menu so our customers can find the exact article of clothing they are looking for. We are going to add 30 different pages here from the Pages drop-down menu on the left-hand side of the menu editor. These pages include clothing for men and women. We are going to check the boxes of all 30 categories and click the Add to Menu button. This will display all of the pages in the menu structure editor.

Now it is time to create the nested menu with all our different subcategories. We are going to drag and drop the men and women page at the top. Again, the purpose of creating this customized menu is to ensure that the website is easily navigable. In the Add Menu Items left-hand editor, there is a section called UberMenu Advanced Items. By opening this menu you can see a list of items that you can use can add to structure the menu. For our menu, we would like to create tabs to nest our different categories like in the image below.

To add these tabs, we are going to check the box next to Tabs Block and click Add to Menu. Repeat this process again as we need two tabs, one for men and one for women. From there we are going to move each of the tabs blocks to nest right under the men and women pages. Here is what this should look like.

After we added these tabs, then we are going to structure the clothing categories. First up for the men's category is going to be the activewear page. We will drag and drop this page to nest right under the tab block. Within this men's activewear category, there are also the subcategories athletic jackets, workout shorts, and work shirts. These three types of clothing will be nested under the activewear clothing category. Here is what our menu looks like so far with the nested men's activewear clothing.

We are now going to repeat this process of nesting specific articles of clothing under their appropriate category for the rest of our pages that we added to the menu editor. We are going to make sure to add the second tabs block that we inserted into the editor under the women's parent category. Once all the pages have been placed in their respective spots, here is what the menu will look like.

Styling The UberMenu

Now that we have created the menu structure it is time to move onto the styling of the menu so it will fit in seamlessly with our website’s theme. Head on over to Appearance > UberMenu in the WordPress dashboard. This will open up the UberMenu settings. From here, we will start by clicking on the Basic Configuration tab in the menu and set the skin of the menu. From the dropdown menu, we will choose the "Red & Black" skin as this red top-level header and black submenu color will fit nicely with our website’s theme. There are a ton of options to choose from here so browse through them and find the one that works best for your theme.

If you would like to see what the different skins look like or view any of the changes you have made in the settings, you can always click on the Show All tab and click the View Menu in Sandbox button. This will open up a separate tab on your browser where you can view any menu that you create with UberMenu.

The next setting we are going to change around is in the Position & Layout tab on the UberMenu settings. Scroll down to Top Level Menu Items > Horizontal Item Alignment. We want the top-level menu items to be aligned to the left so we will click the circle next to Left.

Lastly, we are going to go to the Style Customizations tab. We are just going to change around the top-level header and column header font sizes so they are easily readable by our website visitors. We will change the Top Level Font Size to 15 and Column Header Font Size to 13.

Now that we have completed structuring and styling the menu, it is time to integrate it into our website.

Integrating The UberMenu

To integrate the UberMenu into our website, we are going to head on over to the Integration tab. We will checkbox the Primary box in the Automatic Integration Theme Location section. This will enable the menu we just created to be set as the primary menu in our theme. Next, we are going to go to Themes > Customize > Menus in the WordPress dashboard. Under the menus header, choose the eCommerce menu that we created.

Finally, choose the menu locations tab at the bottom of the menu and choose eCommerce menu.

There you have it! We created and implemented a nested menu that will work perfectly for our eCommerce website.

To view the menu creation process and integration of the menu, watch the video below.

Getting the most out of the plugin

The UberMenu plugin is a very complex plugin that allows you to customize every possible aspect of the menu. With the large list of features available, it can be easy to get lost in all the drop-down menus and text fields in the plugin's settings. Below, I have gathered a list of 3 of the most important features of this powerhouse plugin, so you can apply only the most important features to your menu.

1. Advanced Menu Items

In the WP Dashboard > Appearance > Menus, you can find the UberMenu Advanced Items drop-down menu that we used to add in the tabs. Not only can you create tabs in your menu as we did in our example, but you can add rows, columns, horizontal dividers, and menu segments to create a unique menu structure. The particular menu item that you choose to add to your menu will depend on you menus specific needs and how you would like it to look, so experimentation with these advanced items is necessary.

2. Adding Images and Icons

Adding images and icons can help bring your menu to life. To accomplish this, head back on over to menus in your WordPress dashboard. To add the icon or image to a specific menu item hover your mouse over the menu item tab and you will see a black uber menu button appear next to its name. Click this button and a menu will pop up with an image and icon section.

3. Custom Content and Shortcodes

Adding custom content and shortcodes to your menu opens up a whole new set of possibilities. Any shortcode that is available for use in your WordPress website can be inserted into your UberMenu, so think outside the box here and add in helpful shortcodes that will enhance your website visitors' experience. In our example, we could add a map of where our store location is on a separate menu item. Simply click on the Uber button again on your a page we title "Location" and scroll down to the custom content setting and click it. Next, we will add in our store location shortcode,

`[ubermenu-map address="Boston, MA" zoom="15" title="My Store"]`

This will add the map to your UberMenu so your website visitors can quickly find where your store is located.

Any text, HTML, or shortcode can be inserted into this field so experiment with what works best for your website!

Conclusion

If you are running a business or any type of website, it needs to be easy to navigate. Without easy-to-use navigation, your website traffic will undoubtedly decline. Having a complete menu on your website that shows all your website's pages or sections is the key to having a site that can be navigated easily.

By using the WordPress plugin UberMenu you can easily create a customizable menu to allow your website users to browse your website as quickly as possible. To give this plugin a try, head over to CodeCanyon and check out the UberMenu WordPress plugin. And while you're there, check out some of the other great WordPress plugins available from CodeCanyon.

Web Development

Wednesday, November 27, 2019