Product Tabs

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 #

To enable the widget,

• Go to ShopEngine > Widgets > Product Tabs
• Turn on 
• Save changes

Note: You can also turn on Product Tabs with a global setting that turns on all the widgets of ShopEngine.

Step 2: Add Product Tabs Widget #

Before you can add the widget you need to create a Single Product Template first. Check out the documentation on how to create a Single Product Template.

To add Product Tabs:

• Go to ShopEngine > Templates > Single Page Template
• Click on Edit with Elementor

• Search for Product Tabs on Elements Search option
• Drag and drop the widget 
• Click on Update to save changes.

Step 3: Settings of Product Tabs Widget #

You can customize the following settings under the Style Tab:

Nav Style: #

• Typography: 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 Shadow: Click on the edit option to choose the shadow color, horizontal, vertical, blur and spread value.  You can also set the position as outline or inset.
• Border type: you can choose the border type to be solid, dotted, doubled dashed, groove or none.
• Typography: 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 Shadow: Click on the edit option to choose the shadow color, horizontal, vertical, blur and spread value.  You can also set the position as outline or inset.
• Border type: you can choose the border type to be solid, dotted, doubled dashed, groove or none.

Tab Content: #

• Tab Content Title
  • Show Title: Turn this option on to show the title in the tab content.
  • Color: Choose the title color for the tab area.
  • Padding: 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: #

• Typography: 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:  Adjust the top, left, right, and bottom padding.
• Label:
  • Color: Pick a color for the label.
  • Background: Choose a background color.
  • Width: You can choose the width in px or percentage.

• Value:
  • Color: Pick a color for the value
  • Background: Choose a background color for the value

Average Rating: #

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

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

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

Review Heading: #

• Color: Change the color of the rating average.
• Typography: You can change the font size for the rating average.
• Margin: Adjust the top, left, right, and bottom margins.

Review Style: #

• Color: 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.
• Description Typography: You can choose the description font size here.
• Single Review Spacing (px): Select a value for single review spacing.

Review Form: #

• Input Label:
  • Color: Pick a color for the input label.
  • Required Color: Select a color for the required symbol.
  • Typography: Select font size for the input label
• Form Input:
  • Color: Pick a color for the form input.
  • Border Color: Select a border color.
  • Focus Border Color: Choose a color for the focus border.
  • Typography: 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.

Submit Button: #

• Button Typography: You can change the font family, font size, font weight, transform, and line height here.
• Alignment: Set the alignment as either left, right, or center.
• Normal/Hover: Choose the color and background color for both normal and hover views.
• Border type: you can choose the border type to be solid, dotted, doubled dashed, groove or none.
• Width: Select the top, left, right, and bottom width of the border.
• Color: Pick a color for the border.
• Border Radius: Select the top, left, right, and bottom values for the border radius.
• Padding: Adjust the top, left, right, and bottom padding.

Global Font: #

• Font family: Here you can change the font family for the whole widget.

Click on the Update button to save all the changes.

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