Author 詩語

Woo Rating Element

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 Rating Element.,IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.,View The Woo Rating Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Woo Rating ElementThe Woo Rating Element is a simple Element to display WooCommerce Ratings anywhere in your Layout. This displays the avarage rating and the number of reviews, and can be customized to suit. See below for the full list of Element Options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy the Layout Elements only once within each Layout. 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
Show Reviews Count – Make a selection to show or hide reviews count.

Placeholder Text – Make a selection to show or hide placeholder text if no review is added yet. Choose from Yes, or No.

Alignment – Make a selection for content alignment. Choose from Text Flow, Left, Center, or Right.

Margin – In pixels or percentage, ex: 10px or 10%.

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 ScreenDesign Tab
Icon Size – Controls the size of the icon. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.
Icon Color – Choose icon color for rating. Leave empty for default value.Reviews Count Font Size – Controls the size of the reviews count text. Enter value including any valid CSS unit, ex: 20px. Leave empty for default value.Reviews Count Text Color – Choose color for reviews count text. Leave empty for default value.
Reviews Count Hover Text Color – Choose color for reviews count hover text. 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 Element. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – Controls the speed of animation on the Element. 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 Rating Element does not have any specific Global Options.

Widget Element

The Widget Element was released with Avada 6.2, and offers you the ability to add a single widget directly into your page content, and edit it live on the page. Whereas the Widget Area Element adds a pre-populated Widget Area into your content, this Element allows you to add a single widget directly into your content and populate and configure it through the Element.
This shows the Category Widget, displayed as a dropdown.
CategoriesCategories
Select Category
Avada
WordPress
Design
ThemeFusion
Plugins
Customer Spotlight
Avada Builder
Document Examples
WooCommerce
Gutenberg
Tutorial
Interview
German
Demos
Prebuilt Websites
Food
Creative,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Widget ElementStep 1. Edit an existing page. Ensure that Avada Builder is activated, by clicking the 『Use Avada Builder』 button on top of the page editor.
Step 2. Choose the Container and Column you wish to add the Widget Element into. Click on Add new Element.
Step 3. Choose Widget from the Elements List.
Step 4. The General Tab is the place to choose the type of widget you want to add. Select you widget from the drop down box. The widgets you see here will depend on what plugins you have installed and active. When you choose an element, any customizable fields for that widget will appear.
Step 5. Customize the widget as desired. You can also set Element Visibility in this tab, or add a CSS Class or CSS ID to the instance of the element for further customization with Custom CSS.
Step 6. The next step is to customize the design of the Widget. On the Design Tab, you will find a variety of styling options, from background color, radius, border and alignment options.
Step 7. Click Save when you are finished customizing your Widget. It will appear in the row of the Container you added it to. Preview the page to view, and you can always come back and edit the Widget to fine tune the look and function.
Read below for a detailed description of all element options.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. 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: 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, and so the options screen may look somewhat different.
General Tab
Widget – Choose the type of widget you』d like to add.

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 – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.
View The Options ScreenDesign Tab
Display Widget Title – Choose to enable or disable the widget title. Specifically useful for WP』s default widget titles.

Padding – Controls the padding for this widget container. Enter value including any valid CSS unit, ex: 10px.

Margin – Controls the margin for this widget container. Enter value including any valid CSS unit, ex: 10px.

Background Color – Controls the background color for this widget container.

Background Radius – Controls the background radius for this widget container.

Border Size – Controls the border size for this widget container.

Border Style – Controls the border style for this widget container. Choose from None, Solid, Dotted or Dashed.

Border Color – Controls the border color for this widget container.

Divider Color – Controls the color of dividers in this widget container. Leave empty for the Theme Options default value or no dividers when using the vertical menu widget.

Content Align – Controls content alignment for this widget container. Choose from Left, Right, Center or Inherit. Inherit means it will inherit alignment from its parent element.

