Cart Dropdown

In this article, we're going to discuss the Cart Dropdown Element. We're going to discuss how to add it in Cornerstone / Pro Content Builder (applicable also to both Header and Footer Builders) and then we're going to brush through its settings.

  1. Toggle Setup
  2. Toggle Design
  3. Toggle Text Setup
  4. Toggle Graphic Setup
  5. Toggle Particles
  6. Dropdown Setup
  7. Dropdown Design
  8. Cart Setup
  9. Cart Title Setup
  10. Cart Item Setup
  11. Cart Total Setup
  12. Cart Buttons Container Setup
  13. Cart Buttons Setup
  14. Cart Buttons Text Options
  15. Customize
  16. Demo
  17. Summary

The Cart Dropdown element is a way to add the Woocommerce cart into the builders. The element will be available if the Woocommerce plugin is installed.

Cart DropDown View

To add this element, just search Cart Dropdown and drag it to the canvas.

Cart DropDown Add

Toggle Setup

The Cart Toggle is the graphic or text which shows the cart item details when clicked. Depending on the type of the Cart Element it will show a dropdown. Following is the detail of the settings of the cart toggle.

Cart DropDown Toggle Setup
  • Base Font Size - Use this option to set the base font of the toggle.
  • Width & Height - Use these options to set the width and height of the cart toggle.
  • Min Width & Height - Use these options to set the minimum width and height of the cart toggle.
  • Background - Use this option to set the background of the toggle in normal and hover mode.

Toggle Design

The Toggle Design section consists of design related settings for the cart toggle.

Content Flex Layout

You can use the Flex Layout principals to change the position and layout of the toggle elements, such as the icon inside the toggle.

Cart Content Flex Layout
  • Layout - This option defines the direction of the children meaning they can either be positioned side by side or under each other.
    • Row
    • Column
  • Reverse Layout - If you want to reverse the order of the children then make sure to check this option. Basically, imagine this like using a mirror.
  • Wrap Children - By default Flexbox will try to keep the elements on a row or column so wrapping children is a good way if you want to prevent this from happening.
  • Horizontal - Depending on your Layout settings you can define how the children are orientated.
    • Start - Positions the boxes in the beginning.
    • Center - Positions the boxes centered.
    • End - Positions the boxes at the end.
    • Space Between - Adds space between the boxes.
    • Space Around - Adds space around the boxes.
  • Vertical
    • Start - Positions the boxes in the beginning.
    • Center - Positions the boxes centered.
    • End - Positions the boxes at the end.
    • Stretch - Stretched the boxes out evenly.

Margin

Use this option to set the margin of the cart toggle. You can change the settings for all the sides of the toggle or modify them individually.

Cart Toggle Margin

Padding

Use this option to set the padding of the cart toggle. You can change the settings for all the sides of the toggle or modify them individually.

Cart Toggle Padding

Border

Use this option to set the border of the cart toggle. You can set the style, width and color of the border on all sides or each side individually.

Cart Toggle Border

Border Radius

Use this option to set a border radius for the cart toggle. You can set the curve on all sides or set them individually.

Cart Toggle Border Radius

Box Shadow

You can set a shadow over the cart toggle using the box-shadow control group.

Cart Toggle Box Shadow
  • X-Offset - Use this option to set the X offset of the shadow in the cart toggle.
  • Y-Offset - Use this option to set the Y offset of the shadow in the cart toggle.
  • Blur - Use this option to set the intensity of the blur effect in the cart toggle.
  • Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the cart toggle.
  • Color - Use this option to set the color of the cart toggle shadow.

Toggle Text Setup

You can have text next to the icon inside the toggle by enabling the Text Setup option.

