诗语，作者 Avada 文档 - 第 58 页共 79 页

Displaying and Configuring FAQs On Your Site

Avada includes a Frequently Asked Questions (FAQ) element that enables you to insert a FAQ posts anywhere within a page, multiple pages, anywhere on your site. A FAQ section is useful for when you』d like to display common questions or information about products or services you offer which your users frequently ask about. The FAQ post can be organized into categories and can be filtered by your users. To learn how to create individual FAQ posts and how to create a FAQ section on the page, continue reading below.
OverviewCreating An FAQ PostCreating An FAQ Section on Your WebsiteCustomizing FAQ Post Using Avada Page Options
Changing The FAQ Slug,Creating An FAQ PostBefore adding a FAQ element to page, you should first create one or more individual FAQ posts. FAQ posts are the common questions that you』d like to provide answers to, for your users. Continue reading below for more information on how to create a FAQ post.
Step 1 – Navigate to the 『FAQ』 tab on your WordPress Admin Sidebar and select 『Add New』 to add a new FAQ post.
Step 2 – In the 『Title』 field, enter the question you』d like to provide an answer for. For example, if you』re selling physical products, a good question could be How much does shipping cost, to the US?.
Step 3 – In the WordPress Content Editor, enter the answer to the question in the 『Title』 field. You can use the Avada Builder to design, layout add elements to the content of the FAQ.
Step 4 – Assign a category to the FAQ post. This will allow your users to filter the FAQ posts according to their category. To assign a category to a FAQ post, locate the 『FAQ Categories』 box on the right side of the page, and click the 『+Add New Category』. Alternatively, if the category already exists, simply check the corresponding checkbox.
Step 5 – Once done, click 『Publish』.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Creating An FAQ Section on Your WebsiteOnce you』ve created your FAQ posts, you will use the FAQ element to display anywhere within a page, multiple pages of your website. This element has a number of options for you to configure and can be used with any column element. Continue reading below to learn how to deploy the FAQ element.
Step 1 – Create a new page or edit an existing one.
Step 2 – Add a new container, or add a column to an existing container. The FAQ element can be used with any column size, such as 1/1 or 1/2 etc.
Step 3 – For the column you』d like to add the FAQ element to, click the 『+ Element』 to bring up the 『Elements』 window. Locate the FAQ element and click it to open it』s options window.
Step 4 – Configure the options to your preference. You can for example choose which categories to include or exclude, display or hide featured images, element visibility, and more.
Step 5 – Once done, click 『Save』.,Customizing FAQ Post Using Avada Page OptionsWhen creating or editing a FAQ item, scroll below the WordPress Content Editor to find the FAQ tab inside the Avada Page Options box. Inside that tab are all the individual FAQ settings, and page settings that can be set for each FAQ item. Continue reading below to know more about the options available for FAQ tab in Avada Page Options.
IMPORTANT NOTE: Avada Page Options will override the global options set in Avada Options.Show First Featured Image – Choose whether to show the 1st featured image on the FAQ post, or not.
Featured Image Dimensions – Allows you to set the dimensions of the featured image in pixels or percentage, ex: 100% or 100px. Or Use 「auto」 for automatic resizing if you added either width or height.
Video Embed Code – Allows you to attach a video through inserting YouTube or Vimeo embed code.
Show Previous/Next Pagination – Allows you to show or hide the post navigation.
Show Post Meta – Allows you to show or hide the post meta.
Show Social Share Box – Allows you to show or hide the social share box.
Show Author Info Box – Allows you to show or hide the author info box.
Show Related Posts – Allows you to show or hide related posts on this post.
Show Comments – Allows you to show or hide comments area.,Changing The FAQ SlugAs of Avada 7.0, you can also now change the FAQ slug to whatever you prefer. You will find the FAQ Slug option in the Avada Options, under the Extras > Miscellaneous tab.,Disabling The FAQ Custom Post TypeIf you wish to disable the FAQ Post Type entirely, just head to Options > Advanced > Post Types, and here you can turn the FAQ post type off. This will disable the Post type and remove it from the menu.

