Woo Mini Cart Element

Last Update: August 28, 2025

The Avada Woo Mini Cart Element is a Design Element that can be added to a WordPress website, alongside Avada and WooCommerce, to highlight to the user what is in the Woo Cart.

Watch the video below for a visual overview of the Element, view the Avada Mini Cart Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Woo Mini Cart Element

The Avada Woo Mini Cart Element helps display on a site when a user is making a purchase. A perfect way to utilize this would be to place the Woo Mini Cart Element in an Avada Off-Canvas pop-up/slide, so that when a user makes a purchase, a sliding bar appears with the Cart contents displayed, as shown 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 pop-up 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

Heading		Description
Images Max Width		Set the maximum width the image should take up. Enter value including any valid CSS unit, ex: 60px. Leave empty for default value.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
Margin		In pixels or percentage, ex: 10px or 10%.
Separator Color		Controls the line style color of separators.
Product Title Typography		Controls the typography of the product title. Leave empty for the global font family.
Product Title Hover Color		Controls the hover color of the product title.
Product Price Typography		Controls the typography of the product price. Leave empty for the global font family.
Show Subtotal		Choose if subtotal should show or not.
Subtotal Alignment		Select the alignment.
Subtotal Text Typography		Controls the typography of the subtotal text. Leave empty for the global font family.
Subtotal Amount Typography		Controls the typography of the subtotal amount. Leave empty for the global font family.
Show Remove Icon		Choose if remove icon should show or not.
Remove Icon Color		Controls the icon color.
Remove Icon Background Color		Controls the background color of the icon.

Links

Heading		Description
Show Buttons		Choose if view cart and checkout links should or not.
Buttons Span		Controls if buttons spans the full width/remaining width of row.
Buttons Layout		Select the layout for buttons. Floated will have them side by side. Stacked will have one per row.
Buttons Alignment		Select the content alignment.
Link Style		Select whether you want to have link or button for view cart and checkout texts.
Links Margin		In pixels or percentage, ex: 10px or 10%.
Icon Position		Choose the view cart and checkout icons position.
View Cart Text Typography		Controls the typography of the view cart text. Leave empty for the global font family.
View Cart Link Styling
View Cart Text Color		Controls the text color of the view cart link.
View Cart Button Size		Controls the view cart button size.
View Cart Button Border Size		Controls the view cart button border size. In pixels.
View Cart Button Styling
View Cart Button Text Color		Controls the text color of the view cart button.
View Cart Button Gradient Top Color		Controls the gradient top color of the view cart button.
View Cart Button Gradient Bottom Color		Controls the gradient bottom color of the view cart button.
View Cart Button Border Color		Controls the border color of the view cart button.
Checkout Text Typography		Controls the typography of the checkout text. Leave empty for the global font family.
Checkout Link Styling
Checkout Text Color		Controls the text color of the checkout link.
Checkout Button Size		Controls the checkout button size.
Checkout Button Border Size		Controls the checkout button border size. In pixels.
Checkout Button Styling
Checkout Button Text Color		Controls the text color of the checkout button.
Checkout Button Gradient Top Color		Controls the gradient top color of the checkout button.
Checkout Button Gradient Bottom Color		Controls the gradient bottom color of the checkout button.
Checkout Button Border Color		Controls the border color of the checkout button.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.