BUILD3R.io

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. 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
Was this article helpful?

Still puzzling over something?

The agent has read this article — and everything around it. Ask a follow-up and it answers in seconds.