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!
- Go to Products > Categories in your WordPress dashboard.
- Add a few categories if you haven’t already (e.g., Shirts, Hats, Accessories).
- 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:
- Go to Appearance > Menus.
- In the top-right corner, click “Screen Options” (a sneaky tab!).
- Check the box for Product Categories. Boom! They now show up as options on the left.
🧩 Step 3: Add Categories to Your Menu
- Still in Appearance > Menus, choose the menu where you want the categories to appear, or create a new one.
- In the Product Categories panel (left side), select the categories you want to include.
- Click “Add to Menu”.
- Drag and drop them to reorder or nest them (like putting “Hats” under “Accessories”).
- 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!
- Go to Appearance > Menus > Manage Locations.
- Assign your menu to a location, like Primary Menu or Header Menu, depending on your theme.
- 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;
}
🔗 2. Link Directly to Filtered Views
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.
🛍️ 5. Feature Categories in the Sidebar or Footer
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.