Mobile Content Align – Controls mobile content alignment for this widget container. Choose from Left, Right, Center or Inherit. Inherit means it will inherit alignment from its parent element.
View The Options ScreenGlobal OptionsThere are no Global Options for the Widget Element.

Woo Featured Products Slider Element

The Woo Featured Products Slider Element is a great way for you to showcase your WooCommerce products. It』s very similar to the Woo Carousel Element, only with this Element it』s automatically using your featured products for the content. You can also choose to show or hide information such as category, price and buttons. Read below to discover more about this awesome eCommerce Element!
IMPORTANT NOTE: To set a product as 『Featured』, navigate to the 『Products』 tab on your WP Admin Sidebar and click the 『Star』 icon.,View the Woo Featured Products Slider Element in Action!View Element Demo Page!,OverviewHow To Use The ElementGeneral/Styling OptionsGlobal OptionsUseful Links & Resources,How to Use the Woo Featured Products Slider ElementTo use the Woo Featured Products Slider Element, please follow the simple steps below.
Step 1 – Navigate to the Products section of your WordPress admin. Look for the Featured column, that is the one with the star icon (see screenshot below).
Step 2 – Click the star icon next to all products that you want to be featured. You need to do this one product at a time, as the page will refresh each time. Doing this makes the product a featured product.
Step 3 – Next, go to the page you want the featured products to appear.
Step 4 – Click on the Woo Featured Products Slider Element via the Fusion Builder, and select your preferred options.
Step 5 – Click Save. Your featured products will now appear in a slider on your page.
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. 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: 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, and so the options screen may look somewhat different.

Picture Size – Choose the picture size for the carousel. Fixed = width and height will be fixed. Auto = width and height will adjust to the image.
Categories – Select a category or leave blank for all.
Number of Products – Select the number of products to display.

Product Offset – The number of products to skip. ex: 1

Order By – Defines how products should be ordered. NOTE: If Order by Price is not working, please regenerate the Product Lookup Table.

Order – Defines the sorting order of products. Choose from Descending, or Ascending.

Include Out Of Stock Products – Choose to include or exclude products which are out of stock.

Carousel Layout – Choose to show titles on rollover image, or below image.

Carousel Autoplay – Choose whether or not to autoplay the carousel.

Maximum Columns – Select the number of max columns to display. From 1 – 6.

Column Spacing – Insert the amount of spacing between items without 『px』. ex: 13.

Scroll Items – Insert the number of items to scroll. Leave empty to scroll the number of visible items.

Show Navigation – Choose whether or not to show navigation buttons on the carousel.

Mouse Scroll – Choose to enable mouse drag control on the carousel. IMPORTANT: For easy draggability, when mouse scroll is activated, links will be disabled.

Show Categories – Choose to show or hide the categories.

Show Price – Choose to show or hide the price.
Show Sale Badge – Choose to show or hide the sale badge.
Show Buttons – Choose to show or hide the icon buttons.

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.
View The Options ScreenGlobal OptionsThere are no Global Options for the Woo Featured Products Slider Element.,Useful Links & ResourcesBuild an Online Store with AvadaMaking the Most of WooCommerce with AvadaInstall & Setup WooCommerceAvada WooCommerce Options

User Lost Password Element

Avada comes bundled with a group of Login and Registration Elements to allow you to quickly and easily setup custom login, registration and lost password pages. These are the User Login Element, the User Lost Password Element, and the User Register Element. Used together, this suite of tools gives you a powerful and easy ways to administer your users access to your site. Read below to discover more about the User Lost Password Element!,User Register,Read about the User Register Element!

