fervor [>]CODING & CURIOSITY
FERVOR LEARNING SYSTEMTUTORIALS
← WordPress

WordPress / 4 MIN READ

Adding Product Catagories to the Menu

Adding Product Catagories to the Menu

From the original Fervor library. Examples may use older package versions.

Awesome! Let’s whip up a friendly step-by-step tutorial on how to create a menu that features all your WooCommerce product categories in WordPress. 🛍️💡


🧑‍🍳 Tutorial: Cooking Up a Product Category Menu in WooCommerce

Goal: Create a menu on your site that displays all product categories from your WooCommerce store.

Ingredients:

  • WordPress site ✅
  • WooCommerce plugin installed & activated ✅
  • Some products with categories ✅

🪄 Step 1: Make Sure Product Categories Exist

Before you can show categories in a menu, you need to have them!

  1. Go to Products > Categories in your WordPress dashboard.
  2. Add a few categories if you haven’t already (e.g., Shirts, Hats, Accessories).
  3. Add products to those categories.

📌 Pro Tip: Even if a category has no products, you can still show it in the menu—just a heads-up.


🧭 Step 2: Enable Product Categories in the Menu Editor

By default, WordPress hides some things in the menu editor. Let’s fix that:

  1. Go to Appearance > Menus.
  2. In the top-right corner, click “Screen Options” (a sneaky tab!).
  3. Check the box for Product Categories. Boom! They now show up as options on the left.

🧩 Step 3: Add Categories to Your Menu

  1. Still in Appearance > Menus, choose the menu where you want the categories to appear, or create a new one.
  2. In the Product Categories panel (left side), select the categories you want to include.
  3. Click “Add to Menu”.
  4. Drag and drop them to reorder or nest them (like putting “Hats” under “Accessories”).
  5. Hit Save Menu.

🛠️ Optional Tip: Want a dropdown effect? Nest categories under a top-level “Shop” or “Categories” item.


✨ Step 4: Display the Menu on Your Site

Now, place that menu where people can see it!

  1. Go to Appearance > Menus > Manage Locations.
  2. Assign your menu to a location, like Primary Menu or Header Menu, depending on your theme.
  3. Save!

📱 Bonus: If your theme supports it, you can also place menus in sidebars or footers using widgets. Go to Appearance > Widgets and use the Navigation Menu widget.


🎨 Optional Magic: Auto-Update Categories with a Plugin

Want new categories to appear in the menu automatically? Use a plugin like:

  • Category Listing Plugins: e.g., Product Categories Designs for WooCommerce
  • Mega Menu Plugins: If you’re going fancy, try Max Mega Menu

I can fetch plugin recommendations or walk you through setting that up if you want! 😎


🧠 Bonus Section: Cool Things & Pro Tips for Your WooCommerce Category Menu

🎨 1. Style It Like a Pro

Make your menu pop!

  • Use Icons: Add category-specific icons (like a hat for the “Hats” category) with plugins like Menu Icons by ThemeIsle.
  • Customize with CSS: Tweak padding, colors, hover effects, etc., via Appearance > Customize > Additional CSS.
  • Highlight Sale Categories: Add a custom class to a category like “Sale” and style it with bold colors.
.menu-item.sale-category a {
  color: red;
  font-weight: bold;
}

Instead of just linking to a category page, you can:

  • Link to a category + filter combo (like only red shirts).
  • Example URL structure: /product-category/shirts/?filter_color=red

This is perfect for curated mini-collections!


📦 3. Use Subcategories Creatively

  • Break down big categories (e.g., “Clothing” > “Men’s” & “Women’s”).
  • Create intuitive navigation by nesting subcategories.
  • Consider limiting visible items with “Max Depth” settings in some mega menu plugins.

🔁 4. Auto-Update the Menu (So You Don’t Have To)

If you don’t want to manually update the menu every time you add a new category:

  • Use a plugin like “Category Menu Items” or “WP Menu Cart”.
  • These can dynamically populate your menu based on current product categories.

Don’t restrict categories to just the header menu:

  • Use Widgets: Go to Appearance > Widgets, then add a Product Categories or Navigation Menu widget to your sidebar or footer.
  • Great for mobile users who scroll instead of navigate traditionally.

🤹‍♂️ 6. Combine with Product Tags or Attributes

Use custom menus or mega menus to mix categories with:

  • Product Tags (e.g., “Summer Picks”)
  • Attributes (e.g., “Size: Large”)

Perfect for guiding customers to tailored collections quickly.


Keep your curiosity going.Explore more WordPress →
287 TUTORIALS · 22 TOPICSREADY