Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetMenu: How to Add WooCommerce Products into Mega Menu


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 a WooCommerce website, it’s quite possible to add WooCommerce products or product categories to such a mega menu block with help of the JetMenu plugin for Elementor. Let’s find out how to do it.

Navigate to the Appearance > Menus tab in your WordPress Dashboard. 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.

jetmenu button in the menu structure section

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

mega submenu enabled toggle

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.

adding woocommerce products into mega menu using a shortcode

Click the “Update” button and exit Elementor by clicking the arrow on the top left. 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!