Cart Toggle Text Setup
  • Enable - Use this option to enable or disable the text section of the cart toggle.
  • Primary Text - Use this option to add the primary text of the toggle which shows with a larger font.
  • Secondary Text - Use this option to add the secondary text of the toggle which shows with a smaller font.
  • Spacing & Order - Use this option to set the spacing between the primary and secondary text. In the standard mode, primary text is above the secondary text, but if you check the Reverse checkbox the order will be reversed, and secondary text will sit above the primary text.
  • Interaction - Use this option to set an animation while hovering over the toggle. The animation options are:
  • None
  • Slide Top
  • Slide Left
  • Slide Right
  • Slide Bottom
  • Scale Up
  • Scale Down
  • Flip X
  • Flip Y
  • Overflow - Check the Hidden checkbox if you want to hide the text if it goes beyond the limits of the toggle area.

Text Margin

Use this option to set the margin of the cart toggle text area. You can change the settings for all the sides of the toggle or modify them individually.

Cart Toggle Margin

Primary Text Format

You can use this control group to set the format of the primary text in the cart toggle.

Cart Toggle Primary Text Format
  • Font Family - Use this option to set the font of the cart toggle primary text.
  • Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
  • Font Size - Use this option to set the size of the font.
  • Letter Spacing - Use this option to set the spacing between letters.
  • Line Height - Use this option to set the spacing between each line.

Primary Text Style

You can use this control group to set the style of the primary text in the cart toggle.

Cart Toggle Primary Text Style
  • Font Style - Use this option to decide if you want to have a normal or italic style.
  • Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
  • Text Decoration - Use this option to force an underline or linethrough style.
  • Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
  • Text Color - Use this option to set the color of the text.

Primary Text Shadow

The primary text shadow control group contains settings to set a text shadow for the cart toggle primary text.

Cart Toggle Primary Text Shadow
  • X-Offset - Use this option to set the X offset of the text shadow.
  • Y-Offset - Use this option to set the Y offset of the text shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text shadow.
  • Color - Use this option to set the color of the text shadow.

Secondary Text Format

You can use this control group to set the format of the secondary text in the cart toggle.

  • Font Family - Use this option to set the font of the cart toggle secondary text.
  • Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
  • Font Size - Use this option to set the size of the font.
  • Letter Spacing - Use this option to set the spacing between letters.
  • Line Height - Use this option to set the spacing between each line.

Secondary Text Style

You can use this control group to set the style of the secondary text in the cart toggle.

  • Font Style - Use this option to decide if you want to have a normal or italic style.
  • Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
  • Text Decoration - Use this option to force an underline or linethrough style.
  • Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
  • Text Color - Use this option to set the color of the text.

Secondary Text Shadow

The secondary text shadow control group contains settings to set a text shadow for the cart toggle secondary text.

  • X-Offset - Use this option to set the X offset of the text shadow.
  • Y-Offset - Use this option to set the Y offset of the text shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text shadow.
  • Color - Use this option to set the color of the text shadow.

Toggle Graphic Setup

The graphics setup control group gives you options to enable and set up the graphic icon of the cart toggle.

Cart Toggle Graphic Setup
  • Enable - Use this option to enable or disable the icon of the cart toggle.
  • Type - Use this option to decide if the toggle graphic type should be Icon, Image, or Burger. There will be different control groups depending on the graphic type selection.
  • Icon & Img Interaction - Use this option to set up an animation for the cart toggle graphic on mouse hover. Available options are:
  • None
  • Scale Up
  • Scale Down
  • Flip X
  • Flip Y

Graphic Margin

Use this option to set the margin of the cart toggle graphic. You can change the settings for all the sides of the toggle graphic or modify them individually.

Cart Toggle Graphic Margin

Graphic Icon

Use this option to fine-tune the graphics icon of the cart toggle. This option will show if you set the graphics type of the toggle to the icon.

Cart Toggle Graphic Icon
  • Font Size & Secondary - Use this option to set the base font for the graphic icon of the cart toggle, and check the Secondary checkbox if you want to change the icon to another one while hovering the mouse over the cart toggle.
  • Width & Height - Use these options to set the width and height of the cart toggle graphic icon.
  • Primary & Secondary - Use this option to select the primary and secondary icon of the cart toggle graphic. The secondary option will be available if you check the secondary checkbox in the Font Size & Secondary option.
  • Color - Use this option to set the color of the cart toggle icon in normal and hover mode.
  • Background - Use this option to set the background of the cart toggle icon in normal and hover mode.

