Product Additional Info

The Product Additional Info Widget allows you to add, style, and manage additional product information anywhere on your Elementor-powered page. It’s perfect for displaying WooCommerce product details such as dimensions, weight, color, material, size, brand, SKU, and shipping information in a tabular format, with customizable styling options and responsive settings.

Whether you’re designing a product page, spec sheet, or detailed info section, the Product Additional Info Widget makes it easy to present product details with precision and style.

Key Features:

• Display additional product information in a table
• Customize table headers, rows, and cells
• Toggle visibility of specific info fields
• Style table components individually
• Fully responsive and optimized

🚀 How to Enable the Product Additional Info Widget

To start using the Product Additional Info Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Product Additional Info Widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🧩 How to Use the Product Additional Info Widget in Elementor

Step 1: Add the Widget to Your Page

• Open your desired page using Elementor Editor.
• Search for “Product Additional Info” in the Elementor widget panel.
• Drag and drop the Product Additional Info Widget TP widget onto your page canvas.
• 🔄 Tip: It includes the TP badge, which means it’s from the Topper Pack.

Step 2: Configure Info Settings

• Under the Content → Settings section:
  • Toggle Use Specific Product to “Yes” to manually choose a product, or leave it as “No” to automatically fetch the current product (e.g., on a product page).
  • Toggle Show Dimensions, Show Weight, Show Color, Show Material, Show Size, Show Brand, Show SKU, and Show Shipping to control visibility of each field.

Step 3: Style the Title

• Under the Style → Title section:
  • Adjust Typography to set font size, weight, and style for the title.
  • Set Color for the title text, and adjust Margin and Padding to control spacing (e.g., top, right,
  • bottom, left).

Step 4: Style the Table

• Under the Style → Table section:
  • Customize Table Border Type, Border Radius, and Box Shadow.
  • Set Background Type (e.g., Classic) and customize Background Color for the table.

Step 5: Style Table Rows and Cells

• Under the Style → Table Row and Style → Table Cell sections:
  • Adjust Typography and Color for row and cell text.
  • Set Margin and Padding to control spacing within rows and cells.

✅ Final Preview and Save

Once your Product Additional Info Widget settings and style options are applied:

• Click Preview Changes to see how it looks.
• Hit Publish or Update to save your page.