Woo Checkout Shipping Element

The Woo Checkout Shipping Element is one of five Woo Checkout Elements, and allows you to add an independent shipping section to your Woo Checkout page layout. Please read on for all the details on this useful Element.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Checkout Shipping ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Checkout Shipping ElementThe Avada Woo Checkout Shipping Element does exactly what it says – allow you to place a Shipping input section into your WooCommerce Checkout Layout. This is an area where the user can add any notes pertaining to the shipping and delivery of the item.

Read below for a description of all Element options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsGeneral Tab
Margin – Enter values including any valid CSS unit, ex: 4%.
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
Form Field Background Color – Controls the background color of the form input fields. Leave empty for default value.

Form Field Text Color – Controls the text color of the form input fields. Leave empty for default value.

Field Border Color – Controls the border color of the form input fields. Leave empty for default value.

Field Border Color On Focus – Controls the border color of the form input fields on focus. 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 5.

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 Checkout Shipping 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 Sorting Element

The Woo Sorting Element replicates the sorting options of a WooCommerce Shop page, and allows you to add product sorting into your custom Shop Layout.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Sorting ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Sorting ElementThis Element is designed to be used in your Woo Shop Layout. It replicates the Woo Sorting options normally available in the Avada Global Options. It has a range of display and styling options.
To use it, simply place the Element into your Layout on the designated WooCommerce Shop page. Set the options as you desire. See the indiviudual options below.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsGeneral TabSorting Options – Select sorting options that you want to be displayed in the sorting list box. Choose from Default, Name, Price, Date, Popularity, and Rating.Sorting Elements – Choose the display and ordering of sorting elements. You can enable or disable any of the sorting options, and you can also order them as you wish. Choose from Product View, Product Order By, and Product Count.Product Count Selection – Select the number of product count to display. This controls the numbers displayed in the Show XX Products dropdown boxes.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 TabMargin – Control margins around the Element. In pixels or percentage, ex: 10px or 10%.Dropdown Background Color – Controls the background color for the dropdowns.Dropdown Hover / Active Background Color – Controls the background color for the dropdowns hover / active states.Dropdown Text Color – Controls the text color for the dropdowns.Dropdown Border Color – Controls the border color for the dropdowns.View The Options ScreenGlobal OptionsThere are no Global Options for the Woo Sorting 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 Cart Shipping Element

The Woo Cart Shipping Element is a very simple Element that allows you to add a Shipping details input section to your WooCommerce Cart Layout.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Cart Shipping ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Cart Shipping ElementThe Avada Woo Cart Shipping Element does exactly what it says – allow you to place a Shipping input section into your WooCommerce Cart Layout.
A shipping address can be different to a billing address, and this allows the user to input the correct Shipping address. 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 style it to your liking. Read below for a description of all Element options.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Element OptionsGeneral Tab
Margin – Enter values including any valid CSS unit, ex: 4%.
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 TabForm Field Background Color – Controls the background color of the form input fields.Form Field Text Color – Controls the text color of the form input fields.Field Border Color – Controls the border color of the form input fields.Field Border Color On Focus – Controls the border color of the form input fields on focus.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 5.

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 Shipping 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 Product Images 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 Product Images 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 Product Images ElementThe Woo Product Images Element is used to display any images attached to your WooCommerce products. This can be a single image, or multiple. There are numerous options for thumbnails, columns, sale badges and layouts. See below for a full list of Element options.
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.
You can deploy this Element 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 TabProduct Images Layout – Set the layout for your product images. Choose from Default, Avada, or WooCommerce.Product Images Zoom – Turn on to enable the WooCommerce product images zoom feature. IMPORTANT NOTE: Every product image you use must be larger than the product images container for zoom to work correctly. See this post for more information.
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 TabProduct Images Max Width – Controls the max width of the single product page image gallery. For the image gallery zoom feature to work, the images you upload must be larger than the gallery size you select for this option. IMPORTANT NOTE: When this option is changed, you may need to adjust the Single Product Image size setting in WooCommerce Settings to make sure that one is larger and also regenerate thumbnails. See this post for more information.Product Images Thumbnail Position – Set the position of the product images thumbnails with respect to the gallery images. Choose from Default, Top, Right, Bottom, or Left.Product Images Thumbnails – Controls the number of columns of the product images thumbnails. In order to avoid blurry thumbnails, make sure the Product Thumbnails size setting in WooCommerce Settings is large enough. It has to be at least WooCommerce Product Gallery Size setting divided by this number of columns.Product Images Thumbnail Column Width – Controls the width of the left/right column of product images thumbnails as a percentage of the full gallery width.Display Sale Badge – Turn on to enable the WooCommerce sake badge.
Margin – In pixels or percentage, ex: 10px or 10%.
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.