Graphic Icon Border

Use this option to set the border of the cart toggle graphic icon. You can set the style, width and color of the border on all sides or each side individually.

Cart Toggle Graphic Icon Border

Graphic Icon Border Radius

Use this option to set a border radius for the cart toggle graphic icon. You can set the curve on all sides or set them individually.

Cart Toggle Graphic Icon Border Radius

Graphic Icon Box Shadow

You can set a shadow over the cart toggle graphic icon using the box-shadow control group.

Cart Toggle Graphic Icon Box Shadow
  • X-Offset - Use this option to set the X offset of the shadow in the cart toggle.
  • Y-Offset - Use this option to set the Y offset of the shadow in the cart toggle.
  • Blur - Use this option to set the intensity of the blur effect in the cart toggle.
  • Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the cart toggle.
  • Color - Use this option to set the color of the cart toggle shadow.

Graphic Icon Text Shadow

The primary text shadow control group contains settings to set a text shadow for the cart toggle graphic icon.

Cart Toggle Graphic Icon Text Shadow
  • X-Offset - Use this option to set the X offset of the text shadow.
  • Y-Offset - Use this option to set the Y offset of the text shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text shadow.
  • Color - Use this option to set the color of the text shadow.

Graphic Image

This option will appear if you select the image as the graphic type.

Cart Toggle Graphic Image
  • Max Width - Use this option to set the maximum width of the cart toggle graphic image.

Primary Graphic Image

The Primary Graphic Image control group is to set the image for the cart toggle graphic.

Cart Toggle Primary Graphic Image
  • Retina & Dimensions - Retina support is enabled out the box. Click the Eye to disable the Retina support. Also supports options to set the width and height of the image.
  • Source - The image to be used. Click to select an image from the WordPress media library or upload a new one.
  • Alt Text - The alternative text for your image. Make sure to set this for screen readers!

Secondary Graphic Image

The Secondary Graphic Image control group is to set the image for the cart toggle graphic on hover. The control group has the same options as the Primary Graphic Image except the enable/ or disable checkbox.

Cart Toggle Secondary Graphic Image

Graphic Toggle

This control group will show if you select the Burger option as the graphic type of the cart toggle. The control group will have different options depending on which burger type you choose. Available types are:

Cart Toggle Graphic Toggle
  • Burger
  • Grid
  • More Horizontal
  • More Vertical

Burger Type

Cart Toggle Graphic Toggle Burger Type
  • Burger Size - Use this option to set the size of the burger.
  • Burger Spacing - Use this option to set the spacing between each burger line.
  • Burger Width - Use this option to set the width of the burger.
  • Color - Use this option to set the color of the burger in normal and hover mode.

Grid Type

Cart Toggle Graphic Toggle Grid Type
  • Grid Size - Use this option to set the size of the grid.
  • Grid Spacing - Use this option to set the spacing between each grid dot.
  • Color - Use this option to set the color of the grid in normal and hover mode.

More Horizontal Type

Cart Toggle Graphic Toggle More Horizontal Type
  • More Size - Use this option to set the size of the more.
  • More Spacing - Use this option to set the spacing between each more dot horizontally.
  • Color - Use this option to set the color of the more in normal and hover mode.

More Vertical Type

Cart Toggle Graphic Toggle More Horizontal Type
  • More Size - Use this option to set the size of the more.
  • More Spacing - Use this option to set the spacing between each more dot vertically.
  • Color - Use this option to set the color of the more in normal and hover mode.

Toggle Particles

Particles are set of controls under a group which gives you the tool to create accent behavior styles while interacting with different elements, such as the toggle of the cart element.

Particle Setup

Particle setup group contains the controls to the initial setup of the interaction effects. Following is the detailed information for each setting:

