Woo Checkout Tabs Element

Last Update: August 28, 2025

The Avada Woo Checkout Tabs Element allows you to add a series of checkout-related tabs to your WooCommerce Checkout page. It’s an all-in-one Element which has the same components that the other four Woo Checkout Elements have seperately – the Woo Checkout Billing Element, the Woo Checkout Order Review Element, the Woo Checkout Payment Element, and the Woo Checkout Shipping Element. With this single Element, however, you can replicate the standard Woo Checkout.

Watch the video below for a visual overview of the Element, view the Avada Checkout Tabs 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 Checkout Tabs Element

Using the Avada Woo Checkout Tabs Element couldn’t be easier. Just add the Element to your assigned WooCommerce Checkout page (replacing the existing shortcode). There is a range of layout and design options to style it exactly how you like. You can add Titles or other Elements above or below (like the Avada Woo Notices Element to complete your page.

On the front end, the user will be led through the tabs as they complete each one. If you’d prefer to emulate the one-page WooCommerce checkout, you can use the other aforementioned Woo Checkout Elements to create the same process on one page.

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
Layout		Choose the tabs layout.
Space Between Nav and Content		Set space between tab nav and tab content sections. Leave empty for default value of 20px.
Show Tab Content Headings		Choose to have tab content headings displayed.
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		In pixels or percentage, ex: 10px or 10%.
Title Color		Controls the color of the tab title color, ex: #000.
Border Color		Controls the border color.
Nav Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 10px 0 10px 0 value.
Content Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 40px value.
Content Heading Typography		Controls the typography of the content heading. Leave empty for the global font family.
Content Text Typography		Controls the typography of the content text. Leave empty for the global font family.
Link Color		Controls the link color of the payments text.
Form Field Background Color		Controls the background color of the form input fields.
Form Field Text Color		Controls the text color of the form input fields.
Field Border Color		Controls the border color of the form input fields.
Field Border Color On Focus		Controls the border color of the form input fields on focus.
Payment Label Padding		Enter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default value.
Payment Label Background Color		Controls the payment label background color.
Payment Label Color		Controls the payment label color.
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 background color of the payments description.
Payment Description Text Color		Controls the payment description text color.

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.