The Complete Guide to Customising the Menu of your WooCommerce Store

Imagine walking into a huge department store and wanting to buy a range of different products –  shoes, a watch, maybe a new hairdryer. But to your surprise, there are no signs anywhere to help you find your way around. You might wander around looking for what you need, or look for someone that can help you find what you’re looking for. But once you fail, you’ll end up simply leaving the store. 

People shopping at traditional stores have made a time commitment to go shopping, and it can take a lot of effort to go to another shop across town if they don’t like the experience. But eCommerce is different, and another online store is just a Google search away. 

Your online store’s navigation menu is important as it’s the primary way users will get around your store and find products they want to buy. It needs to clearly and quickly communicate everything to your customers, else you risk losing people before they’ve even started browsing your store. 

Using the default WooCommerce menu options, you are limited by a lot of things. As WordPress was originally designed to be a blogging platform, it’s less effective for an online store with many sections. Your storefront needs to stand out as it is the “face” of your brand online. The default, generic WooCommerce navigation simply won’t cut it. 

In this tutorial, we’ll show you how to customise the WooCommerce menu using Storefront Pro so that your online store stands out from the rest of the competition. The Storefront Pro plugin is designed specifically for creating beautiful, functional WooCommerce stores. It packs powerful tools to help you customise your WooCommerce menu and make it both unique and clear for your users.

Customising the default WordPress Menu

WordPress comes out of the box with default menu functionality for your WooCommerce store. Users can add pages to the WooCommerce menu and display the menu on the top of their WordPress site. To do this, head on over to Appearance > Menus from the WordPress admin panel to create your WooCommerce menu. 

Start by giving your WooCommerce menu a name and click the Create menu button. This will add a new WooCommerce menu to your site. You can add links to the WooCommerce menu, create drop-downs, and even add a home link to the menu. Additionally, you can also add WooCommerce product categories to the WooCommerce menu by selecting a category and then clicking the Add to Menu button. You might even consider adding a link to the Cart page in addition to displaying the cart widget icon.

With the default WordPress menu functionality, you can also manage the locations of multiple WooCommerce menus. You can click on the Manage Locations tab and select which WooCommerce menu will be your primary menu, the secondary menu, or the handheld menu. Once you’re done, click the Save changes button to continue.

This is what the default WordPress menu will look like on your WooCommerce store. The WordPress Customizer gives you the ability to create menus, but almost no control over how they look, where they’re displayed, or other important things that can make your store stand out. This means you can’t customise the menu to deliver a better user experience to customers.

Customising your WooCommerce Menu with Storefront Pro

The Storefront Pro WordPress plugin lets you create beautiful, functional WooCommerce stores without having to mess around with PHP or CSS. It comes with powerful tools to help you customise your WooCommerce menu and make it both unique and clear for your users. This way, you can deliver a better user experience to customers.

With Storefront Pro, users have a lot of different options for making customisations to the WooCommerce menu of their WordPress site. Here, we’ll show you the different options available on Storefront Pro. 

#1. Navigation styles

Making the WooCommerce menu clear involves trying out different navigation styles to see what suits your store best. Depending on the WordPress theme you’re using, you might want to position it differently than what comes out of the box.

With Storefront Pro, customising how the WooCommerce menu is displayed on your online store is intuitive and simple. You don’t have to add any PHP, HTML, or CSS code. You can customise the navigation styles of your WooCommerce menu in just a few steps.

Go to the WordPress Customizer to start making changes to your WooCommerce menu. Go to Header and Navigation > Primary Navigation to access the different navigation settings. You can choose to display the navigation menu anywhere on your site, including left, center, or right in the header, left vertical, hamburger with labels, and center with logo in navigation. 

For example, if we wanted to go with left vertical and make the text bold, it would look something like this:

You can easily change the typography of your WooCommerce menu using Storefront Pro. You can also customise the text, link, active colours, fonts, size, and much more. 

Changing the background colour of the menu is very simple; all you need is to select a colour from the colour palette in the WordPress Customiser. Storefront Pro also gives you the option to toggle the header sticky or not. This means that if you set it to on, the header will move when the user scrolls through your WordPress site. This way, it’s always visible to the user. 

#2. Mega menus

A “Mega Menu” allows you to combine items and submenu items to create huge custom menus that make navigation in large or complex stores a breeze. Mega menus are very simple and intuitive to create using Storefront Pro. To set up a mega menu, navigate to Appearance > Menus from the WordPress dashboard. Click on any item in your WooCommerce menu and you’ll be presented with drop-down options, including the one to create a mega menu. Tick the check box next to Make a mega menu and drag and drop them into place. Click the Save Menu button to continue. 

Here’s how the mega menu will look on the front-end of your WooCommerce store:

You can use this to link directly to a specific product page or product category pages from the main menu.

#3. Adding icons

You can also choose to add icons to your WooCommerce menu items. Simply navigate to Appearance > Menu and click on the desired menu item you want to add the icon to. You can select the different icons you want to display right next to your WooCommerce menu selection and then click on the Save Menu button to continue. 

