Woo Add To Cart Element

22/01/2021

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.

In Avada 7.2, 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.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.
View The Woo Add To Cart Element Demo Page!

Overview

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
Avada Website Builder

657,142 Businesses Trust Avada

Get Avada
Avada Website Builder

657,142 Businesses Trust Avada

Get Avada
Avada Website Builder

657,142 Businesses Trust Avada

Get Avada

Element Options

Location: The edit screen within each Element.

Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative 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 Tab

  • Element Visibility – Allows you to control the Element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Allows you to add a class for the Element.

  • CSS ID – Allows you to add an ID for the Element.

View The Options Screen

Variations Tab

  • Variations Margin – In pixels or percentage, ex: 10px or 10%.
  • Cell Border Size – Controls the border size of the variation table cells.

  • Cell Border Color – Controls the border color of the variation table cells Leave empty for default value.

  • Cell Padding – Controls the padding of the variation table cells. Enter values including any valid CSS unit, ex: 10px or 10%.
  • Cell Background Color – Controls 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. or 20%.

  • Text AlignmentSelect the text alignment for the variation label and variation swatches.

  • Label Text ColorControls the text color of the variation labels. Leave empty for default value.

  • Label Font SizeControls the font size of the label text. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.

  • Label Font FamilyControls the font family of the label text. Leave empty for the global font family.

  • Select StyleSelect whether you want to custom style the select fields for variations. Choose from Default, or Custom.

  • Select HeightEnter values including any valid CSS unit, ex: 10px. Leave empty for default value

  • Select Font SizeControls the font size of the select field. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.

  • Select Text ColorControls the text color of the select fields. Leave empty for default value.

  • Select Background ColorControls the background color of the select fields. Leave empty for default value.

  • Select Border SizeControls the border size of the select fields. Leave empty for default value.

  • Select Border ColorControls the border color of the select fields. Leave empty for default value.

  • Select Border RadiusEnter values including any valid CSS unit, ex: 10px.

  • Swatch StyleSelect if you want to custom style the Avada variation swatches. Choose from Default, or Custom.

  • Swatch Item MarginIn pixels or percentage, ex: 10px or 10%.

  • Swatch Background ColorControls the background color of the color, image and button swatch fields. Leave empty for default value.

  • Swatch Active Background ColorControls the background color of the color, image and button swatch fields when active.

  • Swatch Border SizeControls the border size of the color, image and button swatch fields. Leave empty for default value.

  • Swatch Border Color – Controls the border color of the color, image and button swatch fields. Leave empty for default value.

  • Swatch Active Border ColorControls the border color of the color, image and button swatch fields when active. Leave empty for default value.

  • 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 Dimensions Enter 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. Leave empty for default value.

  • Button Swatch Text ColorControls the text color of the button swatches. Leave empty for default value.

  • Button Swatch Active Text ColorControls the text color of the button swatches when active. Leave empty for default value.

  • Variation ClearControls how you want to disable the variation clear link. Choose from Absolute, Inline, or Hide.

  • Clear ContentControls the content type for the clear link. Default will use WooCommerce text string. Choose from Default, Text, or Icon.

  • 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. Leave empty for default value.

  • Clear Hover ColorControls the text color of the clear link on hover. Leave empty for default value.

View The Options Screen

Details Tab

  • 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 Text ColorControls the text color of the variation description. Leave empty for default value.

  • Description Font SizeControls the font size of the variation description. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.

  • Description Font FamilyControls the font family of the variation description. Leave empty for the global font family.

  • Description OrderDisplay order for description. Can be before price/stock or after. Choose from Before Price or After Price.

  • Price Font SizeControls the font size of the price text. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.

  • Price Text ColorSelect a color for the price text. Leave empty for default value.

  • Price Font FamilyControls the font family of the price text. Leave empty for the global font family.

  • Sale Old Price PositionSelect if the sale old price should be before or after the regular price. Choose from Before Regular or After Regular.

  • Sale Old Price Font SizeControls the font size of the sale old price text. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.

  • Sale Old Price Text ColorSelect a color for the sale old price text. Leave empty for default value.

  • Sale Old Price Font FamilyControls the font family of the sale old price text. Leave empty for the global font family.

  • Stock Text ColorSelect a color for the stock text. Leave empty for default value.

  • Stock Font FamilyControls the font family of the stock text. Leave empty for the global font family.