Read about the User Login Element!,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The User Lost Password ElementStep 1 – Create a new page or edit an existing one.
Step 2 – Add a container then select your desired column layout.
Step 3 – Click the 『+ Element』 button to bring up the Elements window. Locate the 『User Lost Password』 Element and click it to bring up its options window.
Step 4 – Work you way one at a time through the options to configure the User Lost Password Element to your liking.
Step 5 – Once you have finished configuring the options, click 『Save』 to insert the element into the page. Preview the page to view the User Lost Password Element output, and remember you can come back into the element to fine tune it.
IMPORTANT NOTE: As of Avada 7.4, you can now also add Google reCAPTCHA to the User Lost Password Element. To enable this, simply head to the Global Options, and Form > Google reCAPTCHA, and turn the reCAPTCHA For User Elements option to Yes.767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy as many individual Elements in pages and posts as you need, there is no limit. 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: 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, and so the options screen may look somewhat different.

Text Align – Choose the alignment of all content parts. 「Text Flow」 follows the default text align of the site. 「Center」 will center all elements.

Heading – Choose a heading text.

Heading Color – Choose a heading color.

Caption – Choose a caption text.

Caption Color – Choose a caption color.

Show Labels – Controls if the form field labels should be shown.

Show Placeholders – Controls if the form field placeholders should be shown.

Button Span – Choose to have the button span the full width.

Form Background Color – Choose a background color for the form wrapping box. Leave empty for the default value.

Link Color – Choose a link color.

Redirection Link – Add the URL to which a user should be redirected to after form submission. Leave empty to use the same page.

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.
View The Options ScreenGlobal OptionsThere are no Global Options for the User Lost Password Element.

Woo Tabs Element

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 Tabs 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 Tabs ElementThe Woo Tabs Element allows you to display the WooCommerce Tabs, that are usually found under the product image and short descriptions. These tabs can display the full descriptions, any additional information for variable products, and any reviews that have been left.
With this Element, you can configure the layout to be horizontal, or vertical, and customize the area with a large range of design options.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy the Layout Elements only once within each Layout. 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
Display Tabs – Choose which tabs should be displayed. Choose from Description, Additional Information or Reviews.

Layout – Choose the tabs layout. Choose from Horizontal or Vertical.

Show Tab Content Headings – Choose to have tab content headings displayed.

Space Between Nav and Content – Set space between tab nav and tab content sections. Leave empty for default value.

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 ScreenDesign Tab
Margin – In pixels or percentage, ex: 10px or 10%.

Background Color – Controls the background tab color.

Inactive Background Color – Controls the inactive tab background color.

Inactive Nav Text Color – Controls the color of the inactive nav text color, ex: #000.

Active Nav Text Color – Controls the color of the active nav text color, ex: #000.

Border Color – Controls the color of the border, ex: #000.

Nav Padding – Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default values.

Content Padding – Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default values.

Content Heading Color – Controls the color of the content heading, ex: #000.

Content Heading Typography – Controls the typography of the heading text. Leave empty for the global font family.

Font Family – Controls the font family of the content heading.

Font Size – Controls the font size of the content heading. Enter value including any valid CSS unit, ex: 20px.

Content Text Color – Controls the color of the content text, ex: #000.

Content Text Typography – Controls the typography of the content text. Leave empty for the global font family.

Font Family – Controls the font family of the content text.

Font Size – Controls the font size of the content text. Enter value including any valid CSS unit, ex: 20px.

Review Stars Color – Controls the color of review stars, ex: #000.
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 Element. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – Controls the speed of animation on the Element. 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 Tabs Element does not have any specific Global Options.

Woo Cart Totals Element

The Woo Cart Totals Element allows you to place a Totals section anywhere on your custom WooCommerce Cart page. There is a range of alignment and design options for this Element, which makes it a very flexible Element.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Cart Totals ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Cart Totals ElementThe Woo Cart Totals Element has a pretty simple job, and that』s to dispay the cart totals. This is usually presented at the bottom of the Cart, and its from here, the user proceeds to the Checkout.
There are many display and styling options with this Element, allowing you to customize it to suit your page and your style. To use this Element, simply add it to a Column in your Cart Page Layout. You can control margins around the Element, as well as styling it to your liking. You can hide or show the Buttons, as well as control their alignment and size. Read below for a description of all Element options.
767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,Element OptionsGeneral Tab
Show Buttons – Choose to show or hide buttons.

