On high-converting WooCommerce product pages, keeping content structured and accessible without visual clutter is critical. The ReviewX Product Data Tabs Elementor widget seamlessly integrates customer reviews, multi-criteria breakdown bars, and submission forms directly inside the familiar WooCommerce tabbed interface (alongside Description and Additional Information) rather than displaying an unbounded block inline.

This comprehensive guide explains how to add, configure, and visually customize the ReviewX Product Data Tabs widget within your Elementor Single Product templates.

Why Choose the Product Data Tabs Widget?

• Clean Page Architecture: Organizes complex product specifications, technical details, and customer feedback into distinct, clickable tabs.
• Familiar Shopper Experience: Conforms to traditional ecommerce design patterns where shoppers intuitively look for the “Reviews” tab.
• Granular Elementor Styling: Full control over active tab colors, borders, typography, star shades, and criteria bars without writing custom CSS.

Step 1: Open Your Elementor Single Product Template

1. Navigate to Templates → Theme Builder in your WordPress admin dashboard.
2. Select your active Single Product template and click Edit with Elementor. (If you haven’t created one yet, click Add New → Single Product).
3. Locate the section on your canvas where you want your tabbed product information to render.

Step 2: Add the ReviewX Product Data Tabs Widget

1. In the left-hand Elementor widget panel, scroll to the ReviewX Addons category or search for ReviewX Product Data Tabs.
2. Drag the widget onto your product template canvas.

Figure 1: Live single product page displaying ReviewX reviews encapsulated inside the WooCommerce product data tabs.

Step 3: Configure Content & Display Controls

With the widget selected, explore the Content tab in Elementor’s side panel:

• Tab Title & Icon: Customize the tab title (e.g., “Customer Reviews” or “Ratings & Feedback”) and choose a custom icon to display beside the label.
• Average Rating Summary: Toggle whether to show the overall score (e.g., 4.9/5) and the 5-star distribution chart at the top of the reviews tab.
• Multi-Criteria Graph: Enable or disable qualitative criteria progress bars (Quality, Pricing, Shipping, etc.).
• Review List Controls: Select your preferred review card style, number of reviews per page, and pagination style (AJAX pagination or numerical buttons).

Step 4: Customize Visual Styling

Switch to the Style tab in Elementor to align the tabs perfectly with your brand identity:

• Tabs Style: Customize font family, font size, tab background, border radius, and active tab border highlights.
• Star Rating Colors: Customize the color of active filled stars, empty stars, and half-star gradients.
• Criteria Bars: Set custom background and fill colors for the multi-criteria progress bars.
• Review Items: Configure padding, card background color, reviewer name typography, verified badge color, and comment text styles.

Step 5: Publish & Verify Display Conditions

1. Click the green Update / Publish button in Elementor.
2. Set the Display Conditions (e.g., Include → Products → All Products or target specific product categories).
3. Visit any single product page on your storefront to confirm that the Reviews tab renders cleanly with all interactive elements.

Related Documentation

• ReviewX Woo Review Elementor Widget
• ReviewX Review List Elementor Widget
• ReviewX CPT Elementor Widget