Woo Add To Cart Element

Last Update: May 23, 2024

As part of Avada Layouts, we created a series of Dynamic Elements that help generate content in the Content Layout Section of a Layout. These are called Layout Elements.

As part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Add To Cart Element.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Woo Add To Cart Element

The Woo Add To Cart Element allows you to add an Add To Cart section in your Woo Product Layout Section. There is a huge variety of styling and configuration options, as can be seen in the options below, yet for a simple product, the defaults will likely be enough.

Woo Add To Cart Element Example

Element Options

Note: Please note that the displayed options 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
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.

Variations

HeadingDescription
Variations MarginIn pixels or percentage, ex: 10px or 10%.
Cell Border SizeControls the border size of the variation table cells.
Cell Border ColorControls the border color of the variation table cells
Cell PaddingControls the padding of the variation table cells. Enter values including any valid CSS unit, ex: 10px or 10%.
Cell Background ColorControls the background color of the variation table cells.
Variation LayoutSelect the layout for the variations. Floated will have the label and select side by side. Stacked will have one per row.
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.
Label TypographyControls the typography of the label text. Leave empty for the global font family.
Select StyleSelect whether you want to custom style the select fields for variations.
Select HeightEnter values including any valid CSS unit, ex: 10px.
Select Font SizeControls the font size of the select field. Enter value including any valid CSS unit, ex: 20px.
Select Text ColorControls the text color of the select fields.
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.
Swatch StyleSelect whether you want to custom style the Avada variation swatches.
Swatch Item MarginIn pixels or percentage, ex: 10px or 10%.
Swatch Background ColorControls the background color of the color, image and button swatch fields.
Swatch Border SizeControls the border size 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.
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.
Clear MarginControls the margin of the clear link. Enter values including any valid CSS unit, ex: 10px or 10%.
Clear ColorControls the text color of the clear link.

Details

HeadingDescription
Details PaddingControls the padding of the variation details area. Enter values including any valid CSS unit, ex: 10px or 10%.
Details Background ColorControls the background color of the variation details area.
Details Border SizeControls the border size of the variation details area.
Details Border ColorControls the border color of the variation details area.
Details Border RadiusEnter values including any valid CSS unit, ex: 10px.
Details AlignmentSelect the content alignment within the details area.
Description TypographyControls the typography of the description text. Leave empty for the global font family.
Description OrderDisplay order for description. Can be before price/stock or after..
Show PriceMake a selection to show or hide the variation price. "Always" will display the price even if all variations share the same. "Auto" will only display the price when variations have different prices.
Price TypographyControls the typography of the price text. Leave empty for the global font family.
Show Sale Old PriceMake a selection to show or hide sale old price.
Sale Old Price PositionSelect if the sale old price should be before or after the regular price.
Sale Old Price TypographyControls the typography of the sale old price text. Leave empty for the global font family.
Show StockMake a selection to show or hide the variation stock.
Stock TypographyControls the typography of the stock text. Leave empty for the global font family.

Cart

HeadingDescription
Cart MarginIn pixels or percentage, ex: 10px or 10%.
Cart LayoutSelect the layout for the quantity and add to cart button. Floated will have them side by side. Stacked will have one per row.
Cart AlignmentSelect the content alignment.
Quantity StyleSelect whether you want to custom style the quantity field.
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 Styling
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 Button StyleSelect whether you want to custom style the add to cart button.
Button SizeControls the button size.
Button SpanControls if the button spans the full width/remaining width of row.
Button Border SizeControls the border size. In pixels or percentage, ex: 10px or 10%.
IconClick an icon to select, click again to deselect.
Icon PositionChoose the position of the icon on the button.
Button Styling
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.

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.