🎯 Purpose
The Menu Cart widget allows you to display a fully functional WooCommerce cart icon anywhere on your site—typically in the header or navigation area. It gives visitors an easy way to view and manage their cart contents directly, improving shopping experience and reducing friction.
đź“Ą Content & Cart Behavior
1. Menu Icon Settings
Icon Style: Choose from various cart icons such as cart, basket, or bag, with options for appearance style (like Light or Solid).
Item Indicator: Show a bubble or plain number to indicate the number of products in the cart. You can choose to hide the indicator when the cart is empty.
Subtotal: Optionally display the current cart subtotal beside the icon.
Alignment: Adjust icon alignment within its container (left, center, or right).
2. Cart Overlay Settings
Cart Type: Select from two styles—Mini Cart (compact dropdown) or Side Cart (sliding panel).
Trigger: Choose whether the cart opens on click or hover.
Position: Decide whether the cart opens from the left or right of the screen.
Cart Content:
Show or hide product images, names, prices, and quantities.
Toggle dividers between items for clearer separation.
Show or hide the remove button for cart items.
Buttons:
Display “View Cart” and “Checkout” buttons.
Choose whether these appear at the top or bottom of the cart overlay.
3. Extra Functionalities
Auto-Open: Enable the cart to open automatically when a product is added.
Live Ajax Cart: Allow real-time cart updates without reloading the page (requires WooCommerce’s Ajax setting enabled).
🎨 Style & Design Customization
1. Menu Icon Styling
Adjust icon color, size, padding, background, and borders.
Style the item count badge with custom colors, size, position, and spacing.
Define spacing between the icon and subtotal.
2. Cart Overlay Styling
Customize overlay background, border, radius, and shadow.
Style the close and remove icons (color, size, position).
Configure subtotal design: font, color, and alignment.
Design each cart item’s appearance: typography, spacing, and dividers.
Fully style the action buttons: background, border, padding, font, and hover effects.
Set the appearance of the empty cart message (text color, size, alignment).
⚙️ Advanced Integration Note
The widget replaces the default WooCommerce mini cart with Elementor’s version. You can manage this integration via Elementor’s settings panel under WooCommerce compatibility options.
âś… Best Practices
Always use the indicator and subtotal together for better user awareness.
Match overlay styles with your site’s branding for visual consistency.
Enable Ajax and auto-open for a smoother shopping experience.
Test cart behavior on mobile to ensure visibility and ease of use.
Maintain consistency between cart styling and other WooCommerce elements.
The Menu Cart widget is essential for WooCommerce sites built with Elementor. It gives you full control over cart display, interaction, and styling—making it easier for customers to engage with their cart and proceed to checkout efficiently.