Here’s how that will look on the front-end of your WooCommerce store:

You can display all sorts of icons such as a shopping cart icon, checkout icon, and shop icon.                                                                                   

#4. Adding social contact information

You may also display social content information and menus directly in the header, neatly above the menu. Storefront Pro makes it easy for you to add phone numbers, email addresses, and social URLs using the header section of the WordPress Customiser.

Navigate to Header and Navigation > Header Elements to access the different options to display social information. You can add your social media account URLs directly to your header and display your phone number and email right next to it. Once you’re done, click the Publish button to save changes to your WordPress site. 

#5. Live search

With Storefront Pro, it is also possible to customise how the live search box appears on your WordPress site. Go to the WordPress Customizer and click the Live Search section to access the different settings for customising your live search box. You can change the design of the search box with colours and typography. You can also set the search box to either be the default size, large size, or extra-large box. Additionally, you can also set it to rounded corners; this will display a clean, round search box instead of the chunky, boxy default one. 

Additional Features

Storefront Pro can do so much more than help you customise your menu. Go over other great functionality of Storefront Pro: 

Homepage Hero

Storefront Pro lets you create an amazing WooCommerce homepage that will make your store stand out from the rest of the competition. You can choose full-screen sliders, videos, and products to add to the homepage of your WordPress website. 

Simple head on over to the WordPress customiser and navigate to Header and Navigation > Header Type and select the type of Homepage Hero you want to set. You can also set the position of the Homepage Hero and the different customisations by scrolling down. Once you’re done, click the Publish button to save changes. 

Footer Customiser

You may also choose to customise the way the footer looks on your WooCommerce store. Navigate to Footer > Layout from the WordPress customiser to configure and set different settings.

You can choose to add a background image or set different colours that can help you get the exact look and feel you want. You can also select the type of footer you prefer from the Footer layout drop-down menu and add custom footer text in the text field. Once you’re done, click the Publish button to save changes to your WooCommerce store. 

Blog customiser/post layouts

Storefront Pro lets you customise post layouts or single-page layouts on your WooCommerce store. You can add columns, change layouts and create the perfect blog using Storefront Pro. Navigate to Posts > Posts Page to configure and change the layout settings of your blog posts. 

Once you’re ready to go, simply click the Publish button to save the changes on the front-end of your WooCommerce store.

Hide header until scroll

If you have more visual products or content on your WordPress site, you have the option to hide the header until scroll so users can focus on your content. To do this, head on over to Header and Navigation > Header Elements and tick the check box next to Make header sticky and Hide header until scroll.

Once you are ready, click on the Publish button to save changes. The header will only be displayed when users scroll on your WordPress website.

Full-Screen layout

This can help your customers fully immerse themselves in the content and the design of your WordPress website. With Storefront Pro, you can easily achieve a full-screen layout and exploit the full width of the screen.

Navigate to Content > Content Elements from the WordPress Customiser and tick the checkboxes to hide additional lines and borders from your WooCommerce store. This will create a full-screen effect and make it easier for visitors to focus on your content and products.

Page Builder support

Storefront Pro also lets you create awesome individual pages using the page builder as well as the homepage of your WooCommerce store. The page builder is intuitive to use, even for people with little coding skills. You can hide breadcrumbs from your homepage or an individual page, add a background image, customise the typography, and much more. 

All of this is possible through a point-and-click interface. This means that you don’t have to use shortcodes.

Responsive mobile stores

With Storefront Pro, you can easily create responsive mobile stores. This is particularly useful for store owners that get lots of traffic from mobile devices.

To change mobile menu options, navigate to Mobile > Mobile menu from the WordPress Customiser. You can add a mobile logo or change the background and font colour. Additionally, you can choose to display the search bar on your homepage for mobile users. To do this, tick the checkbox next to Display search on mobile menu and click the Publish button to save changes you made. 

Distraction-free layout

Storefront Pro lets you create a distraction-free layout for your WooCommerce store. You can use Storefront to clean up your shop page as well as the WooCommerce cart and checkout page. 

To clean up the shop page, navigate to WooCommerce > Shop from the WordPress customiser and select the Hide breadcrumbs on WooCommerce pages option. You may also select the checkbox next to Hide product count on categories to further clean up your shop page. 

To clean up the WooCommerce cart and checkout page of your online store, navigate to WooCommerce > Checkout and tick the checkbox next to Enable distraction free Cart and Checkout and the option next to Hide breadcrumbs on Cart and Checkout pages. Once you’re done, click the Publish button to continue.

You can do all of this without using shortcodes or changing the template manually.

Conclusion

Your WooCommerce menu should provide clear instructions and information on navigation. This helps users find exactly what they’re looking for and not get overwhelmed with basic, generic-looking navigation options that are difficult to understand. 

We showed you the easiest way to customise the menu of your WooCommerce store in different ways using Storefront Pro, without needing any PHP or CSS or messing around with the template. Hopefully, you’re in a good position to take the next steps.

Ready to start customising the navigation menu on your WordPress site? Get Storefront Pro WooCommerce menu plugin today!