Storefront Mega Menus

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

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.

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.

1. 1. Click the Add a Menu button.
   2. Name your new Menu.
   3. Click the Create Menu button.

Click the Add Items button and select items you would like to add to your 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.

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

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

Changing the order

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

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

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

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.

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:

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.