Widget Area Element

Not to be confused with the Widget Element released in Avada 6.2, there are 5 areas of the theme that are widget ready.
A Widget Area is set up by going to the Appearance > Widgets > Add New Widget Area section of your sites WordPress Dashboard. Once a Widget Area is created, you then assign your choice of widgets to the Widget Area, and these widgets will then be displayed wherever decided within the website.
Widget Area Element = Predefined section that displays a collection of widgets.
Widget Element = A widget, any widget, displayed anywhere on your site.

Selling on

Privacy | Terms

This displays a predefined Footer Widget Area set up, in the Dashboard > Appearance > Widgets section,View Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Widget Area ElementStep 1 – Create a new page or post, or edit an existing one.
Step 2 – Insert a Container and select your desired column layout.
Step 3 – Click the 『+ Element』 section to bring up the Elements window. Locate the 『Widget Area』 element and click it to open the options window.
Step 4 – Select the widget area you』d like to display from the 『Widget Area Name』 dropdown box. there are also a few other options you can configure.
Step 5 – Once you have finished configuring the options, click 『Save』 to insert the element into the page. Preview the page to view the Widget Area, and remember you can come back into the element to fine tune it.
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.
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 Default setting will use the global settings assigned for this element in the Options > Avada Builder Elements > Widget Area Element section. Also, 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.

Widget Area Name – Choose the name of the widget area to display. This list will contain all your existing widgets.

Widget Title Size – Controls the size of widget titles. In pixels ex: 18px. Leave empty for the default value.

Widget Title Color – Controls the color of widget titles.

Background Color – Choose a background color for the widget area.

Padding – 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.

CSS Class – Add a class to the wrapping HTML element.

CSS ID – Add an ID to the wrapping HTML element.
View The Options ScreenGlobal OptionsLocation: WordPress Dashboard > Avada > Options > Avada Builder Elements > Social Links Element
The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

Widget Title Size – Controls the size of widget titles. In pixels. Enter value including any valid CSS unit, ex: 18px

Widget Title Color – Controls the color of widget titles.
View The Options Screen,Useful Links & ResourcesWidget vs Widget AreaCreating Widget AreasAssigning Widget AreasPre-made vs Custom Widget Areas

fusion_builder_all_elements

