Back to contents

How to add WooCommerce products into mega menu built with Elementor using JetMenu plugin

Learn how to add WooCommerce products to your mega menu just in few clicks. JetMenu plugin provides a simple way to add the content to the items.

In case you’re looking for a way for your menu to become something more than just the place where you display the links to your website’s pages, it’s time to think about adding a mega menu.

Its main difference from the simple dropdown menu is that when you hover over one of its main items you can see a block with any content you want to add there.

If you’ve got WooCommerce website, it’s quite possible to add WooCommerce products or product categories to such a mega menu block with help of JetMenu plugin for Elementor. Let’s find out how to do it.

Adding WooCommerce Products to Mega Menu Item built with JetMenu

Step 1 — Make sure you have Elementor page builder and JetMenu plugin installed and active on your site. Navigate to the Appearance > Menus tab in your WordPress Dashboard.

Step 2 — Hover over the item of your main menu to which you want to add a mega menu with WooCommerce products and click the JetMenu label to open its options.

Menus tab in your WordPress Dashboard

Step 3 — Toggle the Mega Submenu Enable Option to Yes and click the Edit Mega Menu Item Content button to proceed to Elementor editor.

Content tab

Step 4 — Drag and drop the default Text Editor widget and enter the corresponding shortcode for displaying the products. Usually, it is [products]. To learn more about the shortcodes feel free to read this tutorial.

Text Editor widget

Step 5 — Click the Update button and exit Elementor by clicking the arrow on the top left.

Step 6 — Click the Save button, close the popup window and click the Save Menu button once again.

Visit your site to see the WooCommerce products included in one of the items of your Mega Menu!

Mega Menu widget

Good job! Enjoy the renewed Mega Menu that now can help you promote products and boost your sales!