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 Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Woo Add To Cart ElementThe 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.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Element OptionsLocation: 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 ScreenVariations TabVariations 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 Layout – Select the layout for the variations. Floated will have the label and select side by side. Stacked will have one per row.
Label Width – Leave empty for automatic width. Enter values including any valid CSS unit, ex: 10px. or 20%.
Text Alignment – Select the text alignment for the variation label and variation swatches.
Label Text Color – Controls the text color of the variation labels. Leave empty for default value.
Label Typography – Controls the typography of the label text. Leave empty for the global font family.
Font Family – Controls the font family of the label text. Leave empty for the global font family.
Font Size – Controls the font size of the label text. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.
Select Style – Select whether you want to custom style the select fields for variations. Choose from Default, or Custom.
Select Height – Enter values including any valid CSS unit, ex: 10px. Leave empty for default value
Select Font Size – Controls the font size of the select field. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.
Select Text Color – Controls the text color of the select fields. Leave empty for default value.
Select Background Color – Controls the background color of the select fields. Leave empty for default value.
Select Border Size – Controls the border size of the select fields. Leave empty for default value.
Select Border Color – Controls the border color of the select fields. Leave empty for default value.
Select Border Radius – Enter values including any valid CSS unit, ex: 10px.
Swatch Style – Select if you want to custom style the Avada variation swatches. Choose from Default, or Custom.
Swatch Item Margin – In pixels or percentage, ex: 10px or 10%.
Swatch Background Color – Controls the background color of the color, image and button swatch fields. Leave empty for default value.
Swatch Active Background Color – Controls the background color of the color, image and button swatch fields when active.
Swatch Border Size – Controls 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 Color – Controls the border color of the color, image and button swatch fields when active. Leave empty for default value.
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. Leave empty for default value.
Button Swatch Text Color – Controls the text color of the button swatches. Leave empty for default value.
Button Swatch Active Text Color – Controls the text color of the button swatches when active. Leave empty for default value.
Variation Clear – Controls how you want to disable the variation clear link. Choose from Absolute, Inline, or Hide.
Clear Content – Controls the content type for the clear link. Default will use WooCommerce text string. Choose from Default, Text, or Icon.
Clear Icon – Click an icon to select, click again to deselect.
Clear Text – Custom text to use for the variation clear link.
Clear Margin – Controls the margin of the clear link. Enter values including any valid CSS unit, ex: 10px or 10%.
Clear Color – Controls the text color of the clear link. Leave empty for default value.
Clear Hover Color – Controls the text color of the clear link on hover. Leave empty for default value.
View The Options ScreenDetails Tab
Details Padding – Controls the padding of the variation details area. Enter values including any valid CSS unit, ex: 10px or 10%.
Details Background Color – Controls the background color of the variation details area.
Details Border Size – Controls the border size of the variation details area.
Details Border Color – Controls the border color of the variation details area.
Details Border Radius – Enter values including any valid CSS unit, ex: 10px.
Details Alignment – Select the content alignment within the details area.
Description Text Color – Controls the text color of the variation description. Leave empty for default value.
Description Typography – Controls the typography of the description text. Leave empty for the global font family.
Font Family – Controls the font family of the variation description. Leave empty for the global font family.
Font Size – Controls the font size of the variation description. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.
Description Order – Display order for description. Can be before price/stock or after. Choose from Before Price or After Price.
Show Price – Make a selection to show or hide the variation price.
Price Text Color – Select a color for the price text. Leave empty for default value.
Price Typography – Controls the typography of the price text. Leave empty for the global font family.
Font Family – Controls the font family of the price text. Leave empty for the global font family.
Font Size – Controls the font size of the price text. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.
Show Sale Old Price – Make a selection to show or hide sale old price.
Sale Old Price Position – Select if the sale old price should be before or after the regular price. Choose from Before Regular or After Regular.
Sale Old Price Text Color – Select a color for the sale old price text. Leave empty for default value.
Sale Old Price Typography – Controls the typography of the sale old price text. Leave empty for the global font family.
Font Family – Controls the font family of the sale old price text. Leave empty for the global font family.
Font Size – Controls the font size of the sale old price text. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.
Stock Text Color – Select a color for the stock text. Leave empty for default value.
Stock Typography – Controls the typography of the stock text. Leave empty for the global font family.
Font Family – Controls the font family of the stock text. Leave empty for the global font family.
Font Size – Controls the font size of the stock text. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.
View The Options ScreenCart TabCart Margin – In pixels or percentage, ex: 10px or 10%.
Cart Layout – Select 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 Alignment – For 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 Style – Select whether you want to custom style the quantity field. Choose from Default, or Custom.
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. Leave empty for default value.
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. Leave empty for default value.
Quantity Button Border Size – Controls the border size of the select fields.
Quantity Button Styling – Use filters to see specific type of content.
Regular Options
Quantity Button Text Color – Controls the text color of the select fields. Leave empty for default value.
Quantity Button Background Color – Controls the background color of the select fields. Leave empty for default value.
Quantity Button Border Color – Controls the border color of the select fields. Leave empty for default value.
Add To Cart Button Style – Select whether you want to custom style the add to cart button. Choose from Default or Custom.
Button Size – Controls the button size. Choose from Small, Medium, Large, or XLarge.
Button Span – Controls 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.
Icon – Click an icon to select, click again to deselect.
Icon Position – Choose the position of the icon on the button. Choose from Left, or Right.
Hover Options
Quantity Button Text Color – Controls the text color of the select fields. Leave empty for default value.
Quantity Button Background Color – Controls the background color of the select fields. Leave empty for default value.
Quantity Button Border Color – Controls the border color of the select fields. Leave empty for default value.
Add To Cart Button Style – Select whether you want to custom style the add to cart button. Choose from Default or Custom.
Button Size – Controls the button size. Choose from Small, Medium, Large, or XLarge.
Button Span – Controls 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.
Icon – Click an icon to select, click again to deselect.
Icon Position – Choose 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 Color – Controls the text color of the button. Leave empty for default value.
Button Gradient Top Color – Controls the top gradient color of the button. Leave empty for default value.
Button Gradient Bottom Color – Controls the bottom gradient color of the button. Leave empty for default value.
Button Border Color – Controls the border color of the button. Leave empty for default value.
Hover Options
Button Text Hover Color – Controls the text color of the button on hover. Leave empty for default value.
Button Gradient Top Hover Color – Controls the top gradient color of the button on hover. Leave empty for default value.
Button Gradient Bottom Hover Color – Controls the bottom gradient color of the button on hover. Leave empty for default value.
Button Border Hover Color – Controls the border color of the button on hover. Leave empty for default value.
View The Options ScreenExtras Tab
Animation Type – Controls the column』s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom, Flip Vertically, Flip Horizontally, or Light Speed.
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 ScreenGlobal OptionsThe Woo Add To Cart Element does not have any specific Global Options. All Global options in the Element are pre-existing Global Options.