Layout Elements – Avada Website Builder

Woo Order Customer Details

Geoff — Tue, 28 Mar 2023 23:39:21 +0000

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.

As part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Order Customer Details Element. This Element is designed to be used in custom WooCommerce Thank You pages. See the How To Create A Custom WooCommerce Thank You Page doc for more details on that process, but here we will look at the Element, and what it offers.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.

For privacy reasons YouTube needs your permission to be loaded.

View The Element Demo Page!

How To Use The Woo Order Customer Details Element

This Element is designed to be used in custom WooCommerce Thank You Pages. See the How To Create Custom WooCommerce Thank You Pages for more details on that process, but here we will look at the Element, and what it offers.

This Element simply add the Customer Details into the Thank You page. It adds both the Billing and Shipping address and other details. There is a full range of typography, color and border options so you can style this element as you wish. Simply add it into your Woo Thank You Content Layout Section wherever you wish, and style it as desired.

Element 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

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

Design

Heading		Description
Margin		Enter values including any valid CSS unit, ex: 4%.
HTML Heading Tag		Choose HTML tag of both headings, either div, p or the heading tag, h1-h6.
Headings Typography		Controls the headings typography.
Headings Margin		Enter values including any valid CSS unit, ex: 4%. Let empty for default H2 title margin.
Separator Style		Controls the border style of the heading.
Separator Width		Select the width of the separator.
Separator Color		Controls the separator color.
Separator Width		Controls the separator width.
Address Typography		Controls the headings typography.
Address Margin		Enter values including any valid CSS unit, ex: 4%.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

Woo Order Details

Geoff — Tue, 28 Mar 2023 23:30:49 +0000

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.

As part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Order Details Element. This Element is designed to be used in custom WooCommerce Thank You pages. See the How To Create A Custom WooCommerce Thank You Page doc for more details on that process, but here we will look at the Element, and what it offers.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.

For privacy reasons YouTube needs your permission to be loaded.

View The Element Demo Page!

How To Use The Woo order Details Element

This Element add the Order details to the Thank You page. As you can see in the screenshot below, there are a number of available details you can display. By default, they are all enabled, but if there’s one you don’t want to display simply drag it to the Disabled area.

Element Options

General

Heading		Description
Order of Details		Choose the order of order received details.
Failed Message		Show a custom message if the order fails. Leave empty for default Woo message translated in displayed language. You can click preview button to see how this message is displayed in case payment fails.
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.

Design

Heading		Description
Margin		Enter values including any valid CSS unit, ex: 4%.
Item/Failed Message Typography		Controls the item typography.
Item Detail Typography		Controls the item detail(information) typography.
Failed Button Colors
Button Color		Select the color of the text of buttons.
Button Background Color		Select the background color of buttons.
Button Border Color		Select the border color of buttons.
Button Padding		Enter values including any valid CSS unit, ex: 10px or 10%.
Button Border Width		Select the width of the button border.
Button Border Radius		Enter values including any valid CSS unit, ex: 10px or 10%.
Buttons Distance From Paragraph		Enter values including any valid CSS unit, ex: 10px or 10%.
Distance Between Buttons		Enter values including any valid CSS unit, ex: 10px or 10%.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

Woo Order Downloads

Geoff — Tue, 28 Mar 2023 23:25:36 +0000

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.

As part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Order Downloads Element. This Element is designed to be used in custom WooCommerce Thank You pages. See the How To Create A Custom WooCommerce Thank You Page doc for more details on that process, but here we will look at the Element, and what it offers.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.

For privacy reasons YouTube needs your permission to be loaded.

View The Element Demo Page!

How To Use The Woo order Downloads Element

You can add this Element to your Thank You Page Layout if your site has digital downloads. There is also an option in the Woo Order Table Element that can display digital products as well, but this Element also displays expiring download dates, and number of downloads etc.

Just add the Element into your Layout wherever you want it. There is a full range of typography, color and boder options on the Design tab, to style it as you wish.

Element Options

General

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

Design

Heading		Description
Margin		Enter values including any valid CSS unit, ex: 4%.
Heading Cell Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 1px 1px 15px 1px value.
Body Cell Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 25px 0 25px 0 value.
Heading Cell Background Color		Controls the heading cell background color.
Body Cell Background Color		Controls the table cell background color.
Table Border		Controls the border style of the table.
Table Border Width		Select the width of the border.
Table Border Color		Controls the color of the table border, ex: #000.
Heading Cell Typography		Controls the typography of the heading. Leave empty for the global font family.
Body Cell Typography		Controls the typography of the content text. Leave empty for the global font family.
Body Cell Link Hover Color		Select the color of the link on hover.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

Woo Order Table

Geoff — Tue, 28 Mar 2023 22:47:45 +0000

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.

As part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Order Table Element. This Element is designed to be used in custom WooCommerce Thank You pages. See the How To Create A Custom WooCommerce Thank You Page doc for more details on that process, but here we will look at the Element, and what it offers.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.

For privacy reasons YouTube needs your permission to be loaded.

View The Element Demo Page!

How To Use The Woo order Table Element

This part of the Thank You page is a simple Table Element, that displays the items purchased in the Order. Just add it to your Content Layout Section, wherever you want. There is a full range of typography, border and color options to style it however you like. See the full range of options below.

Element Options

General

Heading		Description
Display Meta Downloads Links for Digital Products		Whether or not to display the download links under the products. This is a more straightforward approach instead of using Woo Order Downloads element. The downside is that the information for expiring download date, and number of downloads remaining are missing from here, unlike Woo Order Downloads element.
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.

Design

Heading		Description
Margin		Enter values including any valid CSS unit, ex: 4%.
Heading Cell Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 1px 1px 15px 1px value.
Body Cell Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 25px 0 25px 0 value.
Footer Cell Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 10px 0 10px 0 value.
Heading Cell Background Color		Controls the heading cell background color.
Body Cell Background Color		Controls the table cell background color.
Footer Cell Background Color		Controls the footer table cell background color.
Table Border		Controls the border style of the table.
Table Border Width		Select the width of the border.
Table Border Color		Controls the color of the table border, ex: #000.
Heading Cell Typography		Controls the typography of the heading. Leave empty for the global font family.
Body Cell Typography		Controls the typography of the content text. Leave empty for the global font family.
Body Cell Link Hover Color		Select the color of the link on hover.
Footer Heading Cell Typography		Controls the typography of the heading in footer. Leave empty for the global font family.
Footer Data Cell Typography		Controls the typography of the data in footer. Leave empty for the global font family.
Total Price Cell Typography		Controls the typography of the total price. Leave empty for the global font family.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

Woo Order Additional Info Element

Geoff — Tue, 28 Mar 2023 21:11:01 +0000

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.

As part of the Avada WooCommerce Builder, a range of Woo Commerce Elements were added. In this document, we are looking at the Woo Order Additional Info Element. This Element is designed to be used in custom WooCommerce Thank You pages. See the How To Create A Custom WooCommerce Thank You Page doc for more details on that process, but here we will look at the Element, and what it offers.

IMPORTANT NOTE: The Layout Elements are only available when editing Content Layout Sections in Avada Layouts.

For privacy reasons YouTube needs your permission to be loaded.

View The Element Demo Page!

How To Use The Woo Order Additional Info Element

This Element is designed to be used in custom WooCommerce Thank You Pages. See the How To Create A Custom WooCommerce Thank You Page for more details on that process. This simple Element displays additional information relating to the order. It’s like a Notice Element for Woo purchases.

All you have to do it add it to the Layout. There are a few simple customisation options, but otherwise this one just displays any additional information coming from the order. This might be payment method info and any additional info that might be relevant to an order.

Element Options

General

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

Design

Heading		Description
Margin		Enter values including any valid CSS unit, ex: 4%.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

Post Card Cart Element

Geoff — Wed, 27 Jul 2022 21:43:36 +0000

The Post Card Cart Element is a special Layout Element, that you will only see when editing a Post Card in the Avada Library. It is one of the available Elements, with which to design and build Post Cards, and specifically WooCommerce Post Cards. Read on to find out more about this useful ecommerce Element.

View Element Demo Page!

How To Use The Post Card Cart Element

The Post Card Cart Element allows you to add an Add to Cart section in your WooComerce based Post Cards. You could use a WooCommerce Post Card instead of the WooCommerce Product Grid Element for example.

To use the Element, simply add it to your WooCommerce based Post Card and configure it to your needs. There are many choices with this Element, both with functionality and design. Read on to see the full list of options available with this useful Element.

Element Options

Location: The edit screen within each Element. This Element is found in the Layout Elements tab only when adding or editing an Avada Library > Post Card Element.

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, so the options screen may look somewhat different.

General

Heading		Description
Cart Layout		Select the layout of cart components. Floated will have components side by side. Stacked will have one component per row.
Cart Alignment		Select the content alignment.
Show Variations		Display the variations if product type is variable.
Show Quantity		Display the quantity input.
Show Add To Cart		Display the Add To Cart button.
Show Product Link		Display the Product Link .
Product Quick View		Enable product quick view for products.
Buttons Span		Controls if buttons spans the full width/remaining width of row.
Buttons Layout		Select the layout for buttons. Floated will have them side by side. Stacked will have one per row.
Buttons Alignment		Select the content alignment.
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.

Cart

Heading		Description
Margin		In pixels or percentage, ex: 10px or 10%.
Quantity Style		Select whether you want to custom style the quantity field.
Quantity Margin		In pixels or percentage, ex: 10px or 10%.
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.
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.
Quantity Button Border Size		Controls the border size of the select fields.
Quantity Button Text Color		Controls the text color of the select fields.
Quantity Button Background Color		Controls the background color of the select fields.
Quantity Button Border Color		Controls the border color of the select fields.
Add To Cart Link Style		Select whether you want to custom style the add to cart button.
Add To Cart Margin		In pixels or percentage, ex: 10px or 10%.
Button Size		Controls the button size.
Button Border Size		Controls the border size. In pixels.
Icon		Click an icon to select, click again to deselect.
Icon Position		Choose the position of the icon on the button.
Add To Cart Link Font Size		Controls the font size of the text link. Enter value including any valid CSS unit, ex: 20px.
Link Text Color		Controls the text color of the link.
Button Text Color		Controls the text color of the button.
Button Gradient Top Color		Controls the text color of the button.
Button Gradient Bottom Color		Controls the text color of the button.
Button Border Color		Controls the border color of the button.
Product Link Style		Select whether you want to custom style the product link.
Product Link Margin		In pixels or percentage, ex: 10px or 10%.
Product Link Font Size		Controls the font size of the text link. Enter value including any valid CSS unit, ex: 20px.
Product Link Text Color		Controls the text color of the link.
Button Size		Controls the button size.
Button Border Size		Controls the border size. In pixels.
Icon		Click an icon to select, click again to deselect.
Icon Position		Choose the position of the icon on the button.
Button Text Color		Controls the text color of the button.
Button Gradient Top Color		Controls the text color of the button.
Button Gradient Bottom Color		Controls the text color of the button.
Button Border Color		Controls the border color of the button.

Variations

Heading		Description

Variation Layout		Select the layout for the variations. Floated will have the label and select side by side. Stacked will have one per row.
Show Label		Display the variation attribute label.
Label Typography		Controls the typography of the label text. Leave empty for the global font family.
Label Width		Leave empty for automatic width. Enter values including any valid CSS unit, ex: 10px.
Text Alignment		Select the text alignment for the variation label and variation swatches.
Swatch Style		Select whether you want to custom style the Avada variation swatches.
Swatch Item Margin		In pixels or percentage, ex: 10px or 10%.
Swatch Border Size		Controls the border size of the color, image and button swatch fields.
Swatch Styling
Swatch Background Color		Controls the background color of the color, image and button swatch fields.
Swatch Border Color		Controls the border color of the color, image and button swatch fields.
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.
Button Swatch Text Color		Controls the text color of the button swatches.
Select Style		Select whether you want to custom style the select fields for variations.
Select Height		Enter values including any valid CSS unit, ex: 10px.
Select Typography		Controls the typography of the Select option. Leave empty for the global font family.
Select Background Color		Controls the background color of the select fields.
Select Border Size		Controls the border size of the select fields.
Select Border Color		Controls the border color of the select fields.
Select Border Radius		Enter values including any valid CSS unit, ex: 10px.
Variation Clear		Controls how you want to disable the variation clear link.
Clear Content		Controls the content type for the clear link. Default will use WooCommerce text string.
Clear Icon		Click an icon to select, click again to deselect.
Clear Text		Custom text to use for the variation clear link.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.

Woo Filter Active Element

Geoff — Fri, 15 Jul 2022 01:40:35 +0000

The Woo Filter Active Element is one of four Woo Filter Elements, designed to replace the default WooCommerce filter widgets. Please read on for all the details on this useful Element, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Woo Filter Active Element