Particle Setup
  • Enable - Use this option to enable the interaction particle.
  • Location - Use this option to set the position of the particle in respect with the element that it is applied to. Available options are:
  • Center
  • Top
  • Left
  • Right
  • Bottom
  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right
  • Placement - Use this option to decide if you want to have the particles overlap with the element or limited inside the element.
  • Scale - The scale option will determine how the particle will expand or shrink in transition. The available options are:
  • None - Use this option if you do not want the particle to scale in transition.
  • Scale All - Use this option to scale the particle both vertically and horizontally in transition.
  • Scale X - Use this option to scale the particle horizontally in transition.
  • Scale Y - Use this option to scale the particle vertically in transition.
  • Delay - The delay option will determine how long will it take the transition to complete. The value of this option in seconds or milliseconds depends on the selection of the value unit.
  • Transform Starts From - Use this option to set where the transition of the particle should start. Available options are:
  • Center
  • Top
  • Left
  • Right
  • Bottom
  • Top Left
  • Top Right
  • Bottom Left
  • Bottom Right

Particle Style

Particle style group contains the controls to fine tune the interaction effects. Following is the detailed information for each setting:

Particle Style
  • Width & Height - Use this option to set the width and the height of the particle. The value unit can be Calc, PX, REM, EM, and %.
  • Radius - Use this option to set the radius of the particle. The same units can be used for this option values as the width/height options.
  • Color - Use this option to set the color of the particle.
  • Inline CSS - Use this option to add custom CSS which will be applied to the article. This option is for the advanced users that want an extra layer of customization which they can not find in the styling options of the particles.

Primary and Secondary Particles

Particle Setup Secondary

The same setup and style options which we described are available for primary and secondary particles. You basically have two sets of particle options to get innovative and create stylish interactions.

Particle Style Secondary

The Dropdown options are a set of control groups used to fine tune the dropdown feature of Cart Dropdown element. We are going to delve into details and explain each option functionality.

Dropdown Setup
  • Font Size - Use this option to set the base font size for the dropdown.
  • Width - Use this option to set the width of the dropdown.
  • Background - Use this option to set the background color of the dropdown.

The Dropdown Design section consists of design related settings for the cart dropdown box.

First Dropdown Margin

Use this option to set the margin of the dropdown. You can change the settings for all the sides of the dropdown or modify them individually.

First Dropdown Margin

Use this option to set the border of the dropdown. You can set the style, width and color of the border on all sides or each side individually.

Dropdown Border

Use this option to set a border radius for the dropdown. You can set the curve on all sides of the dropdown or set them individually.

Dropdown Border Radius

Use this option to set the padding of the dropdown. You can change the settings for all the sides of the dropdown or modify them individually.

Dropdown Padding

Use this option to add a shadow to the dropdown box.

Dropdown Box Shadow
  • X-Offset - Use this option to set the X offset of the shadow in the dropdown.
  • Y-Offset - Use this option to set the Y offset of the shadow in the dropdown.
  • Blur - Use this option to set the intensity of the blur effect in the dropdown shadow.
  • Spread & Position - Use this option to set the spread amount of the dropdown shadow and decide if you want the shadow to sit inside or outside of the box.
  • Color - Use this option to set the color of the dropdown shadow.

Cart Setup

The Cart Setup control group contains settings to set up the primary functionality of the cart.

Cart Setup
  • Title - Use this option to set the main title of the cart which shows inside the dropdown.
  • Items Placement - Use this option to decide where to put the list of items added to the cart.
  • Total Placement - Use this option to determine where to put the total price calculated section.
  • Buttons Placement - Use this option to decide where to put the checkout and other buttons.

Cart Title Setup

The Cart title contains a series of control groups to fine-tune the title section of the cart element.

Title Text Format

Cart Title Text Format
  • Font Family - Use this option to set the font of the cart title section.
  • Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
  • Font Size - Use this option to set the size of the font.
  • Letter Spacing - Use this option to set the spacing between letters.
  • Line Height - Use this option to set the spacing between each line.

Title Text Style

