Woo Tabs Element

Last Update: September 8, 2025

The Avada Woo Tabs Element displays product information in a tabbed format, such as product details, additional information, and product reviews. The Woo Tabs Element organizes the content into separate panels that can be switched between. With full styling and layout options, you can control the appearance, order, and design of the tabs, ensuring they fit seamlessly into your store’s layout while improving usability.

Watch the video below for a visual overview of Avada Layout Elements, and view the Avada Woo Tabs Element page. Read on to see the complete list of options.

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

How To Use The Avada Woo Tabs Element

The Avada Woo Tabs Element allows you to display the WooCommerce Tabs, which are usually found under the product image and short descriptions. These tabs can display the full descriptions, any additional information for variable products, and any reviews that have been left.

With this Element, you can configure the layout to be horizontal or vertical and customize the area with an extensive range of design options.

Avada Woo Tabs Element

Element Options

Note: 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
Display TabsChoose which tabs should be displayed.
LayoutChoose the tabs layout.
Show Tab Content HeadingsChoose to have tab content headings displayed.
Space Between Nav and ContentSet space between tab nav and tab content sections. Leave empty for default value of 20px.
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
MarginIn pixels or percentage, ex: 10px or 10%.
Title ColorControls the color of the tab title color, ex: #000.
Border ColorControls the border color.
Nav PaddingEnter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 10px 20px 10px 20px value.
Content PaddingEnter values including any valid CSS unit, ex: 10px or 10%. Leave empty to use default 40px value.
Content Heading TypographyControls the typography of the content heading. Leave empty for the global font family.
Content Text TypographyControls the typography of the content text. Leave empty for the global font family.
Review Stars ColorControls the color of review stars, ex: #000.

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