How to Add Product Images to Your Mega Menu in Elementor

If you’re on your Elementor site with WooCommerce active, then you just have to install ElementsKit to add product images to the visual mega menu. This guide covers the exact configuration process for adding product images to a visual mega menu in Elementor using ElementsKit. It’ll also include the failure points that don’t appear in the official docs, the performance traps that bite you weeks after launch, and the edge cases that require you to deviate from the standard workflow.

Check If the Guide is Made for You

What you’ll need

• WordPress 6.0+
• Elementor Lite 3.5+
• Elements Kit Pro installed and activated
• At least one product with proper category added in WooCommerce

Getting Started with Setup

Now, let’s go through the main steps.

Step 1: Switch on Header Footer Builder and Mega Menu

Log in to your WordPress Admin dashboard and follow these steps:

• Vá para ElementsKit
• Click on Modules
• Turn ON Header Footer Builder and Mega Menu
• Salvar alterações

Watch the video to learn making a stunning mega menu quickly.

Here are the quick steps.

Step 2: Configure Your Menu in WordPress

Go to Appearance → Menus and set up your base menu. ElementsKit’s mega menu builds on this hierarchy, so get the structure right before moving to Elementor.

Example: We’re customizing a mega menu for a Home Decor ecommerce site with product images. We’ve published pages like Home, Buy All, Home Decor, Sales & Promotions, and My Account, and arranged the menu.

Step 3: Turn on the Mega Menu for your menu

Activate ElementsKit’s mega menu feature.

• Check the box for Enable this menu for Megamenu content.
• Hover over the menu item you want to convert. For instance, “Buy All” and expand its settings.

1. Toggle the Mega Menu switch to turn it on
2. Save your change
3. Click Edit Mega Menu Content to open it in Elementor

Next to the Content tab, you’ll see the Icon and Badge options. From the Badge tab, you can add eye-catching labels like “New,” “Popular,” or “Sale” to any navigation item. With just a small badge or icon, you can add extra visibility to selected products and make them easier for visitors to notice.

However, there are also several settings options. We recommend setting the width to Largura completa if you want the dropdown to span the entire header, or enter a custom pixel value — 850px works well for a 3-column product image layout.
After configuring all the options, hit Save to keep your settings.

Step 4: Methods of Adding Product Images

You can add product images to your mega menu in two ways: building from scratch or starting from a template.

Method 1: Add Product Images From Scratch

Enable ElementsKit Image Box Widget: Find and turn ON ElementsKit Image Box ferramenta.

Next, search for Use ElementsKit Image Box widget and drag and drop to the editor.

In the content tab, you can customize the following settings.

Imagem

• The Image section lets you change the image, adjust its size, set the content area, toggle equal height for all boxes, and enable or disable the URL link.

For the best result, we recommend using category photos at least 400×300px at a 4:3 ratio. Anything smaller looks soft on high-DPI displays.
Set Image Size inside the widget to “Medium Large” (768px wide by default in WordPress). Don’t use “Full” size. A 2000px image inside a dropdown increases page weight. It can hurt your Lighthouse performance score. This is especially important on category and archive pages, where most organic traffic lands.

Corpo

• The Body section lets you edit the title text, change the title’s HTML tag, and set how the title is aligned.

Botão

• The Button section lets you turn the button on or off, edit its label text, set its URL, and add or remove an icon along with its position.

Style ElementsKit image box widget

• Imagem: You can set custom border radius and padding, and adjust the image opacity for normal or hover states.
• Corpo: It lets you set the border type and radius, customize the background image, type, and color, add custom padding and box shadow color, and control title spacing, typography, and color.
• Botão: Here, you can adjust padding and icon font size, change the text and background color, set separate normal and hover styles, and customize the border type, radius, and box shadow.

Alternatively, you can also pick an ElementsKit Image Box ready section and customize it accordingly.

Seguir Image Box documentation for detailed customization steps.

Step 5: Create a Header and Preview

Now move on to creating and previewing your header.

• Navigate to ElementsKit Header Footer from your dashboard.
• Build a new header, or open an existing one to edit it with Elementor.

For step-by-step guidance on building a header, refer to this documentation on the Construtor de cabeçalho e rodapé.

Let’s get back to the steps.
After opening the header in Elementor, find the ElementsKit Nav Menu widget, and drag it onto your layout.

From the dropdown, select Mega Menu.