Cart Title Text Style
  • Font Style - Use this option to decide if you want to have a normal or italic style.
  • Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
  • Text Decoration - Use this option to force an underline or linethrough style.
  • Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
  • Text Color - Use this option to set the color of the text.

Title Text Shadow

The title text shadow control group contains settings to set a text shadow for the cart title.

Cart Title Text Shadow
  • X-Offset - Use this option to set the X offset of the text shadow.
  • Y-Offset - Use this option to set the Y offset of the text shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text shadow.
  • Color - Use this option to set the color of the text shadow.

Title Margin

Use this option to set the margin of the title. You can change the settings for all the sides of the title or modify them individually.

Cart Title Margin

Cart Item Setup

The Cart item contains a series of control groups to fine-tune the items listing section of the cart element.

Cart Items Setup
  • Remove Button - Use this option to decide if you want to show the remove button or not in the car items section.
  • Content Spacing - Use this option to set the spacing between the items section and other parts of the cart element.
  • Background - Use this option to set the background of items section in normal and interaction mode. The mouse hover can be considered as interaction in this case.

Items Margin

Use this option to set the margin of the items. You can change the settings for all the sides of the item or modify them individually.

Cart Items Margin

Items Padding

Use this option to set the padding of the items. You can change the settings for all the sides of the item or modify them individually.

Cart Items Padding

Items Border

Use this option to set the border of the items section. You can set the style, width and color of the border on all sides or each side individually.

Cart Items Border

Items Border Radius

Use this option to set a border radius for the items section. You can set the curve on all sides or set them individually.

Cart Items Border Radius

Items Box Shadow

Cart Items Box Shadow
  • X-Offset - Use this option to set the X offset of the shadow in the items section.
  • Y-Offset - Use this option to set the Y offset of the shadow in the items section.
  • Blur - Use this option to set the intensity of the blur effect in the items section.
  • Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the section.
  • Color - Use this option to set the color of the items section shadow.

Items Thumbnail Setup

Each item consists of the thumbnail which is the small image of the product which is added to the cart and the name of the product. Use this option to set the width of the thumbnail.

Cart Items Tumbnail Setup

Items Thumbnail Border Radius

Use this option to set a border radius for the thumbnail of the item. You can set the curve on all sides or set them individually.

Cart Items Thumbnail Border Radius

Items Thumbnail Box Shadow

Cart Items Thumbnail Box Shadow
  • X-Offset - Use this option to set the X offset of the shadow in the thumbnail of the item.
  • Y-Offset - Use this option to set the Y offset of the shadow in the thumbnail of the item.
  • Blur - Use this option to set the intensity of the blur effect in the thumbnail of the item.
  • Spread & Position - Use this option to set the spread amount of the items thumbnail shadow and decide if you want the shadow to sit inside or outside of the thumbnail.
  • Color - Use this option to set the color of the items thumbnail shadow.
Cart Items Link Text Format
  • Font Family - Use this option to set the font of the cart items link.
  • Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
  • Font Size - Use this option to set the size of the font.
  • Letter Spacing - Use this option to set the spacing between letters.
  • Line Height - Use this option to set the spacing between each line.
Cart Items Link Text Style
  • Font Style - Use this option to decide if you want to have a normal or italic style.
  • Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
  • Text Decoration - Use this option to force an underline or linethrough style.
  • Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
  • Text Color - Use this option to set the color of the text.

The items Link text shadow control group contains settings to set a text shadow for the cart items link text.

Cart Items Link Text Shadow
  • X-Offset - Use this option to set the X offset of the text shadow.
  • Y-Offset - Use this option to set the Y offset of the text shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text shadow.
  • Color - Use this option to set the color of the text shadow.

Items Quantity Text Format

The cart items list contains the quantity section which shows how many of the same product are added to the cart.

Cart Items Quantity Text Format
  • Font Family - Use this option to set the font of the cart items quantity.
  • Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
  • Font Size - Use this option to set the size of the font.
  • Letter Spacing - Use this option to set the spacing between letters.
  • Line Height - Use this option to set the spacing between each line.

Items Quantity Text Style

