How to Add WooCommerce Product Categories to the Menu

Do you want to include product categories in your menu? You’ve come to the right place. In this post, we’ll show you 2 different methods to add WooCommerce product categories to the Menu.

Why Add Product Categories to the Menu?

Optimizing your WooCommerce shop for conversions is key to increase your sales and revenue. Apart from a great checkout page and a professional-looking theme, your store should be easy to navigate. This is usually overlooked but it’s extremely important. To provide users with a great buying experience you need to make it easy for them to find what they’re looking for.

Having a clear and well-designed menu is key to help users browse through your site. Menus have very important information and that’s why they’re usually at the top of the sites. However, keeping your menu clean and organized can be a challenge if you have many products, categories, and sub-categories. But we’ve got a solution for you.

Here, you’ll learn how to add WooCommerce product categories to the menu to improve your site’s navigation. For example, let’s say that a shopper wants to purchase a Samsung mobile phone from your online store. Wouldn’t it be great if they could go to the section of Samsung mobile phones directly from the menu and easily find the product they’re looking for? Better navigation will help you improve customer experience and increase your conversion rates.

That’s why adding product categories to your menu can be a game-changer for your business.

How to Add WooCommerce Product Categories to the Menu

In this guide, we’ll show you how to add WooCommerce products to the menu in two different ways.

1. From the WordPress admin section
2. With a plugin

Let’s have a closer look at each method so you can choose the one that better suits your situation.

1) From the WordPress Dashboard

The easiest and most beginner-friendly method to include WooCommerce product categories in the menu. It doesn’t require any additional tool and it only takes a few minutes. First, log in to your WordPress dashboard and go to Appearances > Menus.

If you have just configured the basic options, you probably won’t see any menus so you will need to create one and assign it a menu position. Let’s see how to do that.

Creating a Menu

To create a menu, you just need to name it, assign it a position, and click the Create Menu button. For our demonstration, we’ll place our menu on the theme’s primary menu position. On the left panel, you will see all the elements and blocks you can add to your menu.

• Pages
• Posts
• Categories
• WooCommerce endpoints
• Products
• Product Categories

Can’t see the WooCommerce products and categories option? Don’t worry. They’re hidden so you just need to display them. Go to the Screen Options settings and tick the corresponding checkboxes as shown below.

Then, open the WooCommerce categories section and check the available categories you have on your online store. From the View All tab, you’ll be able to see all the available categories.

You can either select all the categories and add them to your menu or include specific categories.

Adding Product Categories To The Menu

For this demo, we’ll add all the categories to the menu.

After that, you can customize the items from the Menus section. You can change the item position, create sub-menus, choose where to display them, and more.

If you want to customize your menu, even more, check out the Screen Options section. There you will see Advanced menu properties that you can apply to your menu items.

After you’re happy with your changes, press Save Menu. After that, let’s check the front end to see the result. As you can see in the screenshot below, the WooCommerce product categories appear on the menu.

This method to add WooCommerce product categories to the menu is simple yet very effective. It literally takes a few minutes and can help you greatly improve your navigation. And the best part is that even a beginner can do it without any additional help. You can also customize your menu colors, fonts, and so on with a bit of coding. On the other hand, if you want to be able to edit your menu without any coding, you may want to have a look at the next method.

2) Add Product Categories to the Menu with QuadMenu

In this section, we are going to show you how to include product categories in the menu with QuadMenu. QuadMenu is an excellent freemium mega menu that allows you to easily create and manage different types of menus. This plugin has a free version with basic features that you can download from here and 3 premium plans with more advanced functionalities that start at 15 USD (one-time payment).

Additionally, you can integrate QuadMenu with any WordPress theme including OceanWP, Avada, Divi, Astra, GeneratePress, and many others. For this demo, we’ll show you how to add WooCommerce product categories to the menu using the GeneratePress theme.

Installation and Activation

First, install and activate QuadMenu on your site. To do that, go to the Plugins section, search for QuadMenu, and hit Install.

Then, you need to install the QuadMenu GeneratePress add-on. If you are using another theme like Divi or Avada, you need to install the specific extension for your WooCommerce store. You can have a look at all the extensions here.

