How to Build a WooCommerce Mega Menu with Product Categories Using ElementsKit (Without Breaking Your Store)

A polished mega menu keeps content well-sorted and helps site visitors navigate smoothly. A WooCommerce site is no exception. If you group product categories, subcategories, and featured items in the WooCommerce mega menu, it’ll boost product discoverability.
This guide covers the complete process of adding product categories to your WordPress WooCommerce website.
Learn the easy steps below.

Before You Start…

Check if this guide is suitable for you.

This setup will work for you if:

• You’re a store owner or developer who already has WooCommerce running on Elementor.
• Your store has multiple product categories, and you need to redesign the navigation to help shoppers find products easily.

However, you don’t need developer experience, but it’s necessary to know the Elementor editor. If terms like widget, section, and container aren’t familiar yet, you need to spend a couple of hours with Elementor to know these.

This setup won’t work for you if:

• You’re using Elementor only with ElementsKit Lite. The Mega Menu module is locked behind ElementsKit Pro.
• You’re running a headless WooCommerce (React/Next.js frontend)
• The theme uses a custom nav walker overriding wp_nav_menu()
• The builder is Divi or Beaver instead of Elementor

Basic Requirements

Jumping straight into the menu builder without verifying your stack is the fastest way to waste an hour debugging something that was never going to work. Take five minutes here.

Your site needs:

• WordPress 6.0 or higher
• Elementor (Free is enough), version 3.5+
• ElementsKit Pro, version 2.9.0 at minimum
• A theme that supports Elementor header templates. For example, Hello Elementor, Astra 3.x+, OceanWP, GeneratePress with Elementor integration, or Blocksy all work reliably

Build a WooCommerce Mega Menu with Product Categories Using ElementsKit

We’ve divided the process into a few simple steps.

Step 1: Activate Header Footer Builder & Mega Menu Modules

Now you can access your WordPress dashboard.

1. Open ElementsKit from the sidebar
2. Go to Modules
3. Toggle ON both Header Footer Builder and Mega Menu
4. Hit Save

Step 2: Prepare Your WordPress Menu

• Find Menus from Appearance in the WordPress dashboard.
• Create your primary navigation menu and arrange the menu hierarchy properly

For this guide, we’ve created a WooCommerce website menu with pages like Home, About Us, Archive Page, Shop, and My Account.

Step 3: Enable the Mega Menu Content

Not every nav item needs a mega menu panel, so pick the category-heavy ones. Follow the steps:

• Find ElementsKit Megamenu, tick Enable this menu for Megamenu content
• Hover over the top-level item you want to expand, like “Shop” click Mega Menu

1. Toggle the Mega Menu switch ON
2. Click Save
3. Click Edit Megamenu Content. It drops you into the Elementor editor for that specific nav item.

One thing worth knowing: You can also add a small badge label like “New,” “Hot,” “Sale,” etc., directly on the nav item from the Badge tab. Also, customize Icons and adjust other Settings from the respective tabs. panel. These are small touches, but it pulls clicks to the categories you want to promote.

Step 4: Design the Mega Menu Content Panel

Now, you’ll land straight in the Elementor editor.

However, for this tutorial we’ll be using the ElementsKit Woo Category List widget to display product categories inside the mega menu. So make sure the Woo Category List widget is enabled from ElementsKit > Widgets before moving forward.

Next, find and drag and drop Woo Category List widget.

In the Content tab, you’ll see the following controls.

Filter

• Filter By: Choose how to show categories, such as All, Manual Selection, By Parent

• Order By: Sort categories by Name, Slug, Description, or Count.

• Order Format: Set the order to Ascending or Descending.

• Remove Uncategorized Category: Hides the default “Uncategorized” category from the list.
• Hide Empty Category: Removes any category that has no products in.

Layout

• Label Position: Place the label Inside Thumb or Outside Thumb.

• Enable Featured Category: Turn on a featured category, pick an image, and set the column count.

• Item Gap: Adjust the spacing between category items
• Title and Count: Show or hide the category title, enable product count

To style the widget according to your preferences, go to Style tab.

Here you can style your product categories’ Item, Image, Label, and Featured Category.

• Item — Control background color, padding, border, border radius, and box shadow (Normal / Hover)
• Image — Adjust image size, border, border radius, and box shadow
• Label — Change label text color, background color, typography, padding, border radius, and alignment
• Featured Category — Style the featured card with background color, border, border radius, box shadow, padding, and control title & count color and typography separately (Normal / Hover)

Step 5: Wire It Into Your Header

The mega menu panel exists on its own until you connect it to a header. Here’s how to do that:

• From your dashboard, go to ElementsKit → Header Footer
• Open an existing header in Elementor, or create a new one (see the Header & Footer Builder docs if this is your first time)

Search for Nav Menu in the widget panel and drag it into your header layout.

• In the widget settings, select your mega menu from the dropdown
• Save/Publish and preview

At this point you should be able to see the mega menu panel appearing when you hover over the nav items you enabled it for.

Test It Like a Shopper Would

Before publishing, run through these checks:

🗸 Mobile responsiveness: The mega menu collapses into a stacked accordion automatically. Just set the breakpoint 768px for tablet+, and 767px for mobile in the Nav Menu widget’s Responsive tab. Also, keep the hamburger icon default.
🗸 Incognito window: Admin CSS can mask real rendering issues, so always test there.
🗸 Hover timing: Sweep your cursor across the nav to confirm the 150ms delay is working.
🗸 CLS score: Check Cumulative Layout Shift in PageSpeed Insights. If you keep it under 0.1, it’ll ensure the menu panel isn’t pushing content down on load.

🗸 Schema test: You sould also run the page through Google’s Rich Results Test. It confirms breadcrumb and product schema is still intact after the header template change.

Three Situations Where This Setup Breaks

Harder Problems You’ll Run Into

• CSV/PIM-imported categories won’t auto-appear in Menus. You can add them manually each time or switch to Max Mega Menu for that nav item.
• Sticky header can clip mega menus. Try to fix by setting the mega menu z-index: 9999 and adding position: relative to the sticky header wrapper via custom CSS.
• WPML/Polylang don’t copy mega menu settings. Spend ~45–60 min per language to manually reconfigure each language.

When to Seek a Professional

Preview works but live site breaks: It’s a JS conflict. You need a developer to deactivate plugins systematically and read browser console errors.
Are you using custom product taxonomies? ElementsKit only recognizes WooCommerce’s default product_cat. So you’ll need a developer to add filter hooks to support others.
CLS score above 0.1 after adding mega menu: late-loading CSS causes layout shift. It requires server-level or Critical CSS fix, not a plugin setting.

Key References and Standards

Detailed mega menu creation process: Check this useful documentation ElementsKit Mega Menu.
Keep top-level items to 7 or fewer: WooCommerce and cognitive research (Miller’s Law) both back this; more than that and usability suffers.
WCAG 2.1 compliance: It’s important to test keyboard navigation manually after building. Screen reader support depends on your theme’s HTML, not just ElementsKit. Try this → WCAG 2.1 Success Criteria
SEO tip: Mega menu links must use real href URLs, not # or javascript:void(0), or Googlebot won’t count them as internal links. Check this → Understand the JavaScript SEO basics.