Cart Quantity Link Text Style
  • Font Style - Use this option to decide if you want to have a normal or italic style.
  • Text Align - Use this option to set the alignment of the text. Possible values are left, center, right, and justify.
  • Text Decoration - Use this option to force an underline or linethrough style.
  • Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
  • Text Color - Use this option to set the color of the text.

Items Quantity Text Shadow

Cart Quantity Link Text Shadow

The items quantity text shadow control group contains settings to set a text shadow for the cart items quantity text.

  • X-Offset - Use this option to set the X offset of the text shadow.
  • Y-Offset - Use this option to set the Y offset of the text shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text shadow.
  • Color - Use this option to set the color of the text shadow.

Cart Total Setup

The Cart Total contains a series of control groups to fine-tune the total information of the cart element. The total information includes the sum of the cart item prices and other details.

Cart Total Setup

Use this option to set the background color of the total section in the cart element.

Total Text Format

Cart Total Text Format
  • Font Family - Use this option to set the font of the cart total section.
  • Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
  • Font Size - Use this option to set the size of the font.
  • Letter Spacing - Use this option to set the spacing between letters.
  • Line Height - Use this option to set the spacing between each line.

Total Text Style

Cart Total Text Style
  • Font Style - Use this option to decide if you want to have a normal or italic style.
  • Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
  • Text Decoration - Use this option to force an underline or linethrough style.
  • Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
  • Text Color - Use this option to set the color of the text.

Total Text Shadow

The title text shadow control group contains settings to set a text shadow for the cart total section.

Cart Total Text Shadow
  • X-Offset - Use this option to set the X offset of the text shadow.
  • Y-Offset - Use this option to set the Y offset of the text shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text shadow.
  • Color - Use this option to set the color of the text shadow.

Total Margin

Use this option to set the margin of the total section. You can change the settings for all the sides of the total section or modify them individually.

Cart Total Margin

Total Padding

Use this option to set the padding of the total section. You can change the settings for all the sides of the total section, or modify them individually.

Cart Total Padding

Total Border

Use this option to set the border of the total section. You can set the style, width and color of the border on all sides or each side individually.

Cart Total Border

Total Border Radius

Use this option to set a border radius for the total section. You can set the curve on all sides or set them individually.

Cart Total Border Radius

Total Box Shadow

Cart Total Box Shadow
  • X-Offset - Use this option to set the X offset of the shadow in the cart total section.
  • Y-Offset - Use this option to set the Y offset of the shadow in the cart total section.
  • Blur - Use this option to set the intensity of the blur effect in the cart total section.
  • Spread & Position - Use this option to set the spread amount of the cart total section shadow and decide if you want the shadow to sit inside or outside of the section.
  • Color - Use this option to set the color of the cart total section shadow.

Cart Buttons Container Setup

This is a series of control groups to fine-tune the buttons section container of the cart.

Cart Buttons Container Setup
  • Horizontal Alignment - Use this option to set the buttons container alignment of the cart element. Available options are:
  • Start
  • Center
  • End
  • Spread
  • Justify
  • Background - Use this option to set the background color of the buttons container of the cart.

Buttons Container Margin

Use this option to set the margin of the buttons container of the cart. You can change the settings for all the sides of the buttons container or modify them individually.

Cart Buttons Container Margin

Buttons Container Padding

Use this option to set the padding of the buttons container of the cart. You can change the settings for all the sides of the buttons container or modify them individually.

Cart Buttons Container Padding

Buttons Container Border

Use this option to set the border of the buttons container of the cart. You can set the style, width and color of the border on all sides or each side individually.

Cart Buttons Container Border

Buttons Container Border Radius

Use this option to set a border radius for the buttons container of the cart. You can set the curve on all sides or set them individually.

Cart Buttons Container Border Radius

Buttons Container Box Shadow

