How to Configure WooCommerce Product Tabs in Elementor
The Product Tabs widget lets you display WooCommerce product information inside tabbed sections in Elementor product templates. This widget is used when building custom WooCommerce single product pages with Elementor.
The widget helps organize product details into separate tabs such as description, additional information, and reviews. You can also style tab labels, tab content, review sections, and the review form from the Elementor panel.
This widget is commonly used when designing WooCommerce product templates with Elementor Theme Builder.
Part of WooCommerce Elementor Widgets #
The Product Tabs widget is part of the WooCommerce widget collection available in Spexo Addons. These widgets help you build custom product layouts and shopping experiences in Elementor. You can explore the full collection in the WooCommerce Widget Library.
When to Use the Product Tabs Widget #
The Product Tabs widget is used when you want to organize product details into separate sections on a WooCommerce single product page. It helps keep long product information easier to scan and more structured for users.
This widget is usually placed below the main product summary area. It works well with widgets that show the WooCommerce product name and display the product price.
If your product description or additional information tab contains long content, review the length before publishing the template. Use the reading time calculator to check how long your product description takes to read, then keep the tab content easier for shoppers to scan.
Requirements #
Before using the Product Tabs widget, make sure the required plugins and product data are ready. This widget only works inside WooCommerce single product templates.
- WooCommerce plugin installed and activated
- Products created in your WooCommerce store
- Product description, attributes, or reviews available in WooCommerce
- Elementor product template created
- Spexo Addons plugin installed and active
This widget works inside Elementor product templates created with the Theme Builder.
How to Add the Product Tabs Widget #
Follow these steps to add the Product Tabs widget inside an Elementor product template.
- Open the WooCommerce single product template in Elementor.
- Search for the Product Tabs widget in the Elementor panel.
- Drag the widget into your product page layout.
- The widget will automatically display WooCommerce product tabs for the current product.
After you complete this step, the Product Tabs widget will appear inside your Elementor WooCommerce product template.
Style Settings #
To customize the Product Tabs widget design, click the Style tab in the Elementor panel. You will find styling controls for labels, content, additional information, reviews, review forms, and the submit button.
Tab Labels #
From this section, you can change label color, background color, border color, and typography for normal, hover, and active states. You can also adjust transition duration, padding, margin, border, and border radius.
Tabs Content #
This section lets you style the content area inside each product tab. You can change text color, background color, border color, typography, and padding.
You can also enable or disable the title display. When the title is enabled, you can control title color, typography, and spacing.
Additional Information #
This section includes separate styling controls for attribute names and attribute values inside the additional information table. You can change text color, background color, row styling, typography, alignment, and width.
You can also adjust padding, divider color, divider width, and table border visibility.
Review Comments #
From this section, you can style author color, date color, rating color, empty rating color, description color, background color, border color, and padding. You can also adjust vertical gutter, rating icon size, avatar image size, and avatar spacing.
Review Form #
The review form section includes separate controls for labels and rating styles. You can change label color, required field color, typography, and spacing.
You can also style rating icons, input fields, text areas, borders, shadows, heights, and vertical spacing for supported devices.
Submit Button #
This section lets you style the review form submit button. You can change text color, background color, border color, box shadow, alignment, typography, transition duration, padding, and top spacing for normal and hover states.
Common Issues and Fixes #
If the product tabs do not appear in the editor, make sure you are editing a WooCommerce single product template. This widget will not display product tab data correctly on a normal page.
If the additional information tab is empty, check that product attributes have been added in WooCommerce. If the review tab is empty, confirm that reviews are enabled for the product.
If the widget does not appear in Elementor, review the Widget Setup Guide and confirm that the widget is enabled.
Frequently Asked Questions #
Why are product tabs not visible in Elementor? #
The Product Tabs widget only works inside WooCommerce single product templates. It will not show dynamic tab content on regular pages.
Can I style the review form and submit button? #
Yes. The widget includes style controls for review comments, review form fields, ratings, and the submit button.
Can I show product attributes inside the tabs? #
Yes. The widget supports the additional information table and lets you style attribute names, values, dividers, and row backgrounds.
Getting stuck? Feel free to Contact Our Support for further assistance.
Navigation:
