Menu Cart widget

The Menu Cart widget enables you to place a WooCommerce cart icon in your menu or anywhere on your page. 

Content

Menu Icon

1. Icon: Select the icon to show, choosing from Cart, Basket, or Bag, in Light, Medium or Solid designs.
2. Items Indicator: Select the type of indicator to use for number of items in the cart, choosing from None, Bubble, or Plain
3. Hide Empty: Slide to YES to hide items indicator if cart is empty
4. Subtotal: Show or Hide the cart’s current subtotal
5. Alignment: Align the menu cart to the left, right, or center

Cart

 Main Options

1. Cart Type: Select the type of cart to display choosing between Side Cart or Mini Cart
2. Open Cart: Select the desired option choosing between On Click or On Hover
3. Cart Position: Click the Left or Right position icon to set the position of the cart in the container.

Close Cart

1. Close Icon: Toggle the Show / Hide option on the panel
2. Icon Position: Click the Left and Right position icon to set the position of the close icon in the container.

Remove Item

1. Remove Icon: Toggle the Show / Hide option on the panel
2. Icon Position: Click the Top, Center or Bottom position icon to set the position of the remove icon in the container.

Price & Quantity

1. 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

1. View Cart: Toggle the Show / Hide option on the panel to set the desired state
2. Checkout: Toggle the Show / Hide option on the panel to set the desired state
3. Vertical Position: Click the Top or Bottom position icon to set the position of the buttons in the container.

Additional Options

Cart Additional Options

1. Automatically Open Cart: Toggle the Show / Hide option on the panel to Open the cart every time an item is added.
2. 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

1. Icon Color: Choose the color of the cart icon
2. Background Color: Choose the background color of the widget container
3. Border Color: Choose the border color of the widget container
4. Box Shadow: Click the icon to set additional box shadow options
5. Border Width: Control the thickness of the border around the widget container
6. Border Radius: Set the border radius to control corner roundness

Icon

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

Items Indicator

1. Text Color: Choose the color of the number of items in the items indicator
2. Background Color: Choose the background color of items indicator
3. 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

1. Background Color: Use the color picker to set the background of the cart
2. Border Type: Select a border type or leave set to none
3. Border Radius: Use the values to set the radius of borders if selected
4. Box Shadow: Click the icon to display the box shadow options
5. Padding: Change the values to set the desired padding of the container

Close Cart

1. Icon Size: Use the slider or manually set the values of the icon size in % or PX
2. Color: Use the color picker to set the value of the close icon

Remove Item

3. Icon Size: Use the slider or manually set the values of the icon size in % or PX
4. 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

1. Color: Choose the color of the subtotal text in the cart overlay
2. Typography: Change the typography options for the subtotal text in the cart overlay
3. Alignment: Click the icons to choose between Left, Center, or Right alignment
4. Divider Style: Select the divider type between Solid, Dotted, Dashed, Grooved or leave set to None
5. Width: Set the width of the divider in the vales
6. Color: Use the color picker to select the color of the divider

Products

Product Title

1. Color: Choose the color of the product title in the cart overlay
2. Typography: Change the typography options for the product title in the cart overlay

Product Price

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

Quantity

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

Divider

1. 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
2. Color: Choose the color of the subtotal divider in the cart overlay
3. Weight: Set the thickness of the subtotal divider
4. 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

1. Layout: Choose the layout of the buttons in the cart overlay, either Inline or Stacked.
2. Space Between: Set the amount of space between the cart overlay buttons

View Cart

1. Text Color: Choose the color of the Show Cart button text in the cart overlay
2. Background Color: Choose the background color of the Show Cart button in the cart overlay
3. Border Color: Choose the border color of the Show Cart button in the cart overlay
4. Border Width: Control the thickness of the border around the Show Cart button in the cart overlay

Checkout

1. Text Color: Choose the color of the Checkout button text in the cart overlay
2. Background Color: Choose the background color of the Checkout button in the cart overlay
3. Border Color: Choose the border color of the Checkout button in the cart overlay
4. Border Width: Control the thickness of the border around the Checkout button text in the cart overlay
5. Typography: Change the typography options for both buttons in the cart overlay
6. Border Radius: Set the border radius for both buttons in the cart overlay

Messages

1. Typography: Change the typography options for the messages in the cart
2. Empty Cart Message Color: Use the color picker to set the color of the message
3. Alignment: 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.

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 Elementor’s Mini Cart template.