Woo Checkout Payment Element

Last Update: May 27, 2025

The Woo Checkout Payment Element is one of five Woo Checkout Elements, and allows you to add an independent Payment notice to your Woo Checkout page.

Watch the video below for a visual overview of the Element, view the Element demo page for live examples, and read on to see the full list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Demo Page!

How To Use The Woo Checkout Payment Element

The Woo Checkout Payment Element is useful when building a one page checkout. It is the last thing logically in the flow of the checkout, as it is from a button in this Element users place the order.

So to use this Element, simply add it in your Checkout layout at the bottom of the design. The Element will pull the payment methods set up in WooCommerce > Settings > Payments. If you use the Checkout Tabs Element, this Element is unneccesary, as all of the other four Checkout Elements are integrated in that one.

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

Heading		Description
Margin		In pixels or percentage, ex: 10px or 10%.
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
Typography		Controls the typography of the payments text. Leave empty for the global font family.
Label Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default value.
Label Background Color		Controls the label background color of the payments.
Label Color		Controls the label color of the payments.
Payment Description Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default value.
Payment Description Background Color		Controls the label background color of the payments description.
Payment Description Color		Controls the description color of the payments.
Link Color		Controls the link color of the payments text.
Place Order Button Style		Select whether you want to custom style the place order button.
Button Size		Controls the button size.
Button Span		Controls if the button spans the full width/remaining width of row.
Alignment		Select the button's alignment.
Button Border Size		Controls the border size. In pixels.
Button Styling
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.

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.