Buttons Layout – Select the layout of buttons.

Buttons Horizontal Align – Change the horizontal alignment of buttons within its container column. Choose from Flex Start, Center, Flex End, Space Between, Space Around, or Space Evenly.

Buttons Horizontal Align – Change the horizontal alignment of buttons within its container column. Choose from Flex Start, Center, or Flex End.

Button Span – Choose to have the button span the full width.

Buttons Margin – Set the margins around the buttons. In pixels or percentage, ex: 10px or 10%.
Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Avada Builder Elements tab in the Global Options.
CSS Class – Allows you to add a class to the wrapping HTML.

CSS ID – Allows you to add an ID to the wrapping HTML.
View The Options ScreenDesign Tab
Margin – Set the margins around the Element. In pixels or percentage, ex: 10px or 10%.

Table Cell Padding – Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default values.

Heading Cell Background Color – Controls the heading cell background color.

Table Cell Background Color – Controls the table cell background color.

Table Border Color – Controls the color of the table border, ex: #000.

Heading Cell Text Color – Controls the color of the heading text, ex: #000.

Heading Cell Typography – Controls the typography of the heading. Leave empty for the global font family.

Font Family – Controls the font family of the heading.

Font Size – Controls the font size of the text. Enter value including any valid CSS unit, ex: 20px.

Text Color – Controls the color of the text, ex: #000.

Content Typography – Controls the typography of the content text. Leave empty for the global font family.

Font Family – Controls the font family of the text.

Font Size – Controls the font size of the text. Enter value including any valid CSS unit, ex: 20px.
View The Options ScreenExtras Tab
Animation Type – Controls the Element』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 Element. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – Controls the speed of animation on the Element. 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 OptionsThere are no Global Options for the Woo Cart Totals Element. Global Options for WooCommerce as a whole are found at Avada > WooCommerce > General WooCommerce, and Avada > WooCommerce > WooCommerce Styling.,Useful Links & ResourcesHow To Use WooCommerce With Avada
The Avada WooCommerce Builder

Avada WooCommerce Options
How To Use WooCommerce Attribute Swatches

Woo Related Products Element

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 Related Products 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 Related Products ElementThe Woo Related Products Element allows you to display any related products anywhere in your layout. A related product is one that is in the same category, or shares a tag. You can display the related products in Columns, or as a Carousel. A similar Element is the Woo Upsells Element, which is identical in Element options, but it displays products you select as upsells in WooCommerce products.
To use the Woo Related Products Element, simply add the Element to a Column in your layout and configure the Element options to display the related products as you desire. As you can see below in the Element Options, there are a range of Options to control both the functionality and design of the Related Products.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
You can deploy the Layout Elements only once within each Layout. 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 TabLayout – Controls the layout style for products. Choose from Columns, or Carousel.
Number of Products – Controls the number of products that display on a single product. Choose from 1-30.

Maximum Columns – Controls the number of columns for products layout. Choose from 1-6.

Column Spacing – Controls the amount of spacing between columns for products (in pixels). (For Carousel Layout)

Autoplay – Turn on to autoplay products carousel. Choose from Yes or No. (For Carousel Layout)

Show Navigation – Turn on to display navigation arrows on the carousel. Choose from Yes or No. (For Carousel Layout)

Mouse Scroll – Turn on to enable mouse drag control on the carousel. Choose from Yes or No. (For Carousel Layout)
Scroll Items – Controls the number of items that scroll at one time. From 0-15. Set to 0 to scroll the number of visible items. (For Carousel Layout)
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 ScreenDesign TabEnable Heading – Turn on if you want to display default heading.HTML Heading Size – Choose the size of the HTML heading that should be used, h1-h6.
Margin – Enter values including any valid CSS unit, ex: 4%.
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 Element. Choose between Top, Right, Bottom, Left, or Static.

Speed of Animation – Controls the speed of animation on the Element. 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 Related Products Element does not have any specific Global Options.

Woo Add To Cart Element

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.