The Product Tabs widget by Atomic Addons places the product's information tabs in a product page design. It shows WooCommerce's tabs, Description, Additional information and Reviews, along with any tab another plugin adds, and lets you style the tab titles, the panels, the attributes table, the reviews and the review form. This guide covers adding the widget, what each tab shows and the style settings.
Enable the Product Tabs Widget
Product Tabs is a Pro widget and needs Atomic Addons Pro and WooCommerce. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Product Tabs. You can also open the WooCommerce category.
- 4
Turn the Product Tabs widget on.
- 5
Click Save Settings.
Add the Product Tabs Widget
The widget belongs in a Theme Builder template for products, usually across the full width under the gallery and the product details:
- 1
Go to WordPress Dashboard → Atomic Addons → Theme Builder.
- 2
Click Add New and choose the Single Product card.
- 3
Give the template a name and open it in Elementor. Its display condition is already set to WooCommerce → Product, so it applies as soon as you publish it.
- 4
In the widget panel, search for Product Tabs and drag it into the template. The widget sits in the Atomic Addons Pro (Single) category.
- 5
Design it with the controls below, then click Publish.
In the editor the template previews a sample product: the one picked under Builder Settings → Builder Post in the template's page settings (click Apply & Preview), or your newest product if none is picked. You can click the tabs in the preview. On your store, each product page shows its own tabs; anywhere else the widget falls back to your newest product. The widget appears in the panel only while you edit a Theme Builder template, a saved Elementor template or a product.
What the Widget Shows
(Open the full-size image in a new tab)The widget has no Content settings. Each tab appears only when the product has something to put in it:
- Description — the product's long description, the main text you write when you edit the product.
- Additional information — the weight, the dimensions and the attributes marked Visible on the product page, as a table.
- Reviews — the review count in the title, the reviews with their stars, author and date, and the form to add one. It shows while reviews are on in WooCommerce → Settings → Products and on the product.
Tabs added by other plugins appear in their place too. The first tab is open when the page loads, and clicking a tab switches the panel without reloading. A product with no tabs at all shows nothing.
(Open the full-size image in a new tab)Logged-out visitors see Name and Email fields in the review form; logged-in customers only pick a rating and write their review.
Style the Product Tabs
(Open the full-size image in a new tab)Select the widget: its controls are on the Style tab, which opens first. The Tabs section styles the row of tab titles:
- 1
Alignment: Left (the default), center or right.
- 2
Normal / Hover / Active: Three states: every tab title, the one under the pointer and the open one. Hover and Active have their own color, background and border color, and Active adds the Active Line Color of the line under the open tab.
- 3
Color: The color of the tab titles.
- 4
Background Type: A color or gradient behind each tab title.
- 5
Border Type: A border around each tab title. The line under the row of tabs takes the same style.
- 6
Border Width: The thickness of that border and of the line under the row.
- 7
Border Radius: Rounds the top corners of each tab title.
- 8
Padding: Space inside each tab title.
- 9
Margin: Space around the row of tabs.
- 10
Space Between: The gap between tab titles.
- 11
Typography: Font, size, weight and Elementor's other text settings for the titles.
Tabs Content
The panel under the tabs: Background, Border, Border Radius, Padding and Margin. The Heading switch shows or hides the heading at the top of each panel, such as “Description” or “3 reviews for …”. It is on by default, and its Color, Typography and Margin follow.
Description
The Text Color and Typography of the description.
Additional Information
The attributes table: the Border Color of its lines, then the Label column and the Value column, each with Color, Background, Padding and Typography.
Reviews
- Avatar — Avatar Size, border, Border Radius, Padding and the Spacing between the avatar and the review.
- Comment Text — Fill Star Color and Empty Star Color, the review's Text Color and typography, the Meta Color and typography of the name and date, and a border with Border Radius around each review.
- Review Form — Rating Color of the stars shoppers click, Label Color and typography, Input Color of typed text, and Email Field Left Spacing, space to the left of the Email field.
- Submit Button — Normal and Hover states with text color, background, border, border radius, padding, margin and typography.
Most of these settings apply through WooCommerce's product page markup, so they don't show in the editor preview of the template: only Alignment, Fill Star Color, Empty Star Color and the review form's label, input and email settings do. Check the rest on a product page.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.