After activating the extension, you will be redirected to the plugin settings. From there, you will be able to set up the plugin, menu, and main settings. The free version of QuadMenu comes with basic features that allow you to easily add product categories to the menu. To do that, go to the Default Theme settings, where you will be able to see all the main configuration options. You can choose three different layout options for the menu and choose the alignment. Additionally, you can create sticky menus, mobile menu shadows, toggle, title, icon, button, and typography options, and include animations. For example, let’s see how to change the font family of your menu.

First, go to the Typography section.

QuadMenu comes with all Google Fonts by default, so choose any font you like from the dropdown.

Then, you can also change the font size and letter spacing. Once you’re happy with the changes, press Save. On top of that, you can also add animations. Simply go to the Animations section and select the effects you want to apply to the text, subtitle, icon, and other elements.

With a few mouse clicks, you will be able to take your default WordPress menu to another level. Now, if you want to take things even further, you’ll need more advanced functionalities. For that, you’ll need the premium version of QuadMenu.

Installing and Activating QuadMenu’s Premium Version

You can purchase the premium version of QuadMenu from the official store for just 15 USD. After that, log in to your QuadLayers account and download the plugin files. Additionally, get the licensing information from your account dashboard. After that, install the plugin on your store and activate it.

Then, go to the License section and verify your license key.

QuadMenu is available on:

• QuadLayers’ website
• Envato
• Elegant Market Place

So you have to choose the corresponding marketplace from the dropdown. In our case, we are going to choose QuadLayers. Then, enter the license key and registered email and click Save changes. From now on, your site will receive all the plugin updates and support from the official developer.

Now, let’s move forward and see how to customize your WordPress menus.

Enabling QuadMenu

First, go to Appearance > Menus just like we did in the previous method and add the product categories to your menu. Before saving the menu, tick the QuadMenu Dev checkbox under Menu Settings. This is an important step, so make sure you check the corresponding checkbox.

After saving the menu, check your menu items. When you hover over the items, you will see a new menu called QuadMenu as shown below.

To edit an element, simply click the QuadMenu option. This is where the magic happens. You will be able to add a custom icon, change the link title, description, subtitle, and much more.

The Default tab has basic settings that you configure from the menus section, so we recommend you focus on the General and Icon tabs. In the General tab, you will see options to customize:

• Subtitle
• Badge
• Float
• Display size customization
• Dropdown float

For example, let’s say you want to set custom icons for your WooCommerce product categories. Click the corresponding option and choose the icon you like.

When you are adding multiple categories to your WooCommerce shop menus, the icons are very useful. With QuadMenu, you can display custom icons on your WooCommerce categories without having to add them manually. Simply select the icons you like from the list and save the changes.

After choosing the icons you like, check the website from the frontend and you’ll see the icons in your menu.

Changing Styles

Now, let’s take it a bit further and customize our menu a bit more using the QuadMenu theme settings. The good news is that you can customize many elements without writing a single line of code.

For example, let’s change the colors of the menu. You can just select the colors you want from the panel and save the changes. For this demo, we have modified our menu’s background color.

So in the front end, you’ll see that now the background color is blue.

If after saving the changes you don’t see them on the frontend, simply clear the WordPress cache and reapply the changes. This is how you can use QuadMenu to edit your WooCommerce menu.

Apart from adding product categories and changing the colors, you can include animation effects, change the typography, add sticky options, and much more. So if you want to take your menus to the next level, QuadMenu is an excellent option.

Conclusion

Site navigation is key to have a successful online store. Users need to be able to find what they’re looking for easily. Considering how important menus are, one of the best solutions to improve navigation is to add WooCommerce product categories to the menu. In this guide, we’ve seen two simple methods to do that.

1. From the WordPress dashboard
2. Using QuadMenu

Including product categories from the WordPress admin dashboard is very easy and only takes a few minutes. Even though you can use the WordPress customizer or the default WordPress menu settings to make changes, the customization options can be quite basic if you don’t have coding skills.

On the other hand, QuadMenu is a very powerful and easy-to-use plugin to create and manage menus. It allows you to take full control of your menu, add custom font icons, Google fonts, change the colors, layout, and much more. Additionally, with QuadMenu you can easily create mega menus that can work very well for stores with many products. So if you want to make many modifications and take your menus to the next level, QuadMenu is an excellent choice.

Do you know of any other ways to add product categories to the menu? Did you have any issues while following the tutorial? Let us know in the comments section below!