Menu Cart Widget (Pro)

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

Style

Menu Icon

Normal | Hover
  1. Text Color: Choose the color of the subtotal text
  2. Icon Color: Choose the color of the cart icon
  3. Background Color: Choose the background color of the widget container
  4. Border Color: Choose the border color of the widget container
  5. Border Width: Control the thickness of the border around the widget container
  6. Border Radius: Set the border radius to control corner roundness
  7. Typography: Change the typography options for the subtotal text
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

  1. Divider: Show or Hide the divider line after each item in the cart overlay
  2. Remove Item Icon: Show or Hide the icon that allows users to remove an item from the cart
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

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

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

Mini Cart

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.