Product Tabs widget is a single-page template widget. This is used to display product descriptions, product reviews and also provides a form to submit a new review.

Let’s learn how you can use Product Tabs Widgets on your wooCommerce site:

Step 1: Enable the Product Tabs Widget #

Um das Widget zu aktivieren,

• Gehe zu ShopEngine > Widgets > Product Tabs
• Anmachen 
• Speichern Änderungen

Notiz: You can also turn on Product Tabs with a global setting that aktiviert alle Widgets von ShopEngine.

Step 2: Add Product Tabs Widget #

Bevor Sie das Widget hinzufügen können, müssen Sie zunächst eine Einzelproduktvorlage erstellen. Schauen Sie sich die Dokumentation an So erstellen Sie eine einzelne Produktvorlage.

Hinzufügen Product Tabs:

• Gehe zu ShopEngine > Templates > Single Page Template
• Klicken Sie auf Mit Elementor bearbeiten

• Suchen für Produktregisterkarten auf die Option „Elementsuche“.
• Drag and drop the widget 
• Klicke auf Aktualisieren um Änderungen zu speichern.

Step 3: Settings of Product Tabs Widget #

You can customize the following settings under the Stil Tab:

Navigationsstil: #

• Typografie: You can change the font size for the menu options here.
• Menu Color: Change the menu color.
• Active/Hover Menu Color: Choose a color for the active/hover mode of the selected menu.
• Nav Indicator Color: Select a color for the active menu indicator.
• Nav Indicator Border (px): Choose a top and bottom value for the nav indicator border.
• Menu Spacing (px): Give a spacing between both the menu in pixels.
• Box Schatten: Klicken Sie auf die Bearbeitungsoption, um die Schattenfarbe sowie horizontale, vertikale, Unschärfe- und Ausbreitungswerte auszuwählen. Sie können die Position auch als Umriss oder Einschub festlegen.
• Randtyp: Sie können als Rahmenart wählen: durchgezogen, gepunktet, doppelt gestrichelt, gerillt oder gar nichts.
• Typografie: You can change the font size for the menu options here.
• Menu Color: Change the menu color.
• Active/Hover Menu Color: Choose a color for the active/hover mode of the selected menu.
• Nav Indicator Color: Select a color for the active menu indicator.
• Nav Indicator Border (px): Choose a top and bottom value for the nav indicator border.
• Menu Spacing (px): Give a spacing between both the menu in pixels.
• Box Schatten: Klicken Sie auf die Bearbeitungsoption, um die Schattenfarbe sowie horizontale, vertikale, Unschärfe- und Ausbreitungswerte auszuwählen. Sie können die Position auch als Umriss oder Einschub festlegen.
• Randtyp: Sie können als Rahmenart wählen: durchgezogen, gepunktet, doppelt gestrichelt, gerillt oder gar nichts.

Tab-Inhalt: #

• Tab Content Title
  • Titel anzeigen: Turn this option on to show the title in the tab content.
  • Farbe: Choose the title color for the tab area.
  • Polsterung: Adjust the top, left, right, and bottom padding around the title.
• Tab Content Wrap
  • Padding (px): Adjust the top, left, right, and bottom padding for the tab content.

Additional Information: #

• Typografie: You can change the font size for the additional information here.
• Table Cell Divider Color: Choose a color for the table cell divider.
• Table Cell Padding:  Passen Sie die obere, linke, rechte und untere Polsterung an.
• Etikett:
  • Farbe: Wählen Sie eine Farbe für das Etikett.
  • Hintergrund: Wählen Sie eine Hintergrundfarbe.
  • Breite: You can choose the width in px or percentage.

• Value:
  • Farbe: Pick a color for the value
  • Hintergrund: Choose a background color for the value

Durchschnittliche Bewertung: #

• Rating Title:
  • Farbe: Change the color of the rating title.
  • Typografie: You can change the font size for the rating title.

• Rating Title:
  • Farbe: Change the color of the rating title.
  • Typografie: You can change the font size for the rating title.

• Rating Title:
  • Farbe: Change the color of the rating title.
  • Typografie: You can change the font size for the rating title.

Review Heading: #

• Farbe: Change the color of the rating average.
• Typografie: You can change the font size for the rating average.
• Marge: Adjust the top, left, right, and bottom margins.

Rezensionsstil: #

• Farbe: Choose a color for the ratings.
• Date, Author, and Description Color: Here you can pick the color for a date, author, and description.
• Comment Separator Color: Select a color for the comment separator.
• Author Typography: Choose the font size for the author.
• Date Typography: Select the font size for the date.
• Beschreibung Typografie: You can choose the description font size here.
• Single Review Spacing (px): Select a value for single review spacing.

Bewertungsformular: #

• Input Label:
  • Farbe: Pick a color for the input label.
  • Required Color: Select a color for the required symbol.
  • Typografie: Select font size for the input label
• Form Input:
  • Color: Pick a color for the form input.
  • Randfarbe: Select a border color.
  • Fokus-Rahmenfarbe: Choose a color for the focus border.
  • Typografie: Select font size for the form input.

• Field Spacing (px):  Choose how much space you want between the input field.
• Inputs Border Radius (px): Select border-radius value for the input field.
• Inputs Padding (px): Adjust the top, left, right, and bottom padding of the input field.

Schaltfläche „Senden“: #

• Button Typography: You can change the font family, font size, font weight, transform, and line height here.
• Ausrichtung: Set the alignment as either left, right, or center.
• Normal/Hover: Choose the color and background color for both normal and hover views.
• Randtyp: Sie können als Rahmenart wählen: durchgezogen, gepunktet, doppelt gestrichelt, gerillt oder gar nichts.
• Breite: Wählen Sie die obere, linke, rechte und untere Breite des Rahmens aus.
• Farbe: Wählen Sie eine Farbe für den Rand.
• Randradius: Wählen Sie die oberen, linken, rechten und unteren Werte für den Rahmenradius aus.
• Polsterung: Passen Sie die obere, linke, rechte und untere Polsterung an.

Globale Schriftart: #

• Schriftfamilie: Hier können Sie die Schriftfamilie für das gesamte Widget ändern.

Klick auf das Aktualisieren button to speichern all the changes.

Here is a preview of how a Product Tab widget looks like: