Avada 文檔

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.

Woo Product Grid Element

The Woo Product Grid Element allows you to add a Product Grid into your content, as the main shop page, or just wherever you want a grid of WooCommerce Products. You have full control over which products display, and how they are presented.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The Woo Product Grid ElementElement OptionsGlobal OptionsUseful Links & Resources,How To Use The Woo Product Grid ElementThe Woo Product Grid Element can be the basis for you main shop page, but you can also use it on any page where you want to display a grid of products. To add it into your main shop page, simply edit the assigned WooCommerce Shop page, design your layout, and add the Element into a Column.
The Products displayed can be pulled by Category or Tag, and you can select or exclude specific categories or tags for full flexibility. You can also specify how many products you want to display in total, and how many columns to use, how they are ordered, and what type of pagination to use. There are also a range of design options for styling.
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 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
Pull Products By – Choose to show products by category or tag.

Categories – Select a category or leave blank for all.

Exclude Categories – Select categories to exclude.

Tags – Select a tag or leave blank for all.

Exclude Tags – Select a tag to exclude.

Number of Products – Select the number of products to display.

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

Number of Columns – Set the number of columns per row.

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

Order By – Defines how products should be ordered. Choose from Default Sorting, Date, Title, Random, ID, Price, Popularity (sales), and Average Rating.

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

Pagination Type – Select the type of pagination. Choose from No Pagination, Pagination, Infinite Scrolling, or Load More Button.

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
Show Thumbnail – Display the product featured image. Choose from Yes, or No.

Show Title – Display the product title below the featured image. Choose from Yes, or No.

Show Price – Choose to show or hide the price. Choose from Yes, or No.

Show Rating – Choose to show or hide the rating. Choose from Yes, or No.

Show Buttons – Choose to show or hide Add to Cart / Details buttons. Choose from Yes, or No.

Grid Box Color – Controls the background color for the grid boxes.

Grid Border Color – Controls the color of borders for the grid boxes.

Grid Separator Style – Controls the line style of grid separators. Note: Separators will display, when buttons below the separators is displayed and Box Design mode set to Classic. Choose from Default, No Style, Single Border Solid, Double Border Solid, Single Border Dashed, Double Border Dashed, Single Border Dotted, Double Border Dotted, or Shadow.

Grid Separator Color – Controls the line style color of grid separators. Note: Only work when Box Design mode set to Classic.

Margin – Set the margins around the Element. 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 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 Product Grid 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 Carousel Element

The Woo Product Carousel Element is a great way for you to showcase your WooCommerce products. You have the option to show only one category, a combination of them, or to show all of them. 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!,View the Woo Product Carousel Element in Action!View Element Demo Page!,OverviewHow To Use The Element
Element Options
Global OptionsUseful Links & Resources,How To Use The Woo Product Carousel Element
Adding a WooCommerce carousel is now made easy with the Fusion Builder Woo Product Carousel Element.

Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Select the container and column you would like to place the shortcodes.
Step 3 – Click on the + Element button at the bottom of the column. Select or search for Woo Product Carousel.
Step 4 – Now you have the options window open. Here you configure the product carousel, by selecting options. The Picture Size is the first option, and the best choice here will depend on both your design wishes and the sizes of your product images. Try both to see what the differences are. The other main options are to choose the category, or categories, you wish to display in the carousel, and the number of products you want to display.
Step 5 – There are also a range of other minor options, to do with layout and spacing etc. Go through each on of these to make your choices.
Step 6 – Once you have configured your carousel, click Save.
Step 8 – If you preview your page, you will see the result of the Woo Product Carousel Element, and you can always return to edit the element to change the way it displays.

767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 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 Product Carousel Element.,Useful Links & Resources
Sell Anything with Avada
Making the Most of WooCommerce with AvadaInstall & Setup WooCommerce
Avada WooCommerce Options

Woo Price 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 Price 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 Price ElementThe Woo Price Element allows you to add the Woo Product price wherever you want in your Product Layout. There is a range of options to show Discount badges and old prices, as well as layout options. In short, you can control virtually every facet of your product』s price, contolling how and where your price is displayed. Read more below for the full details of the Element 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 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 TabShow Sale Old Price – Make a selection to show or hide sale old price.
Sale Old Price Position – Make a selection for the sale old price position. Choose from After Regular, or Before Regular.

Layout – Make a selection for layout. Choose from Floated or Stacked. Floated will have the price and sale old price side by side. Stacked will have one per row.

Show Stock – Make a selection to show or hide stock. Choose from Yes, or No.

Show Discount Badge – Make a selection to show or hide discount badge. Choose from Yes, or No.

Discount Type – Make a selection whether badge should show percentage discount or amount.

Badge Position – Make a selection for the badge position. Choose from Before Price, or After Price.

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
Alignment – Select the content alignment.

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

Price Typography – Controls the typography of the price text. Leave empty for the global font family.

Font Family – Controls the font family.

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

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.

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

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.

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

Discount Badge Text Color – Select a color for the discount badge text. Leave empty for default value.

Discount Badge Typography – Controls the typography of the discount badge text. Leave empty for the global font family.

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

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

Discount Badge Background Color – Select a color for the discount badge background.

Discount Badge Border Size – Controls the border size of the Discount Badge. In pixels.

Discount Badge Border Color – Select a color for the discount badge border. Leave empty for default value.

Discount Badge Border Radius – Enter values including any valid CSS unit, ex: 10px.

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.

Woo Notices Element

The Woo Notices Element is a very versatile Element that displays relevant notices on WooCommerce pages. You can add it to Layouts when building single product layouts, as well as on relevant pages, such as the Cart and Checkout pages.,Read More about Working With Avada & WooCommerceView Element Demo Page!,OverviewHow To Use The ElementElement OptionsGlobal Options,How To Use The Woo Notices ElementThe Woo Notices Element allows you to place and style your WooCommerce notices into your Woo Product Layout. The notices themselves are automatically generated from WooCommerce, and this Element does not offer any way to customize these.
Simply place the Woo Notices Element in the area of your Layout or page you want the notices to appear. When you add the Element in Avada Live, you will see examples of the three notice types; General, Success, and Error. These allow you see what the notices will look like, so you can style them as you wish. Using the options in the Element, you can style the Notices』 appearance and color to your personal preferences.
767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada,Element OptionsLocation: The edit screen within each Element.
Note: This Element can be deployed only once within each page or 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.
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.
General TabAlignment – Choose to align the content left, right or center.
Show Button – Make a selection to show or hide button.

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

Margin – In pixels or percentage, ex: 10px or 10%.
Border Size – Controls the border size of the notice.Border Style – Controls the border style of the notice.Border Radius – Enter values including any valid CSS unit, ex: 10px.Text Size – Controls the size of the notice text. Enter value including any valid CSS unit, ex: 20px.Icon Size – Controls the size of the notice icon. In pixels.
Notice Types Styling – Use filters to see specific type of content.

General Notices
Background Color – Controls the background-color for the notice message.Border Color – Controls the border-color for the notice message.Icon – Select icon for notice message.Icon Color – Controls the icon color for the notice message.Text Color – Controls the text color for the notice message.Link Color – Controls the link color for the notice message.Link Hover Color – Controls the link hover color for the notice message.
Success State Notices

Background Color – Controls the background-color for the notice message.Border Color – Controls the border-color for the notice message.Icon – Select icon for notice message.Icon Color – Controls the icon color for the notice message.Text Color – Controls the text color for the notice message.Link Color – Controls the link color for the notice message.Link Hover Color – Controls the link hover color for the notice message.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.

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.