Storefront Mega Menus

Storefront Mega Menus allows you to create enhanced full-width dropdowns that seamlessly integrate with your Storefront-powered WooCommerce shop.

Installation

↑ Back to top
  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New to upload the file you downloaded.
  3. Activate the extension.
  4. Click Save Changes.

More information at: Managing and Installing Plugins.

Note: If your store is in a WordPress 5.8+ environment, Storefront Mega Menus requires the classic widgets plugin to be installed and active. Storefront Mega Menus currently does not work with the block widget editor.

Usage

↑ Back to top

Storefront Mega Menus adds all its settings to WordPress Customizer, making it straightforward to use. Upon opening the Customizer at Appearance > Customize, navigate to Menus.

The Menu Customizer, introduced in WordPress 4.3, allows you to intuitively manage the site’s menus. In this section are several settings.

Currently, Mega Menus does not work for mobile devices. Another menu needs to be setup without Mega Menu functionality and designated as the Handheld menu.

Adding a new menu

↑ Back to top
new-menu
    1. Click the Add a Menu button.
    2. Name your new Menu.
    3. Click the Create Menu button.

Assigning a menu to a location

↑ Back to top
assign-location
Currently, Mega Menus only works in the Primary Menu location, which is the main navigation under your logo.

Adding menu items

↑ Back to top
adding-menu-items

Click the Add Items button and select items you would like to add to your Menu.

Configuring a Mega Menu

↑ Back to top
configuring-mega-menu

Click the arrow next to the title of one of your Menu Items to display the Mega Menu button.

The Mega Menu button opens a new side panel where you can manage the selected Menu Item.

Adding widgets

↑ Back to top
click add widget and search for the widget title to add it to the menu

Click the Add a Widget button to add a new widget. Select a widget from the list.

Note that if a Text Widget is used, then shortcodes included in WooCommerce can be applied.

Resizing and changing the order of widgets

↑ Back to top
Click and drag the edge of the widget to resize

Resizing

resize-handle


With your mouse, hover over the corner/borders, then click and drag to resize the widget.

Changing the order

moving-widget


Click and drag the top of a widget to move it to a different position.

Deleting a widget

↑ Back to top
delete-widget


Click the arrow next to the widget title to display options. At the bottom select Delete.

Enable and preview

↑ Back to top
enable-button

When the Enable checkbox is ticked, the Mega Menus are shown on your site and Preview is available.

Look for the Hide Controls button at the bottom left-hand corner of the screen

TIP: At the bottom left corner of your screen, look for the Hide Controls button. Use this button to hide all Customizer panels and see a full preview of the menu on your site.

Frequently Asked Questions

↑ Back to top

How can I create menu columns with headings like in the Storefront demo?

Here are instructions for how to create a menu similar to the one on the Storefront demo site:

Mega Menus appearance on the demo site
  1. Under Appearance > Customize > Menus, add new menus for each of your product categories, and add menu items to each of those menus.
  2. Once completed, select your normal menu, then expand a menu item to reveal the Mega Menu button with which to create a custom menu area;
  3. Next, click Add a Widget and be sure to add the Navigation Menu widget to the area created in step #2.
  4. Select the custom menus created in step #1, add them to the area and change the title as desired.
  5. Resize and arrange them in the same row.
Mega Menus demo site widget arrangement