10Web Help Center

Hi, how can we help?

Menu Cart Widget

Copy article URL

in this article

The Menu Cart widget enables you to place a WooCommerce cart icon in your menu or anywhere on your page. This feature provides a quick and intuitive shortcut for shoppers to access their cart, usually added to the headers of eCommerce websites for instant visibility and accessibility.

Adding Menu Cart widget

  1. Find the Menu Cart widget in the widget menu.
  2. Drag it to the page canvas.
  3. Configure the settings from the tabs below

Content tab

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 the number of items in the cart, choosing from None, Bubble, or Plain.
  • Hide Empty: Slide to YES to hide items indicator if the cart is empty.
  • Subtotal: Show or Hide the cart’s current subtotal.
  • Alignment: Align the menu cart to the left, right, or center.

Cart

  • Cart Type: Select the type of cart to display, choosing between Side Cart or Mini Cart.
  • Open Cart: Select the desired option, choosing between On Click or On Hover.
  • Cart 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 panel.
  • Icon Position: Click the Left and Right position icon to set the position of the close icon in the container.

Remove Item

  • Remove Item Icon: Toggle the Show / Hide option on the panel.
  • Icon 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. 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 state.
  • Checkout: Toggle the Show / Hide option on the panel to set the desired state.
  • Vertical Position: Click the Top or Bottom position icon to set the position of the buttons in the container.

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 tab

Menu Icon

Main Normal | Hover Options

  • Text Color: Choose the color of the text.
  • Icon Color: Choose the color of the cart icon.
  • Background Color: Choose the background color of the widget container.
  • Border Color: Choose the border color of the widget container.
  • Box Shadow: Click the icon to set additional box shadow options.
  • Border Width: Control the thickness of the border around the widget container.
  • Border Radius: Set the border radius to control corner roundness.
  • Typography: Set the typography settings of the text.

Icon

  • Size: Adjust the size of the cart icon.
  • Spacing: Adjust the amount of space between the cart icon and the subtotal text.
  • Padding: Change the padding settings of the widget container.

Items Indicator

  • Text Color: Choose the color of the number of items in the items indicator.
  • Background Color: Choose the background color of the items indicator.
  • Distance: 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 cart.
  • Border Type: Select a border type or leave set to none.
  • Border Radius: Use the values to set the radius of borders if selected.
  • Box Shadow: Click the icon to display the box shadow options.
  • Padding: 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 PX.
  • Color: 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 PX.
  • Color: 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 overlay.
  • Typography: Change the typography options for the subtotal text in the cart overlay.
  • Alignment: Click the icons to choose between Left, Center, or Right alignment.
  • Divider Style: Select the divider type between Solid, Dotted, Dashed, Grooved, or leave set to None.
  • Width: Set the width of the divider in the values.
  • Color: 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 overlay.
  • Typography: Change the typography options for the product title in the cart overlay.

Product Variations

  • Color: Choose the color of the product variations in the cart overlay.
  • Typography: Change the typography options for the product variations in the cart overlay.

Product Price

  • Color: Choose the color of the product price in the cart overlay.
  • Typography: Change the typography options for the product price in the cart overlay.

Quantity

  • Color: Choose the color of the product price in the cart overlay.
  • Typography: 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 grooved.
  • Color: Choose the color of the subtotal divider in the cart overlay.
  • Weight: Set the thickness of the subtotal divider.
  • Spacing: 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

  • 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.
  • Typography: Change the typography options for buttons in the cart overlay.
  • Border Radius: Set the border radius for buttons in the cart overlay.

View Cart

  • Text Color: Choose the color of the Show Cart button text in the cart overlay.
  • Background Color: Choose the background color of the Show Cart button in the cart overlay.
  • Border Color: Choose the border color of the Show Cart button in the cart overlay.
  • Border Width: Control the thickness of the border around the Show Cart button in the cart overlay.
  • Box Shadow: Choose the shadow effect for the View Cart button in the cart overlay.
  • Padding: Control the spacing inside the View Cart button in the cart overlay.

Checkout

  • Typography: Change the typography options for both buttons in the cart overlay.
  • Text Color: Choose the color of the Checkout button text in the cart overlay.
  • Background Color: Choose the background color of the Checkout button in the cart overlay.
  • Border Color: Choose the border color of the Checkout button in the cart overlay.
  • Border Width: Control the thickness of the border around the Checkout button text in the cart overlay.
  • Border Radius: Set the border radius for both buttons in the cart overlay.
  • Box Shadow: Choose the shadow effect for the checkout box.

Messages

  • Typography: Change the typography options for the messages in the cart.
  • Empty Cart Message Color: Use the color picker to set the color of the message.
  • Alignment: Use the icons to choose Left, Center, Right, or Justified alignment.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.

Default WooCommerce Mini Cart Configuration

To avoid conflicts with WooCommerce plugins or themes that may utilize their own Mini Cart templates, you may need to enable or disable Elementor’s version of the Mini Cart template:

  1. Go to Elementor > Settings > Integrations > WooCommerce.
  2. Choose 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.
  3. Choose Disable to opt out of using 10Web Builder’s Mini Cart template.

in this article