Do you have an Elementor-powered WooCommerce site and want to display your products on the menu? If yes, this article will show you how.

You can display the WooCommerce products on your website by creating a mega menu. In WordPress, there are a bunch of mega menu plugins you can install. If you use Elementor, the plugin you can install is JetMenu. It is a mega menu plugin designed specifically for Elementor. We have a separate article that covers how to create a mega menu in WordPress using JetMenu. Give it a read to learn more.

How to display WooCommerce products on the WordPress menu using JetMenu

There are three components you need to display WooCommerce products on the WordPress menu with Elementor:

• Theme Builder. You need it to create a custom header template to place your mega menu.
• An Elementor widget to display WooCommerce products.
• JetMenu.

If you want to save money, you can use Elementor Pro as those two components (Theme Builder and WooCommerce widget) are available in Elementor Pro. Alternatively, you can also use Elementor add-ons. Two add-ons you can use are JetWooBuilder and JetThemeCore. These two add-ons — along with JetMenu — are parts of JetPlugins. While you can get them individually, there is also an option to get them as a bundle. Read here to learn more.

In this post, we use JetThemeCore and JetWooBuilder.

Step 1: Create the custom header template

Before getting started, make sure you have installed and activated all of the required components, including JetMenu. As we have just mentioned, we will use JetThemeCore to create the custom header template. If you use Elementor Pro, you can refer to this article to create a custom header template using Elemnetor Pro. You can use the Mega Menu widget for the menu element.

Creating a custom header with JetThemeCore

On your WordPress dashboard, go to Templates -> Saved Templates. Open the Header tab and click the Add New button to create a new template. Or, if you want to edit an existing template instead, you can simply hover your mouse the template and click the Edit with Elementor link.

Add the Mega Menu widget (of Vertical Mega Menu if you want to create a vertical mega menu) by dragging it from the left panel to the header section on the canvas area.

Once the Mega Menu widget is added, go to the left panel to select a menu you want to use. You can select one from the General block under the Content tab. You can use a different menu for desktop and mobile devices.

You can go to the Style tab to style up your menu. You can read this article for a more comprehensive guide on how to style up the menu you created with JetMenu. Once you are done editing and styling up your menu, click the green PUBLISH/UPDATE button on the bottom side on the left panel.

Step 2: Editing the content of the mega menu item

Here is the main step in this article. When editing the content of your mega menu, you can add any element you want using the Elementor widgets. Including WooCommerce products.

On your WordPress dashboard, go to Appearance -> Menus. On the Add menu items panel (the left one), enable the Enable JetMenu for current location option.

Next, select a menu item you want to add the WooCommerce products to on the Menu Structure panel (the right one) and click the JetMenu button.

Enable the Mega submenu enabled option and click the Edit Mega Menu Item Content button. Clicking this button will open the Elementor editor where you can add and edit the mega menu content.

Add the widget to display the WooCommerce products. If you use JetWooBuilder, you can use the WooCommerce Product widget. If you Elementor Pro, you can use the Products widget.

Go to the left panel to filter the products. If you use JetWooBuilder, you can filter the products by entering the product ID of each product. If you use Elementor Pro, you can filter the product from the Query block under the Content tab.

In addition to WooCommerce products, you can also add other elements to your mega menu. You can also style up the mega menu (such as changing the container background, etc) just like when you are creating a page/template with Elementor. Once you are done editing the mega menu content, click the green UPDATE button, followed by the X icon on the top-right corner to exit the Elementor editor.

Click the Save button to save the changes.

If you want to, you can also add an icon and badge element to the menu item. Simply click the associated tab (on the left panel) to add one.

You can repeat all steps above to add WooCommerce products on other menu items.

That’s it. You have successfully display your WooCommerce products to your site menu using JetMenu. You can see the live demo of the same implementation on the official page of JetMenu.