Back to contents

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

Get to know how to display WooCommerce Shopping cart in the mega menu using JetMenu plugin. Learn how to use this feature to allow the visitors to view the cart when they hover over the mega menu item.

The default Cart widget showcases the products added to cart, thus allowing a customer to see what items he has chosen when browsing the shop. The cart displays the number of products and the total price as well as a separate price. So, let’s explore the process of adding WooCommerce Cart into a mega menu built with Elementor using JetMenu plugin.

Adding WooCommerce Cart

Step 1 — Open the WordPress Dashboard, proceed to the Appearance block and click the Menus option.

Menus option in WordPress Dashboard

Step 2 — Select a menu from the Select a menu to edit dropdown and click the Select button.

Main Menu selection option

In case you don’t have a menu yet, feel free to use this guide to create a new menu.

Step 3 — Hover over the item to which you want to add a mega menu with a WooCommerce Cart and click the JetMenu label on the right of the title to proceed.

JetMenu label on the right of the title

Step 4 — Click the Edit Mega Menu Item Content button to get redirected to Elementor editor.

Content button to get redirected to Elementor editor

Step 5 — Find the Cart widget and drag and drop it to the page’s canvas.

Cart widget in Elementor sidebar

Step 6 — You are able to customize the cart in the Content and Advanced sections.

Pay attention! In order to view how the products would look in the cart, you’d have to add to cart at least one product.

That’s pretty much it! Save the changes and proceed to frontend to check how the mega menu item looks!