Woo Notices Element

Last Update: July 14, 2024

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.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Use The Woo Notices Element

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

Element Options

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
Alignment		Choose to align the content left, right or center.
Show Button		Make a selection to show or hide 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.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Design

Heading		Description
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.
Cart Icon Style		Controls the cart icon style of the notice.
Cart Icon		Select icon for cart message.
Notice Types Styling
General
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.
Success State
Background Color		Controls the background-color for the success message.
Border Color		Controls the border-color for the success message.
Icon		Select icon for success message.
Icon Color		Controls the icon color for the success message.
Text Color		Controls the text color for the success message.
Link Color		Controls the link color for the success message.
Error State
Background Color		Controls the background-color for the error message.
Border Color		Controls the border-color for the error message.
Icon		Select icon for error message.
Icon Color		Controls the icon color for the error message.
Text Color		Controls the text color for the error message.
Link Color		Controls the link color for the error message.

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.