The Woo Filter Active Element is designed to show the user which Woo Filters are currently active. This will be used in conjunction with at least one of the other Woo Filter Elements, the Woo Filter By Attribute, the Woo Filter By Price Element, and/or the Woo Filter By Rating Elements. These would typically be found in a sidebar on a shop page (try using a sticky column), where you could use the filter elements to filter the shop products. The Filter Active Element then shows which filters are active.

IMPORTANT NOTE. These filters are for advanced users and must be added to a Layout Section, as they are Layout Elements. They also only work with Archives.

So, to make a filterable shop page, or a Product Categories page, create a Layout, and set the conditions to be Archives > Product Archives Types, and/or Archives > All Product Categories. Then create a Content Layout Section, add your Woo Products with the Post Card Archives Element, using the Post Card of your choice, Post Cards Display set to Posts, and on the Layout Section Options tab, set the Archive Type as Products.

Then you can add the Filter Elements in a Sticky Sidebar. Depending on the attributes of your products, the various Filter Elements could be used. The Woo Filter Active Element will only display on the front end when there is an active filter.

Element Options

Useful Links & Resources

Woo Filter by Attribute Element

Geoff — Fri, 15 Jul 2022 01:40:33 +0000

The Woo Filter By Attribute Element is one of four Woo Filter Elements, and designed to replace the corresponding WooCommerce Widgets. The Woo Filter by Attribute Element allows a user to filter products by a specific attribute (in the screenshot below, it is size). Please read on for all the details on this useful Element, and watch the video below for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Woo Filter By Attribute Element

The Woo Filter By Attribute Element is designed to filter products based on a specific attribute. This element will be used in conjunction with the Woo Filter Active Element, and potentially one of the other Woo Filter Elements, the Woo Filter By Price Element, and/or the Woo Filter By Rating Element. These would typically be found in a sidebar on a shop page (try using a sticky column), where you could use the filter elements to filter the shop products.

You first need to ensure your WooCommerce products have attributes. See the How To use WooCommerce Attribute Swatches for more details on that process. Then when adding the Element, you choose which attribute you want to be able to filter by. You can add this Element multiple times if your products have multiple different attributes.

IMPORTANT NOTE. These filters are for advanced users and must be added to a Layout Section, as they are Layout Elements. They also only work with Archives.

Then you can add the Filter Elements in a Sticky Sidebar. Depending on the attributes of your products, the various Filter Elements could be used.

Element Options

Useful Links & Resources

Woo Filter By Price Element

Geoff — Fri, 15 Jul 2022 01:40:30 +0000

The Woo Filter By Price Element is one of four Woo Filter Elements, and designed to replace the corresponding WooCommerce Widgets. Please read on for all the details on this useful Element.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Woo Filter By Price Element

The Woo Filter By Price Element is designed to filter products based on their price. This element will be used in conjunction with the Woo Filter Active Element,and potentially one or more of the other Woo Filter Elements, the Woo Filter By Attribute Element, and/or the Woo Filter By Rating Element. These filters would typically be found in a sidebar on a shop page (try using a sticky column), where you could use the filter elements to filter the shop products.

The Woo Filter by Price Element only requires styling and products that have a price to work.

IMPORTANT NOTE. These filters are for advanced users and must be added to a Layout Section, as they are Layout Elements. They also only work with Archives.

Then you can add the Filter Elements in a Sticky Sidebar. Depending on the attributes of your products, the various Filter Elements could be used.

Element Options

Useful Links & Resources

Woo Filter By Rating Element

Geoff — Fri, 15 Jul 2022 01:40:27 +0000

The Woo Filter By Rating Element is one of four Woo Filter Elements, and designed to replace the corresponding WooCommerce Widgets. Please read on for all the details on this useful Element.

For privacy reasons YouTube needs your permission to be loaded.

How To Use The Woo Filter Active Element

The Woo Filter By Rating Element is designed to filter products based on their rating. This element will be used in conjunction with the Woo Filter Active Element, and potentially one or more of the other Woo Filter Elements, the Woo Filter By Attribute Element, and/or the Woo Filter By Price Element. These filters would typically be found in a sidebar on a shop page (try using a sticky column), where you could use the filter elements to filter the shop products.

The Woo Filter by Rating Element only requires styling and products that have a rating to work.

IMPORTANT NOTE. These filters are for advanced users and must be added to a Layout Section, as they are Layout Elements. They also only work with Archives.

Then you can add the Filter Elements in a Sticky Sidebar. Depending on the attributes of your products, the various Filter Elements could be used.