Post Card Cart Element

Last Update: September 2, 2026

The Avada Post Card Cart Element is designed to showcase WooCommerce cart items/products, giving you complete control over how cart contents are displayed. It dynamically pulls product details such as images, titles, quantities, and prices in a visually consistent style.

With extensive customization options, you can adjust the styling, layout, and interactivity to enhance the shopping cart experience and encourage sales. You can view the Avada Post Card Cart Element page, and read on to see the complete list of options.

IMPORTANT NOTE: The Post Card Cart Element is only available when editing Post Cards.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Avada Post Card Cart Element

The Avada Post Card Cart Element allows you to add an “Add to Cart” section in your WordPress eCommerce store using WooCommerce and Avada. You could use an Avada Post Card instead of the WooCommerce Product Grid Element, for example.

To use the Element, add it to your WooCommerce-based Post Card and configure it to your needs. There are many options available with this Element, both in terms of functionality and design. Read on to see the complete list of options available with this helpful Element.

Element Options

Location: The edit screen within each Element. This Element is found in the Layout Elements tab only when adding or editing an Avada Library > Post Card Element.

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, so the options screen may look somewhat different.

General

Heading		Description
Cart Layout		Select the layout of cart components. Floated will have components side by side. Stacked will have one component per row.
Cart Alignment		Select the content alignment.
Show Variations		Display the variations if product type is variable.
Show Quantity		Display the quantity input.
Show Add To Cart		Display the Add To Cart button.
Show Product Link		Display the Product Link .
Product Quick View		Enable product quick view for products.
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.
Experiment Events		Select any available Avada Experiment events to this element. Note: if you are already using the selector to trigger this, no need to add here.
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.

Cart

Heading		Description
Margin		In pixels or percentage, ex: 10px or 10%.
Quantity Style		Select whether you want to custom style the quantity field.
Quantity Margin		In pixels or percentage, ex: 10px or 10%.
Quantity Input Dimensions		Enter values including any valid CSS unit, ex: 10px.
Quantity Border Radius		Enter values including any valid CSS unit, ex: 10px.
Quantity Input Font Size		Controls the font size of the select field. Enter value including any valid CSS unit, ex: 20px.
Quantity Input Text Color		Controls the text color of the select fields.
Quantity Input Background Color		Controls the background color of the select fields.
Quantity Input Border Size		Controls the border size of the select fields.
Quantity Input Border Color		Controls the border color of the select fields.
Quantity Button Border Size		Controls the border size of the select fields.
Quantity Button Text Color		Controls the text color of the select fields.
Quantity Button Background Color		Controls the background color of the select fields.
Quantity Button Border Color		Controls the border color of the select fields.
Add To Cart Link Style		Select whether you want to custom style the add to cart button.
Add To Cart Margin		In pixels or percentage, ex: 10px or 10%.
Button Size		Controls the button size.
Button Border Size		Controls the border size. In pixels.
Icon		Click an icon to select, click again to deselect.
Icon Position		Choose the position of the icon on the button.
Add To Cart Link Font Size		Controls the font size of the text link. Enter value including any valid CSS unit, ex: 20px.
Link Text Color		Controls the text color of the link.
Button Text Color		Controls the text color of the button.
Button Gradient Top Color		Controls the text color of the button.
Button Gradient Bottom Color		Controls the text color of the button.
Button Border Color		Controls the border color of the button.
Product Link Style		Select whether you want to custom style the product link.
Product Link Margin		In pixels or percentage, ex: 10px or 10%.
Product Link Font Size		Controls the font size of the text link. Enter value including any valid CSS unit, ex: 20px.
Product Link Text Color		Controls the text color of the link.
Button Size		Controls the button size.
Button Border Size		Controls the border size. In pixels.
Icon		Click an icon to select, click again to deselect.
Icon Position		Choose the position of the icon on the button.
Button Text Color		Controls the text color of the button.
Button Gradient Top Color		Controls the text color of the button.
Button Gradient Bottom Color		Controls the text color of the button.
Button Border Color		Controls the border color of the button.

Variations

Heading		Description

Variation Layout		Select the layout for the variations. Floated will have the label and select side by side. Stacked will have one per row.
Attribute Labels Layout		Choose what the label column of the variation form shows. Icons are set per attribute, on the WooCommerce attributes screen, and any attribute without one keeps its label. Choose "None" to hide the label column.
Label Column Width		Controls the width of the label column, the field column takes the rest. Leave empty for automatic width. Enter values including any valid CSS unit, ex: 10px.
Column Gap		Controls the space between the label and the field column. Enter a value including any valid CSS unit, ex: 20px or 1em.
Text Alignment		Select the text alignment for the variation label and variation swatches.
Label Typography		Controls the typography of the label text. Leave empty for the global font family.
Swatch Style		Select whether you want to custom style the Avada variation swatches.
Swatch Item Margin		In pixels or percentage, ex: 10px or 10%.
Swatch Border Size		Controls the border size of the color, image and button swatch fields.
Swatch Styling
Swatch Background Color		Controls the background color of the color, image and button swatch fields.
Swatch Border Color		Controls the border color of the color, image and button swatch fields.
Color Swatch Dimensions		Enter values including any valid CSS unit, ex: 10px.
Color Swatch Padding		Controls the padding of the color swatches. Enter values including any valid CSS unit, ex: 10px or 10%.
Color Swatch Border Radius		Enter values including any valid CSS unit, ex: 10px.
Image Swatch Dimensions		Enter values including any valid CSS unit, ex: 10px.
Image Swatch Padding		Controls the padding of the image swatches. Enter values including any valid CSS unit, ex: 10px or 10%.
Image Swatch Border Radius		Enter values including any valid CSS unit, ex: 10px.
Button Swatch Dimensions		Enter values including any valid CSS unit, ex: 10px. Leave empty for auto.
Button Swatch Padding		Controls the padding of the button swatches. Enter values including any valid CSS unit, ex: 10px or 10%.
Button Swatch Border Radius		Enter values including any valid CSS unit, ex: 10px.
Button Swatch Font Size		Controls the font size of the button swatches. Enter value including any valid CSS unit, ex: 20px.
Button Swatch Text Color		Controls the text color of the button swatches.
Select Style		Select whether you want to custom style the select fields for variations.
Select Height		Enter values including any valid CSS unit, ex: 10px.
Select Typography		Controls the typography of the Select option. Leave empty for the global font family.
Select Background Color		Controls the background color of the select fields.
Select Border Size		Controls the border size of the select fields.
Select Border Color		Controls the border color of the select fields.
Select Border Radius		Enter values including any valid CSS unit, ex: 10px.
Variation Clear		Controls how you want to disable the variation clear link.
Clear Content		Controls the content type for the clear link. Default will use WooCommerce text string.
Clear Icon		Click an icon to select, click again to deselect.
Clear Text		Custom text to use for the variation clear link.

Extras

Heading		Description
Conditional Rendering		Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results.
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.
Dynamic Display		Show or hide this element dynamically based on real-time cart and wishlist state. Changes apply immediately without a page reload. NOTE: Server cache can interfere with initial visibility.

Post Card Cart Element

How To Use The Avada Post Card Cart Element

Element Options

General

Cart

Variations

Extras

In this article