Menu Cart Element

The Men Cart Element will add the WooCommerce cart icon in your menu to showcase your products to your clients. From here you can customize and design it to match your style. 


Content Tab 

Menu Cart

  1. Style - Choose the style of the menu cart to show on the sidebar or hover when you click on it. 
  2. Icon - Choose the icon to show from the dropdown menu Cart Light, Cart Medium, Cart Colid, Basket Light, Basket Medium, Basket Solid, Barg Light, Bag Medium, or Bag Solid 
  3. Items Indicator - Choose a display to show when users put items in the menu cart. You can select either Bubble or Plain
  4. Hide Empty - Choose to show or hide the item indicator when there are no items in the menu cart 
  5. Alignment - Set the alignment for the menu cart to show either Left, Center, or Right 

Style Tab 

Menu Cart

Choose either Active or Hover state for the menu cart

  1. Icon Color - Set the color for the menu cart icon 
  2. Icon Size - Set the size for the menu cart icon 
Items Indicator
  1. Text Color - Set the text color for items indicator 
  2. Background Color - Set the background color for items indicator
  3. Distance - Set the distance between the items indicator and the menu cart 

Cart 

  1. Divider - Set a divider to show after each item on the cart overlay 
  2. Remove Item Icon - Choose to either show or hide the icon that allows users to remove items from the cart 
Subtotal
  1. Color - Set the color for the subtotal text in the cart overlay 
  2. Typography - Tweak the typography options for the subtotal text in the cart overlay 
Close Button
  1. Color - Set the color for the close button 
  2. Size - Set the size for the close button 
  3. Position - Set the position for the close button, drag the handle to choose the preferred position 

Products 

Product Title
  1. Color - Set the color for the product's title 
  2. Typography - Tweak the typography options for the product's title
Product Price
  1. Color - Set the color for the products price 
  2. Typography - Tweak the typography options for the product's price 
Product Remove
  1. Color - Set the color for the remove item icon that allows users to remove items from the cart 
  2. Size - Set the size  for the remove item icon
  3. Spacing - Set the spacing between the remove item icon and the text 
Divider
  1. Style - Set the style for the subtotal divider to either be Solid, Double, Dotted, Dashed, or Grooved
  2. Color - Set the color for the subtotal divider
  3. Weight - Set the weight for the subtotal divider
  4. Spacing - Set the spacing between the subtotal divider and the subtotal text 

Buttons

  1. Layout - Set the layout for the buttons it can either be Inline or Stacked 
  2. Space Between - Set the space between the cart overlay buttons 
  3. Typography - Tweak the typography options for the button's text 
  4. Border Radius - Set the border radius for the buttons to make the edges rounder 
View Cart
  1. Text Color - Set the color for the show cart button in the cart overlay 
  2. Background Color - Set the background color for the show cart button in the cart overlay 
  3. Border Type - Choose to add a border for the show cart button in the cart overlay to either be Solid, Double, Dotted, Dashed, or Grooved. Set the width and the color for the border 
Checkout
  1. Text Color - Choose a color for the checkout button in the cart overlay
  2. Background Color - Choose a background color for the checkout button in the cart overlay
  3. Border Type - Choose a border type for the checkout button in the cart overlay to either be Solid, Double, Dotted, Dashed, or Grooved. Set the width and the color for the border 

Sidebar

If you choose the Sidebar options in the Content Tab > Menu Cart > Style you will have the options below

  1. Background Color - Set the background color for the sidebar 
  2. Height - Set the height for the sidebar to either be Sit to Screen or Min Height. If you select the Min Height option you can control the height of the sidebar. 

Set the settings for the Advanced Tab that is appropriate for the element. 

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