Woo Mini Cart Element

Last Update: April 23, 2024

The Woo Mini Cart Element is a Design Element that can be added to an Avada website to highlight to the user what is in the Cart. Please read on for all the details on this useful Element, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Woo Mini Cart Element

The Woo Mini Cart Element is useful to show on a site when a user is purchasing. A perfect way to use this would be to place the Woo Mini Cart Element in an Avada Off Canvas, so that when a user buys something, a sliding bar appears with the Cart contents displaying, as displayed in the top image. With an Off Canvas, it is triggered by the “After Product Is Added to Cart” trigger. Alternatively, it could be in a popup, or a sticky column. Watch the video at the top of the page to see some examples of the Element in use.

Element Options

Note: The displayed option screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Images Max WidthSet the maximum width the image should take up. Enter value including any valid CSS unit, ex: 60px. Leave empty for default value.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
MarginIn pixels or percentage, ex: 10px or 10%.
Separator ColorControls the line style color of separators.
Product Title TypographyControls the typography of the product title. Leave empty for the global font family.
Product Title Hover ColorControls the hover color of the product title.
Product Price TypographyControls the typography of the product price. Leave empty for the global font family.
Show SubtotalChoose if subtotal should show or not.
Subtotal AlignmentSelect the alignment.
Subtotal Text TypographyControls the typography of the subtotal text. Leave empty for the global font family.
Subtotal Amount TypographyControls the typography of the subtotal amount. Leave empty for the global font family.
Show Remove IconChoose if remove icon should show or not.
Remove Icon ColorControls the icon color.
Remove Icon Background ColorControls the background color of the icon.

Links

HeadingDescription
Show ButtonsChoose if view cart and checkout links should or not.
Buttons SpanControls if buttons spans the full width/remaining width of row.
Buttons LayoutSelect the layout for buttons. Floated will have them side by side. Stacked will have one per row.
Buttons AlignmentSelect the content alignment.
Link StyleSelect whether you want to have link or button for view cart and checkout texts.
Links MarginIn pixels or percentage, ex: 10px or 10%.
Icon PositionChoose the view cart and checkout icons position.
View Cart Text TypographyControls the typography of the view cart text. Leave empty for the global font family.
View Cart Link Styling
View Cart Text ColorControls the text color of the view cart link.
View Cart Button SizeControls the view cart button size.
View Cart Button Border SizeControls the view cart button border size. In pixels.
View Cart Button Styling
View Cart Button Text ColorControls the text color of the view cart button.
View Cart Button Gradient Top ColorControls the gradient top color of the view cart button.
View Cart Button Gradient Bottom ColorControls the gradient bottom color of the view cart button.
View Cart Button Border ColorControls the border color of the view cart button.
Checkout Text TypographyControls the typography of the checkout text. Leave empty for the global font family.
Checkout Link Styling
Checkout Text ColorControls the text color of the checkout link.
Checkout Button SizeControls the checkout button size.
Checkout Button Border SizeControls the checkout button border size. In pixels.
Checkout Button Styling
Checkout Button Text ColorControls the text color of the checkout button.
Checkout Button Gradient Top ColorControls the gradient top color of the checkout button.
Checkout Button Gradient Bottom ColorControls the gradient bottom color of the checkout button.
Checkout Button Border ColorControls the border color of the checkout button.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article