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.

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.

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

add-widget

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

resize-move-widgets

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.

collapse

TIP: At the bottom left corner of your screen, look for the Collapse button. Use this button to hide all Customizer panels and see a full Preview of your site.

FAQs ↑ Back to top

Frequently asked questions about Storefront Mega Menus.

How do I link the custom menu widget title ↑ Back to top

To link the widget title of the custom menu when creating Mega Menus we recommend that you use a plugin titled Better Menu Widget which allows for this instead of the default WordPress Custom Menu Widget.

When using this widget remove the default text of sub-menu from the widgets menu classes section leaving this field blank like the screenshot below.

better-menu-css-classes

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top