4 ways to add WooCommerce product categories to the menu

This tutorial explores how to add WooCommerce product categories to the navigation menu, offering guidance on both the programmatic method and the user-friendly approaches through the WordPress dashboard and site editor. Whether you lean towards code-based solutions or prefer intuitive interfaces, we cover both methods, providing flexibility in seamlessly integrating product categories into your navigation menu. We’ll cover the following approaches:

• Adding categories from the dashboard for non block-based themes
• Adding categories from the dashboard for block-based themes
• Adding categories programmatically
• Adding categories using a plugin

Starting with the manual way through the dashboard is ideal when you want direct control over specific menu configurations. This method allows for immediate adjustments and is preferred if you prefer a hands-on approach to managing your menu. However, the programmatic method is recommended if you aim for a dynamic solution that automatically reflects changes in your product categories without manual updates.

How to add WooCommerce product categories to the menu from the dashboard

To add WooCommerce categories to your menu, go to Appearance > Menus page of your WordPress dashboard.

Once you’re in the menu editor, ensure that Product Categories are enabled by clicking on “Screen Options” at the top-right corner of the screen. Check the box next to “Product Categories” to make them visible for selection.

Now, you should see a new section labeled “Product Categories” in the left column. Expand this section, and you’ll find a list of available product categories. Check the boxes next to the categories you want to add to the menu.

After selecting your desired categories, click the “Add to Menu” button. The selected categories will appear in the menu structure on the right. You can arrange their order by dragging and dropping them into the desired position. You can also nest the categories to create a hierarchy, which depending on your theme, can be displayed as a drop-down menu.

Finally, click the “Save Menu” button to apply the changes. Your WooCommerce categories should now be included in your menu, providing easy navigation to each product category page.

How to add product categories to the menu using Site Editor

If you are using a block-based theme, the Appearance > Menus section will not be available, and in that case, you will need to add product categories using the WordPress site editor.

To add WooCommerce categories to your menu using the Site Editor, navigate to Appearance > Site Editor. Once inside the Site Editor, click on your navigation menu so that the Navigation block opens on the right side of the screen.

In the Menu section, locate the “plus” button and click on it to add a new item to the menu.

A window displaying available link types will appear. If “Product Category” is not visible, use the search box to find it.

Select the “Product Category” link item, and then search for the specific category you want to add. Click on the category to add it to the menu.

If you wish to add a submenu item, click on the three dots next to the parent item and select the “Add submenu link” option. Follow the same process as mentioned above to add the desired category. If you add submenu items, depending on your theme, they may be displayed as drop-downs in your WooCommerce menu.

Once you’ve made all your selections, save your changes. Here is an example of how the menu looks like in the Twenty Twenty-Four theme:

How to programmatically add WooCommerce product categories to the menu

To dynamically add WooCommerce categories to the menu, you can use the wp_nav_menu_objects filter. The following code snippet illustrates how to achieve this:

function add_dynamic_menu_items($items, $args) {
  if ($args->theme_location == 'primary') {
    $categories = get_categories( array('taxonomy' => 'product_cat') );

    foreach($categories as $category){
      $menu_item = (object) array(
        'ID' => 10000000 + $category->term_id,
        'title' => $category->name,
        'url' => get_term_link($category),
        'menu_order' => 9999,
        'menu_item_parent' => 0,
        'type' => 'taxonomy'
      );

      $items[] = $menu_item;
    }
  }

  return $items;

}
add_filter('wp_nav_menu_objects', 'add_dynamic_menu_items', 10, 2);

Let’s break down the key functionalities:

1. The code uses the wp_nav_menu_objects filter hook, which allows manipulation of the navigation menu items before they are outputted.
2. $args->theme_location == 'primary' checks if the current menu being processed is the one with the theme location ‘primary’. On this line, you need to set the location identifier of the navigation menu to which you would like to add the categories. The modifications will only occur for the menu with this specific theme location.
3. After this, we retrieve the product categories using the get_categories() function with the ‘product_cat’ taxonomy. On this line, you can add additional conditions to the loaded categories – for example, you can include/exclude categories or set a sorting custom order.
4. Menu Item Creation: The code then iterates through each category and creates a new menu item for each. The menu item is represented as an object with properties such as ID, title, URL, menu order, parent item, and type:
   • ID: It creates a unique ID for each menu item using a formula (10000000 + $category->term_id). Typically, this ID holds the menu item’s database ID, but since these items are added on the fly, we don’t have a fixed ID. So, we attach a really large number to the category ID. This minimizes the chance of any clashes with existing menu item IDs and guarantees that this item ID will stay constant.
   • title: Sets the title of the menu item as the name of the category
   • url: Sets the URL of the menu item using the get_term_link() function.
   • menu_order: It assigns a fixed order (9999) for the menu items. In this way, they will be added to the end of the menu. You can change this number to your preference.
   • menu_item_parent: It sets the parent item ID to 0, indicating these are top-level items. If you would like to add the categories as submenu items, you can do that by setting the parent menu item ID here.
   • type: It specifies that these are taxonomy items.
5. Finally, we add the created menu items to the existing menu items ($items).

 

Using a plugin to add WooCommerce categories to the menu dynamically

The Automatically Hierarchic Categories in Menu plugin provides another way to add product categories to your navigation menus. This approach offers the advantage of automatically populating the menu with product categories, eliminating the need for custom coding.

To display product categories in the menus using this plugin, navigate to Appearance > Menus. In the left-side section, you will see an element called “Auto Category Shortcode”. In this section, add an item with the following shortcode:

[autocategorymenu hide_empty="1" taxonomy="product_cat"]

Set a descriptive title – you can set any title you like, it won’t be displayed on the front-end.

Once you add the shortcode item and save the changes, the WooCommerce categories will be automatically added to your menu. Also, as you can see, the plugin will automatically set the category hierarchy so that subcategories are displayed as drop-down menus of the parent category.

In this shortcode, we have set the hide_empty option to 1, meaning that categories with no products will not be added to the menu. There are also some other shortcode attributes that you can set, such as:

• exclude – allows you to set a comma-separated list of category IDs to exclude
• level – the maximum hierarchy level. For example, setting the level to “1” will show only the top-level categories

Conclusion

In this article we’ve explored different ways to add WooCommerce categories, including those for your best selling products, into your menu. If you use a traditional theme, you can easily do it through the dashboard. If your theme uses blocks, you can still manage it conveniently through the Site Editor. There’s also a programmatic way for those who like to get hands-on with code. And if plugins are your thing, there’s an option for that, too. Whatever your preference, there are a variety of approaches to seamlessly include product categories in the menu, ensuring smooth navigation for visitors to your WooCommerce store.