Applied to all registered elements before they are added to Avada Builder library. Useful for removing or adding elements to the library.
Copy to Clipboardfunction filter_function_name( $elements ) {
// Process $elements here

return $elements;
}
add_filter( 'fusion_builder_all_elements', 'filter_function_name' );
x 1function filter_function_name( $elements ) {2 // Process $elements here34 return $elements;5}6add_filter( 'fusion_builder_all_elements', 'filter_function_name' );7

Woo Checkout Tabs Element

The Woo Checkout Tabs Element allows you to add an a series of checkout related tabs to your WooCommerce Checkout page. It』s an all-in-one Element which has the same components that the other four Woo Checkout Elements have seperately – the Woo Checkout Billing Element, the Woo Checkout Order Review Element, the Woo Checkout Payment Element, and the Woo Checkout Shipping Element. With this single Element however, you can replicate the standard Woo Checkout.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Checkout Tabs ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Checkout Tabs ElementTo use the Woo Checkout Tabs Element couldn』t be easier. Just add the Element to your assigned WooCommerce Checkout page (replacing the shortcode that』s already there). There are a range of layout and design options to style it exactly how you like. You can add Titles, or other Elements above or below (like the Woo Notices Element) to complete your page.
On the front end, the user will be led through the tabs as they complete each one. If you』d prefer to emulate the one page WooCommerce checkout, you can use the other afforementioned Woo Checkout Elements to create the same process on one page.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Element OptionsGeneral Tab
Layout – Choose the tabs layout. Choose from Vertical, or Horizontal.

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

Show Tab Content Headings – Choose to have tab content headings displayed. Choose from Yes, or No.

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 – Control margins around the Element. In pixels or percentage, ex: 10px or 10%.

Background Color – Controls the background tab color.

Inactive Background Color – Controls the inactive background tab 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 content heading. 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.

Link Color – Controls the link color of the payments text.

Link Hover Color – Controls the link hover color of the payments text.

Form Field Background Color – Controls the background color of the form input fields.

Form Field Text Color – Controls the text color of the form input fields.

Field Border Color – Controls the border color of the form input fields.

Field Border Color On Focus – Controls the border color of the form input fields on focus.

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

Payment Label Background Color – Controls the payment_label background color of the payments.

Payment Label Background Hover Color – Controls the payment label background hover color of the payments label.

Payment Label Color – Controls the payment label color.

Payment Label Hover Color – Controls the payment label hover color.

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

Payment Description Background Color – Controls the label background color of the payments description.

Payment Description Text Color – Controls the description text color of the payments.
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 5.

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 Checkout Tabs 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 Stock 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 Stock 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 Stock ElementThe Woo Stock Element is perhaps the simplest Woo Element of all. It』s sole purpose is to display the amount of stock a product has. This can also be configured vua the Woo Add To Cat Element, but this Element offers it as a discrete option for layout fleixibility.
An 『Out of Stock』 or 『Available on Backorder』 notice will display if the product has one of these options selected in the Stock Status field in the Product Inventory Tab.
If 『Enable Stock management at product level』 is selected in the Manafe Stock field of the product Inventory tab, then the Element will display the number of units available.
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
Stock Font Size – Controls the font size of the stock 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.

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 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.

Woo Cart Table Element

The Woo Cart Table Element allows you to build and display a table on your cart page that displays the items currently in the Cart. This table can be customized to include or exclude various items, such as Product, Price, Remove Icon, Quantity, Subtotal, Product Title, or Product Image.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Cart Table ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Cart Table ElementThe Avada Woo Cart Table Element allows you to place a customized product table into your WooCommerce Cart Layout. It displays the items currently added to the cart. There are several product details that can be enabled or disabled in the table, allowing you to customize the content, and there is an area to place a custom Empty Cart Message for when the cart is empty.
To use this Element, simply add it to a Column in your Cart Page Layout. You can control margins around the Element, turn headers on or off, and decide which table columns to show, as well as styling it to your liking. Read below for a description of all Element options.
767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada767,677 Businesses Trust Avada
Get Avada,Element OptionsGeneral TabTable Columns – Choose the order of cart table columns. You can Enable or Disable any of the items in the list. These are Product, Price, Quantity, Subtotal, Remove Icon, Product Title, and Product Image.
Show Table Headers – Choose to have table headers displayed. Choose from Show, or Hide.

Empty Cart Message – Show a message when the cart is empty. Use the Editor to customize the Empty Cart message.
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 – Enter values including any valid CSS unit, ex: 4%.
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 content text.Font Size – Controls the font size of the content 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 Table 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