Cart Buttons Container Box Shadow
  • X-Offset - Use this option to set the X offset of the shadow in the buttons container of the cart.
  • Y-Offset - Use this option to set the Y offset of the shadow in the buttons container of the cart.
  • Blur - Use this option to set the intensity of the blur effect in the buttons container of the cart.
  • Spread & Position - Use this option to set the spread amount of the buttons container shadow and decide if you want the shadow to sit inside or outside of the section.
  • Color - Use this option to set the color of the buttons container shadow.

Cart Buttons Setup

The Cart Buttons section is the area of the cart element that the View Cart and Checkout buttons reside.

Cart Buttons Setup
  • Base Font Size - Use this option to set the base font of the cart buttons.
  • Width & Height - Use these options to set the width and height of the cart buttons.
  • Min Width & Height - Use these options to set the minimum width and height of the cart buttons.
  • Background - Use this option to set the background of the buttons in normal and hover mode.

Buttons Margin

Use this option to set the margin of the cart buttons. You can change the settings for all the sides of the buttons or modify them individually.

Cart Buttons Margin

Buttons Padding

Use this option to set the padding of the cart buttons. You can change the settings for all the sides of the buttons or modify them individually.

Cart Buttons Padding

Buttons Border

Use this option to set the border of the cart buttons. You can set the style, width and color of the border on all sides or each side individually.

Cart Buttons Border

Buttons Border Radius

Use this option to set a border radius for the cart buttons. You can set the curve on all sides or set them individually.

Cart Buttons Border Radius

Buttons Box Shadow

Cart Buttons Box Shadow
  • X-Offset - Use this option to set the X offset of the shadow in the cart buttons.
  • Y-Offset - Use this option to set the Y offset of the shadow in the cart buttons.
  • Blur - Use this option to set the intensity of the blur effect in the cart buttons.
  • Spread & Position - Use this option to set the spread amount of the cart buttons shadow and decide if you want the shadow to sit inside or outside of the section.
  • Color - Use this option to set the color of the cart buttons shadow.

Cart Buttons Text Options

Following is the series of controls to fine-tune the cart buttons text.

Text Margin

Use this option to set the margin of the cart buttons text. You can change the settings for all the sides of the button's text or modify them individually.

Cart Buttons Text Margin

Primary Text Format

You can use this control group to set the format of the primary text of the cart buttons.

Cart Buttons Text Primary Text Format
  • Font Family - Use this option to set the font of the cart buttons primary text.
  • Font Weight - Use this option to set the weight or thickness of the font. The values may differ depending on the selection of the font and if the select font supports weights or not.
  • Font Size - Use this option to set the size of the font.
  • Letter Spacing - Use this option to set the spacing between letters.
  • Line Height - Use this option to set the spacing between each line.

Primary Text Style

You can use this control group to set the style of the primary text of the cart buttons.

Cart Buttons Text Primary Text Style
  • Font Style - Use this option to decide if you want to have a normal or italic style.
  • Text Align - Use this option to set the alignment of the text. Possible valuse are left, center, right, and justify.
  • Text Decoration - Use this option to force an underline or linethrough style.
  • Text Transform - Use this option to set the case of the text. Available options are uppercase, camel case, and lowercase.
  • Text Color - Use this option to set the color of the text.

Primary Text Shadow

The primary text shadow control group contains settings to set a text shadow for the cart buttons primary text.

Cart Buttons Text Primary Text Shadow
  • X-Offset - Use this option to set the X offset of the text shadow.
  • Y-Offset - Use this option to set the Y offset of the text shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text shadow.
  • Color - Use this option to set the color of the text shadow.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

Cart Customize
  • Toggle Hash - Use this option to add a custom hash to the toggle section of the cart element. Whatever you add here will be added as the value of data-x-toggle-hash HTML attribute. You can use this as a base point for your Javascript custom code.
  • ID - Use this option to set an HTML ID for the cart element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the cart element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the cart element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes

Demo

To see a live demo of the Cart Dropdown Element click here.

Summary

Let's recap. We've discussed how to add the Cart Dropdown Element. Then we've gone through its toggle, dropdown, cart, cart buttons, and customize settings to make it look the way you want it to look.

See something inaccurate? Let us know