Post Card Cart Element

Last Update: March 21, 2024

The Post Card Cart Element is a special Layout Element, that you will only see when editing a Post Card in the Avada Library. It is one of the available Elements, with which to design and build Post Cards, and specifically WooCommerce Post Cards. Read on to find out more about this useful ecommerce Element.

How To Use The Post Card Cart Element

The Post Card Cart Element allows you to add an Add to Cart section in your WooComerce based Post Cards. You could use a WooCommerce Post Card instead of the WooCommerce Product Grid Element for example.

To use the Element, simply add it to your WooCommerce based Post Card and configure it to your needs. There are many choices with this Element, both with functionality and design. Read on to see the full list of options available with this useful 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

HeadingDescription
Cart LayoutSelect the layout of cart components. Floated will have components side by side. Stacked will have one component per row.
Cart AlignmentSelect the content alignment.
Show VariationsDisplay the variations if product type is variable.
Show QuantityDisplay the quantity input.
Show Add To CartDisplay the Add To Cart button.
Show Product LinkDisplay the Product Link .
Product Quick ViewEnable product quick view for products.
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.
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.

Cart

HeadingDescription
MarginIn pixels or percentage, ex: 10px or 10%.
Quantity StyleSelect whether you want to custom style the quantity field.
Quantity MarginIn pixels or percentage, ex: 10px or 10%.
Quantity Input DimensionsEnter values including any valid CSS unit, ex: 10px.
Quantity Border RadiusEnter values including any valid CSS unit, ex: 10px.
Quantity Input Font SizeControls the font size of the select field. Enter value including any valid CSS unit, ex: 20px.
Quantity Input Text ColorControls the text color of the select fields.
Quantity Input Background ColorControls the background color of the select fields.
Quantity Input Border SizeControls the border size of the select fields.
Quantity Input Border ColorControls the border color of the select fields.
Quantity Button Border SizeControls the border size of the select fields.
Quantity Button Text ColorControls the text color of the select fields.
Quantity Button Background ColorControls the background color of the select fields.
Quantity Button Border ColorControls the border color of the select fields.
Add To Cart Link StyleSelect whether you want to custom style the add to cart button.
Add To Cart MarginIn pixels or percentage, ex: 10px or 10%.
Button SizeControls the button size.
Button Border SizeControls the border size. In pixels.
IconClick an icon to select, click again to deselect.
Icon PositionChoose the position of the icon on the button.
Add To Cart Link Font SizeControls the font size of the text link. Enter value including any valid CSS unit, ex: 20px.
Link Text ColorControls the text color of the link.
Button Text ColorControls the text color of the button.
Button Gradient Top ColorControls the text color of the button.
Button Gradient Bottom ColorControls the text color of the button.
Button Border ColorControls the border color of the button.
Product Link StyleSelect whether you want to custom style the product link.
Product Link MarginIn pixels or percentage, ex: 10px or 10%.
Product Link Font SizeControls the font size of the text link. Enter value including any valid CSS unit, ex: 20px.
Product Link Text ColorControls the text color of the link.
Button SizeControls the button size.
Button Border SizeControls the border size. In pixels.
IconClick an icon to select, click again to deselect.
Icon PositionChoose the position of the icon on the button.
Button Text ColorControls the text color of the button.
Button Gradient Top ColorControls the text color of the button.
Button Gradient Bottom ColorControls the text color of the button.
Button Border ColorControls the border color of the button.

Variations

HeadingDescription
Variation LayoutSelect the layout for the variations. Floated will have the label and select side by side. Stacked will have one per row.
Show LabelDisplay the variation attribute label.
Label TypographyControls the typography of the label text. Leave empty for the global font family.
Label WidthLeave empty for automatic width. Enter values including any valid CSS unit, ex: 10px.
Text AlignmentSelect the text alignment for the variation label and variation swatches.
Swatch StyleSelect whether you want to custom style the Avada variation swatches.
Swatch Item MarginIn pixels or percentage, ex: 10px or 10%.
Swatch Border SizeControls the border size of the color, image and button swatch fields.
Swatch Styling
Swatch Background ColorControls the background color of the color, image and button swatch fields.
Swatch Border ColorControls the border color of the color, image and button swatch fields.
Color Swatch DimensionsEnter values including any valid CSS unit, ex: 10px.
Color Swatch PaddingControls the padding of the color swatches. Enter values including any valid CSS unit, ex: 10px or 10%.
Color Swatch Border RadiusEnter values including any valid CSS unit, ex: 10px.
Image Swatch DimensionsEnter values including any valid CSS unit, ex: 10px.
Image Swatch PaddingControls the padding of the image swatches. Enter values including any valid CSS unit, ex: 10px or 10%.
Image Swatch Border RadiusEnter values including any valid CSS unit, ex: 10px.
Button Swatch DimensionsEnter values including any valid CSS unit, ex: 10px. Leave empty for auto.
Button Swatch PaddingControls the padding of the button swatches. Enter values including any valid CSS unit, ex: 10px or 10%.
Button Swatch Border RadiusEnter values including any valid CSS unit, ex: 10px.
Button Swatch Font SizeControls the font size of the button swatches. Enter value including any valid CSS unit, ex: 20px.
Button Swatch Text ColorControls the text color of the button swatches.
Select StyleSelect whether you want to custom style the select fields for variations.
Select HeightEnter values including any valid CSS unit, ex: 10px.
Select TypographyControls the typography of the Select option. Leave empty for the global font family.
Select Background ColorControls the background color of the select fields.
Select Border SizeControls the border size of the select fields.
Select Border ColorControls the border color of the select fields.
Select Border RadiusEnter values including any valid CSS unit, ex: 10px.
Variation ClearControls how you want to disable the variation clear link.
Clear ContentControls the content type for the clear link. Default will use WooCommerce text string.
Clear IconClick an icon to select, click again to deselect.
Clear TextCustom text to use for the variation clear link.

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