Woo Notices Element

Last Update: August 29, 2025

The Avada 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 appropriate pages, such as the Cart and Checkout pages.

Watch the video below for a visual overview of the Element, view the Avada Woo Notices Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.
View Element Page!
View Avada Builder Elements!
Avada & WooCommerce

How To Use The Woo Notices Element

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

Place the Woo Notices Element in the area of your Layout or page where 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 to 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 appearance and color of the Notices to suit your personal preferences.

Avada Retail Notices Element

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

HeadingDescription
AlignmentChoose to align the content left, right or center.
Show ButtonMake a selection to show or hide button.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
PaddingIn pixels or percentage, ex: 10px or 10%.
MarginIn pixels or percentage, ex: 10px or 10%.
Border SizeControls the border size of the notice.
Border StyleControls the border style of the notice.
Border RadiusEnter values including any valid CSS unit, ex: 10px.
Text SizeControls the size of the notice text. Enter value including any valid CSS unit, ex: 20px.
Icon SizeControls the size of the notice icon. In pixels.
Cart Icon StyleControls the cart icon style of the notice.
Cart IconSelect icon for cart message.
Notice Types Styling
General
Background ColorControls the background-color for the notice message.
Border ColorControls the border-color for the notice message.
IconSelect icon for notice message.
Icon ColorControls the icon color for the notice message.
Text ColorControls the text color for the notice message.
Link ColorControls the link color for the notice message.
Success State
Background ColorControls the background-color for the success message.
Border ColorControls the border-color for the success message.
IconSelect icon for success message.
Icon ColorControls the icon color for the success message.
Text ColorControls the text color for the success message.
Link ColorControls the link color for the success message.
Error State
Background ColorControls the background-color for the error message.
Border ColorControls the border-color for the error message.
IconSelect icon for error message.
Icon ColorControls the icon color for the error message.
Text ColorControls the text color for the error message.
Link ColorControls the link color for the error message.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

In this article