View The Options Screen

Cart Tab

  • Cart Margin – In pixels or percentage, ex: 10px or 10%.
  • Cart LayoutSelect the layout for the quantity and add to cart button. Choose from Floated or Stacked. Floated will have them side by side. Stacked will have one per row.

  • Cart AlignmentFor Floated option. Select the content alignment. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly.

  • Cart Alignment – For Stacked option. Select the content alignment. Choose from Flex Start, Center, or Flex End.

  • Quantity StyleSelect whether you want to custom style the quantity field. Choose from Default, or Custom.

  • Quantity Input DimensionsEnter values including any valid CSS unit, ex: 10px.

  • Quantity Border Radius – Enter 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. Leave empty for default value.

  • 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. Leave empty for default value.

  • Quantity Button Border SizeControls the border size of the select fields.

  • Quantity Button Styling – Use filters to see specific type of content.

  • Regular Options

  • Quantity Button Text ColorControls the text color of the select fields. Leave empty for default value.

  • Quantity Button Background ColorControls the background color of the select fields. Leave empty for default value.

  • Quantity Button Border ColorControls the border color of the select fields. Leave empty for default value.

  • Add To Cart Button StyleSelect whether you want to custom style the add to cart button. Choose from Default or Custom.

  • Button SizeControls the button size. Choose from Small, Medium, Large, or XLarge.

  • Button SpanControls if the button spans the full width/remaining width of row. Choose from Yes, or No.

  • Button Border Size – Controls the border size. In pixels. Leave empty for default value.

  • IconClick an icon to select, click again to deselect.

  • Icon PositionChoose the position of the icon on the button. Choose from Left, or Right.

  • Hover Options

  • Quantity Button Text ColorControls the text color of the select fields. Leave empty for default value.

  • Quantity Button Background ColorControls the background color of the select fields. Leave empty for default value.

  • Quantity Button Border ColorControls the border color of the select fields. Leave empty for default value.

  • Add To Cart Button StyleSelect whether you want to custom style the add to cart button. Choose from Default or Custom.

  • Button SizeControls the button size. Choose from Small, Medium, Large, or XLarge.

  • Button SpanControls if the button spans the full width/remaining width of row. Choose from Yes, or No.

  • Button Border Size – Controls the border size. In pixels. Leave empty for default value.

  • IconClick an icon to select, click again to deselect.

  • Icon PositionChoose the position of the icon on the button. Choose from Left, or Right.

  • Button Styling – Use filters to see specific type of content.

  • Regular Options

  • Button Text ColorControls the text color of the button. Leave empty for default value.

  • Button Gradient Top ColorControls the top gradient color of the button. Leave empty for default value.

  • Button Gradient Bottom ColorControls the bottom gradient color of the button. Leave empty for default value.

  • Button Border ColorControls the border color of the button. Leave empty for default value.

  • Hover Options

  • Button Text Hover ColorControls the text color of the button on hover. Leave empty for default value.

  • Button Gradient Top Hover ColorControls the top gradient color of the button on hover. Leave empty for default value.

  • Button Gradient Bottom Hover ColorControls the bottom gradient color of the button on hover. Leave empty for default value.

  • Button Border Hover ColorControls the border color of the button on hover. Leave empty for default value.

View The Options Screen

Extras Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

The Woo Add To Cart Element does not have any specific Global Options. All Global options in the Element are pre-existing Global Options.

Avada Website Builder

657,142 Businesses Trust Avada

Get Avada
Avada Website Builder

657,142 Businesses Trust Avada

Get Avada
Avada Website Builder

657,142 Businesses Trust Avada

Get Avada