Finally, view your mega menu. Check if you’ve successfully added product images to your mega menu.

Method 2: Start with a Ready-Made Template

In the Elementor editor, choose an ElementsKit template and edit it to add your product images.

Now, just follow Step 5, publish/save and preview the header.
Here you go, a customized ElementsKit mega menu template with specific product images of a business.

Not Recommended for These Scenarios

• Avoid this on websites with large navigation systems (50+ menu items) or big WooCommerce catalogs. Image-heavy mega menus increase DOM size, slow navigation, and can hurt page speed when too many product images load inside dropdowns. This also impacts Core Web Vitals, especially Time to Interactive on slower networks.
• Avoid using this if your site relies on full-page caching without proper fragment support. Cached headers may prevent product images from updating in real time. It becomes especially problematic during sales campaigns or seasonal promotions.
• Don’t use this if your header is managed by a theme customizer instead of Elementor. In such cases, integrating ElementsKit mega menus can be less stable and more complex. Rebuilding the header in Elementor Theme Builder is the cleaner and safer approach.

Common Mistakes in This Setup

Mistake 1: Leaving image size on “Auto.” WordPress serves the original uploaded image regardless of display dimensions. In a 3-column mega menu, each image slot is roughly 250px wide. Serving a 1500px JPEG for that slot adds 80–150KB per image per dropdown interaction. If you multiply that across three or four images, and you’re loading 300–500KB of unnecessary data on every hover. So, always set Image Size explicitly to “Medium”(300×300) or “Medium Large ” or register a custom image size matched to your exact display dimensions. This single change has a more measurable performance impact than most “optimization” plugins do.

Mistake 2: Forgetting mobile display rules. The mega menu with product images will be displayed by default in the full desktop layout on mobile. It means that your product image grid stacks vertically into a scroll nightmare.
Basta ir ao Advanced tab, expand Responsive, and set all image columns to Hidden on Tablet and Mobile.

After that, take a separate text-only accordion structure where you’ll write the texts of those product images. Show for small screens and hide it for desktop.

Google’s Mobile-Friendly Test will flag layout issues here. So this isn’t an optional polish step.

Mistake 3: Not verifying display conditions after cloning a header template. Duplicated headers often keep old page-specific rules from the source site. Thus, your entire website might not show the customized mega menu. It’s good to set the condition to the Entire Site, or at least include shop, product, and category pages. If it only appears on the homepage, most users will never see it while browsing. And keep testing different pages regularly.

Exceptions to Keep in Mind

• Multisite networks: Mega Menu is licensed per site. Templates don’t sync across subsites, so you have to set up each subsite separately.
• Product categories with no images: If you want to link the mega menu’s product images with specific Woo products, ensure you’ve added an image to every category under WooCommerce → Categories.
• Different menus per user role: ElementsKit can’t show different mega menus by role on its own. Combine User Role Editor with ElementsKit’s Conteúdo Condicional to show different header templates per role.
• Sticky header hides the mega menu on scroll: Low z-index causes the dropdown to appear behind page content. Fix: Set the sticky header’s z-index to 9999+ in ElementsKit’s sticky settings. It won’t show in previews; you can see it while scrolling.

When to Escalate to a Developer

1. The mega menu template saves but doesn’t render on the frontend: Theme’s cabeçalho.php is overriding it. Needs a dev, no workaround.
2. Your Lighthouse mobile score drops below 70 after adding the mega menu: mega menu images killing LCP/TBT. Elementor UI can’t fix this, need proper lazy loading + image audit.
3. JS console errors referencing `ekit-megamenu` on scroll or hover: jQuery conflict with WooCommerce, Slider, or WPML. Don’t debug live, get a dev.

Standards and References Worth Knowing

✓ ElementsKit Documentation – Create Mega Menu with ElementsKit

✓ WordPress Menu Item Meta API – Know walker_nav_menu if you ever need custom template logic outside the UI.

✓ WooCommerce Category Image Size – 600x600px recommended, 400x300px is the absolute minimum.
✓ Core Web Vitals – LCP under 2.5s is good, over 4s is a problem. Check Google Search Console after launch if you get organic traffic to category pages.
✓ WCAG 2.1 Keyboard Access – ElementsKit passes basic AA requirements, but manually test Tab and arrow key navigation before shipping. A quick NVDA or VoiceOver check catches what automated tools miss.