Home/Documentation/Design Elements, WooCommerce/

Woo Checkout Order Review Element

Last Update: February 22, 2023

The Woo Checkout Order Review Element is one of five Woo Checkout Elements, and allows you to add an independent order review section to your Woo Checkout page. Please read on for all the details on this useful Element.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Woo Checkout Order Review Element

The Woo Checkout Order Review Element is designed to have a place on your custom Checkout page. This Element presents the items in the Cart in a table, much as the Woo Cart Table Element does, only here it is in the context of a final order review before completing the Checkout.

There are a large number of desgin options for styling the Header, Table and Footer Cells however you like. You can place the Element anywhere on you Checkout page, but in the natural flow of a Checkout page, this Element would be placed right before the Woo Checkout Payment Element.

Woo Checkout Order Review Element > Example

Element 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

HeadingDescription
MarginIn pixels or percentage, ex: 10px or 10%.
Show Table HeadersChoose to have table headers displayed.
Show Product ImagesChoose to have the product images displayed.
Element VisibilityChoose 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 Responsive tab in the Global Options.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Table Border ColorControls the color of the table border, ex: #000.
Table Cell PaddingEnter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 5px 0 5px 0 value.
Header Cell Background ColorControls the header cell background color.
Header Cell TypographyControls the typography of the header text. Leave empty for the global font family.
Table Cell Background ColorControls the table cell background color.
Table Cell Text TypographyControls the typography of the text. Leave empty for the global font family.
Footer Cell Background ColorControls the footer cell background color.
Footer Cell TypographyControls the typography of the footer text. Leave empty for the global font family.

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. Default currently set to Top Of Element Hits Bottom Of Viewport.

v

In this article