The Menu Cart widget enables you to place a WooCommerce cart icon in your menu or anywhere on your page.
Content
Menu Icon
Icon: Select the icon to show, choosing from Cart, Basket, or Bag, in Light, Medium or Solid designs.Items Indicator: Select the type of indicator to use for number of items in the cart, choosing from None, Bubble, or PlainHide Empty: Slide to YES to hide items indicator if cart is emptySubtotal: Show or Hide the cart』s current subtotalAlignment: Align the menu cart to the left, right, or center
Cart
Main Options
Cart Type: Select the type of cart to display choosing between Side Cart or Mini CartOpen Cart: Select the desired option choosing between On Click or On HoverCart Position: Click the Left or Right position icon to set the position of the cart in the container.
Close Cart
Close Icon: Toggle the Show / Hide option on the panelIcon Position: Click the Left and Right position icon to set the position of the close icon in the container.
Remove Item
Remove Icon: Toggle the Show / Hide option on the panelIcon Position: Click the Top, Center or Bottom position icon to set the position of the remove icon in the container.
Price & Quantity
Position: Click the Top or Bottom position icon to set the position of the Price and Quantity heading in the container.
Cart Dividers: Toggle the Show / Hide option on the panel to set the desired state.
Note: This is also dependent on the settings in the style tab for dividers.
Buttons
View Cart: Toggle the Show / Hide option on the panel to set the desired stateCheckout: Toggle the Show / Hide option on the panel to set the desired stateVertical Position: Click the Top or Bottom position icon to set the position of the buttons in the container.
Additional Options
Cart Additional Options
Automatically Open Cart: Toggle the Show / Hide option on the panel to Open the cart every time an item is added.Automatically Update Cart: Toggle the Show / Hide option on the panel to show updates to the cart (e.g., a removed item) via Ajax. The cart will update without refreshing the whole page.
Note: In order for the auto open cart feature to function, you must check the enable AJAX in your WooCommerce settings located in WooCommerce > Settings > Products.
Style
Menu Icon
Main Normal | Hover Options
Icon Color: Choose the color of the cart iconBackground Color: Choose the background color of the widget containerBorder Color: Choose the border color of the widget containerBox Shadow: Click the icon to set additional box shadow optionsBorder Width: Control the thickness of the border around the widget containerBorder Radius: Set the border radius to control corner roundness
Icon
Size: Adjust the size of the cart iconSpacing: Adjust the amount of space between the cart icon and the subtotal textPadding: Change the padding settings of the widget container
Items Indicator
Text Color: Choose the color of the number of items in the items indicatorBackground Color: Choose the background color of items indicatorDistance: Set the distance between the icons indicator and the subtotal text
Note: When the Menu Cart is clicked, a cart overlay slides open. The following options control the design aspects of the cart overlay.
Cart
Main Style Options
Background Color: Use the color picker to set the background of the cartBorder Type: Select a border type or leave set to noneBorder Radius: Use the values to set the radius of borders if selectedBox Shadow: Click the icon to display the box shadow optionsPadding: Change the values to set the desired padding of the container
Close Cart
Icon Size: Use the slider or manually set the values of the icon size in % or PXColor: Use the color picker to set the value of the close icon
Remove Item
Icon Size: Use the slider or manually set the values of the icon size in % or PXColor: Use the color picker to set the value of the Remove Item icon
Note: The above options may be set for the Normal and Hover States if desired.
Subtotal
Color: Choose the color of the subtotal text in the cart overlayTypography: Change the typography options for the subtotal text in the cart overlayAlignment: Click the icons to choose between Left, Center, or Right alignmentDivider Style: Select the divider type between Solid, Dotted, Dashed, Grooved or leave set to NoneWidth: Set the width of the divider in the valesColor: Use the color picker to select the color of the divider
Products
Product Title
Color: Choose the color of the product title in the cart overlayTypography: Change the typography options for the product title in the cart overlay
Product Price
Color: Choose the color of the product price in the cart overlayTypography: Change the typography options for the product price in the cart overlay
Quantity
Color: Choose the color of the product price in the cart overlayTypography: Change the typography options for the product price in the cart overlay
Divider
Style: Select the style of the divider above and below the subtotal in the cart overlay, choosing from none, solid, double, dotted, dashed, or groovedColor: Choose the color of the subtotal divider in the cart overlayWeight: Set the thickness of the subtotal dividerSpacing: Set the spacing between subtotal dividers and the subtotal text
Note: These settings may be affected by the divider toggle in the controls.
Buttons
Layout: Choose the layout of the buttons in the cart overlay, either Inline or Stacked.Space Between: Set the amount of space between the cart overlay buttons
View Cart
Text Color: Choose the color of the Show Cart button text in the cart overlayBackground Color: Choose the background color of the Show Cart button in the cart overlayBorder Color: Choose the border color of the Show Cart button in the cart overlayBorder Width: Control the thickness of the border around the Show Cart button in the cart overlay
Checkout
Text Color: Choose the color of the Checkout button text in the cart overlayBackground Color: Choose the background color of the Checkout button in the cart overlayBorder Color: Choose the border color of the Checkout button in the cart overlayBorder Width: Control the thickness of the border around the Checkout button text in the cart overlayTypography: Change the typography options for both buttons in the cart overlayBorder Radius: Set the border radius for both buttons in the cart overlay
Messages
Typography: Change the typography options for the messages in the cartEmpty Cart Message Color: Use the color picker to set the color of the messageAlignment: Use the icons to choose Left, Center, Right or Justified alignment.
Other Information
Default WooCommerce Mini Cart Configuration
To avoid conflicts with WooCommerce plugins or themes that may utilize their own Mini Cart templates, Elementor gives you the option to enable or disable Elementor』s version of the Mini Cart template. If WooCommerce is activated, follow these steps to enable or disable Elementor』s Mini Cart template.
Go to Elementor > Settings > Integrations > WooCommerceChoose Enable for this option in order to replace the default WooCommerce mini cart template or your theme』s mini cart template with Elementor』s template. Unless manually set to Disable, this setting is automatically enabled once the Menu Cart widget is used anywhere on your site.Choose Disable to opt out of using Elementor』s Mini Cart template.