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.
Step 2 — Select a menu from the Select a menu to edit dropdown and click the Select button.
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.
Step 4 — Click the Edit Mega Menu Item Content button to get redirected to Elementor editor.
Step 5 — Find the Cart widget and drag and drop it to the page’s canvas.
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!