How to Setup WooCommerce Storefront Mega Menu

If you are running a WooCommerce store, you know that it is essential to make it easy for visitors to navigate your store. One of the solutions you should consider is adding a mega menu. They are great for online stores, as they make it easy for shoppers to find what they need quickly without a bunch of clicks.

Table of Contents

WordPress makes it easy to create a simple drop-down menu using core functionality. However, the default version does not support mega menus.

WooCommerce Storefront Mega Menu

In this brief tutorial, you will see how it is easy to create a mega menu for the Storefront theme. I will share a step-by-step tutorial for how to create a mega menu using a free plugin.

What is a Mega Menu

If you are not familiar with this term, a mega menu is defined as a larger-than-normal drop-down menu that lets you display way more information than a regular drop-down menu. Amazon is an example of an online store that uses a mega menu:

Since the Storefront theme does not allow you to create mega menus, there is only one approach. This approach is by the use of a plugin. The benefits of using a mega menu plugin are that:

Your mega menu will continue to work even if you switch themes.
You will probably get access to more functionality.

However, it would be best to play around with the plugin’s styling options to make it match the Storefront theme.

Steps to Create a Mega Menu in the Storefront Theme Using a Plugin

There are many plugins, which you can use to add mega menu functionality to your store. The most popular one is the Max Mega Menu plugin. This plugin is the highest-rated and has integration for the Storefront theme that we will use in this tutorial:

Moreover, this plugin lets you build your mega menu using regular WordPress widgets. This makes it easy for beginners.

Here are the steps that you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
Then, we are going to install the plugin that we have indicated earlier. To download it directly in the Admin Panel, navigate to Plugins > Add New. After that, you will need to do a keyword search for the plugin ‘Max Mega Menu’. You need to install and activate it, as shown below:
The next step is to enable mega menu functionality. To do this, go to Appearance > Menus in your WordPress dashboard.
You need to select the menu location for your header. It has a Display Location area like “Primary Menu” as shown below:
After selecting the menu location, find the new Max Mega Menu Settings box on the left. Click on the Enable box and save your changes.
The next step is to build your mega menu layout. After enabling the mega menu functionality, hover over the menu item you want to use to open the mega menu. Click the blue Mega Menu button.

This action will open the mega menu builder interface.

This interface allows you to use any of the standard WordPress widgets. Moreover, you can use the + Column and + Row buttons to organize your mega menu layout. If you want to edit the widgets and add content, click the Wrench icon. It also has a drag and drop feature. Make sure you save the changes you make. If you want, you can check out. However, you are not required to configure any settings there.

This is the outcome in the front end
From the image, you can see that the menu styling is not quite right yet. You need to go to the plugin’s settings to change some colors to make everything fit together. Go to Mega Menu > Menu Themes in your dashboard. Then, select the Menu Bar tab. Here, you can edit the colors to match your website.

Conclusion

In this post, I have shared how you can create a mega menu for your WooCommerce Store. I have shared a free plugin called the Max Mega Menu plugin. This plugin has a premium version that unlocks more features. If you want to customize some small aspect of your mega menu functions, I encourage you to explore the plugin’s settings further to see what all there is to offer.

The premium version gives you more types of mega menus and dedicated customer support. Moreover, it gives you more control over styles.

Editorial Staff

How to Setup WooCommerce Storefront Mega Menu

WooCommerce Storefront Mega Menu

What is a Mega Menu

Steps to Create a Mega Menu in the Storefront Theme Using a Plugin

Conclusion

Similar Articles

Related