Best approach for building an advanced Mega Menu in WoodMart + Elementor

Hello WoodMart Team,

First of all, thank you for creating such a great theme.
We are currently building a pharmacy eCommerce website using:

WoodMart (latest version)
WooCommerce
Elementor Pro (v4 with Atomic Elements)

Before we start building our main mega menu, we would like to confirm the best architecture and the capabilities supported by WoodMart.
Our planned mega menu consists of:
Left sidebar with product categories
Center area with category cards (images + links)
Right promotional banner
Best sellers section
Footer CTA (“View all products”)
Our main questions are:

1. Dynamic Mega Menu
Is it possible to create a single Mega Menu where hovering over a category in the left sidebar dynamically changes:

the center category cards
the promotional banner
the best seller products

without opening another dropdown?

If yes, what is the recommended way to achieve this using only WoodMart?

2. HTML Blocks + Elementor

We plan to build the Mega Menu using an HTML Block designed with Elementor.

Is this the recommended approach for large custom Mega Menus?

Or do you recommend using native WoodMart widgets instead?

3. WooCommerce Categories

Can the left sidebar be automatically generated from WooCommerce Product Categories?

If yes:

can it support unlimited category depth?
can child categories be displayed dynamically?
4. Dynamic Products

Can the “Best Sellers” section inside the Mega Menu display WooCommerce products dynamically?

For example:

Best Sellers from the currently selected category
Featured Products
Recently Added Products

without custom coding?

5. Dynamic Banner

Can the banner displayed inside the Mega Menu change automatically depending on the selected category?

For example:

Face Care → Face banner
Hair Care → Hair banner
Sun Care → Summer banner

using built-in WoodMart functionality?

6. Performance

For a large WooCommerce store with hundreds of categories and thousands of products, which approach do you recommend?

A) One large HTML Block

B) Multiple HTML Blocks

C) Native WoodMart Mega Menu

D) Another recommended architecture

Which option provides the best balance between:

performance
maintainability
future scalability

7. Elementor Atomic Elements

We are building the entire website using Elementor v4 Atomic Elements.

Is there anything we should avoid inside HTML Blocks to maintain compatibility with future WoodMart updates?

8. Best Practices

If you were building a premium pharmacy eCommerce website with WoodMart today, what architecture would you personally recommend for the Mega Menu?

9. Reusable Components

We plan to reuse the same cards, banners and layouts from the Mega Menu across other pages of the website (home page, category pages, landing pages).

Would you recommend building these sections as reusable Elementor Templates / HTML Blocks, or is there a better WoodMart approach for long-term maintenance?

We would really appreciate your recommendations before we start development.

In your answer please mention, for the attention of Stelios.

Thank you very much for your support!

Best regards,
Stelios Lioudakis

Attachments:

You must be logged in to view attached files.

Hello,

Thank you for your detailed questions.

WoodMart supports creating Mega Menus using HTML Blocks, and this is the recommended approach for building custom mega menus.

Regarding your questions:

1. The behavior you described (changing the center content, banner, and products dynamically on category hover within the same dropdown) is not available as a built-in WoodMart feature. It would require custom development.

2. Yes, using HTML Blocks is the recommended approach for creating large custom Mega Menus.

3. You can display WooCommerce product categories in the menu. You need to create a menu from Appearance > menu and choose the menu which you want.

4. WooCommerce products (such as Best Sellers, Featured Products, or Recent Products) can be displayed dynamically inside an HTML Block using the Product grid or carousel widget in the HTML Block.

5. Dynamically changing the banner based on the currently hovered category is not supported by the theme and would require custom development.

6. For large stores, we recommend using multiple HTML Blocks instead of one very large block. This provides better maintainability and makes future updates easier.

7. Elementor Atomic Elements are generally compatible with WoodMart.

8–9. Our recommendation is to build reusable sections (such as banners and promotional content) using HTML Blocks, which can then be reused throughout your website for easier long-term maintenance.

We hope this clarifies the available functionality. If you have any further questions, please let us know.

Best Regards

[Author]

Posts