If you run a WooCommerce store, your navigation menu plays a huge role in user experience and sales. A basic dropdown menu often isn’t enough—especially when you have multiple product categories.
In this guide, we’ll show you how to add WooCommerce product categories to a mega menu using RT Mega Menu, whether you’re using Elementor or the Gutenberg block editor.
Why Use a Mega Menu for WooCommerce?
A mega menu allows you to:
- Display multiple product categories in columns
- Show featured products inside the menu
- Add banners, images, or promotions
- Improve navigation for large stores
- Increase product discoverability
For eCommerce websites with many categories, this can significantly improve conversions.
Part 1: Add WooCommerce Categories Using Elementor
Step 1: Install Required Plugins
Make sure you have:
- WooCommerce installed
- RT Mega Menu installed
- Elementor installed
Step 2: Enable Mega Menu for Your Menu Item
- Go to Appearance → Menus
- Select your main menu
- Enable Mega Menu for the parent item
Step 3: Edit Mega Menu Layout with Elementor
- Click “Edit Mega Menu”
- Choose Edit with Elementor
- Add a Section with 3 or 4 columns
- Drag the Product Categories widget (or WooCommerce Category widget)
You can:
- Choose specific categories
- Show icons or thumbnails
- Add category descriptions
- Customize spacing and typography
Optional: Add Featured Product Inside Menu
You can also:
- Add Product widget
- Show a Best Seller
- Add promotional banner with CTA button
This makes your mega menu more engaging.
Part 2: Add WooCommerce Categories Using Gutenberg
If you prefer Gutenberg (Block Editor), follow this method:
Step 1: Enable Mega Menu
Go to Appearance → Menus
Enable Mega Menu for your Shop menu item.
Step 2: Edit Mega Menu Layout
Click “Edit Mega Menu”
Choose Block Editor
Now you can:
- Add Columns block
- Insert WooCommerce Product Categories block
- Adjust layout visually
Step 3: Customize Category Display
Inside Gutenberg, you can:
- Show category images
- Control number of columns
- Adjust alignment
- Add headings above categories
You can even insert:
- Buttons
- Promotional images
- Text blocks
All without writing CSS.
Bonus Tips for Better Conversion
✔ Keep 3–4 columns maximum
✔ Highlight best-selling categories
✔ Add a “View All Products” button
✔ Use icons or images for better visibility
✔ Make sure it’s mobile responsive
Make It Mobile Friendly
RT Mega Menu automatically ensures responsiveness, but you should:
- Test on mobile
- Avoid too many columns
- Keep text readable
- Avoid too many nested levels
Final Thoughts
Adding WooCommerce categories to your mega menu makes your store easier to navigate and more conversion-friendly.
With RT Mega Menu, you can design powerful WooCommerce mega menus using either:
- Elementor
- Gutenberg
- Or both
No coding required.
If you’re running an online store, this is one of the easiest ways to improve user experience and increase sales.
