---
title: Advanced Product Tabs Module
description: "The [Advanced Product Tabs module](https://divimerc.com/modules/advanced-product-tabs/) lets you display WooCommerce product information in an organized tab or accordion layout.  **Important Note:** Before using Custom Product Tabs, enable the **Product Tabs Manager** extension. Once enabled, create your custom tabs from the extension…"
url: "https://divimerc.com/docs/advanced-product-tabs/"
updated: "2026-09-26"
category: Modules
---

# Advanced Product Tabs Module

The [Advanced Product Tabs module](https://divimerc.com/modules/advanced-product-tabs/) lets you display WooCommerce product information in an organized tab or accordion layout. 

**Important Note:** Before using Custom Product Tabs, enable the **Product Tabs Manager** extension. Once enabled, create your custom tabs from the extension settings. The created tabs will then appear in the **Custom Tab Content** field, where you can select and display them.

## Content Tab

Allows you to configure your custom created product tab and configure how they are presented.

### Add New Share Item  

Click **Add New Tab Item** to create a new tab option. You can add multiple tab items and configure each one individually. (Description, Additional information, and reviews are available by default)

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-1.webp)

When you click on any of the default items or “Add New Tab Item”, you’ll get ‘Tab Settings’ available.

#### Tab Settings

Here you get default tabs along with the custom tab option to add the tab you created for your product tab.

- **Description**
  - **Override Title:** lets you change the text shown on the tab button itself instead of using WooCommerce's default label.

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-2-1.webp)

- **Additional Information**
  - **Override Title:** Lets you change the text shown on the tab button itself instead of using WooCommerce's default label**.**
  - **Hide Content Heading:** Enable the toggle to control whether the title inside the tab body is displayed. (only available when tab content is selected to Reviews or Additional Information)

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-3-1-1024x376.webp)

- **Reviews **
  - **Override Title:** lets you change the text shown on the tab button itself instead of using WooCommerce's default label**.**
  - **Hide Content Heading:** Enable the toggle to control whether the title inside the tab body is displayed. (only available when tab content is selected to Reviews or Additional Information)

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-4-1-1024x380.webp)

- **Custom Tab**
  - **Custom Tab Content:** Select the **Custom Tab Content** field to choose the content you created to display for your product tab.

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-2.webp)

#### Image & Icon

Use this section to add a visual identifier to a tab.

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-3.webp)

- Enable **Use Icon** to use an icon for the tab.
- Use **Image** and select **Add Image** to  upload or choose an image instead.

**Element Label**: You can give each tab an internal name (label) to help you keep track of everything in your builder editor. 

### Design Tab

#### Image & Icon

This display setting is valuable when you are adding a new tab item.

- Image Size
- Title-Image & Icon Gap

You’ll also get the background, border, box shadow, and spacing for further customization.

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-7-1.webp)

- **Text**: styles the text fields inside the active tab,including: font, color, height, and much more.
- **Heading Text:** design the content headings inside the tab body, controlling their font, size, weight, color, and much more.

### **Table**

- **Table Background Color:** set the fill color applied behind the entire product data table.

**You’ll also get the spacing, border, and box shadow settings for further customization**

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-8-2.webp)

### Table Row

- **Table Background Color:** set the fill color applied behind the entire product data table.

**You’ll also get the box shadow for further customization.**

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-9-1.webp)

### Table Cell

- **Table Cell Background Color:** set the fill color applied behind the entire product data table.

**You’ll also find the spacing, border, box shadow settings for further customization.**

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-10.webp)

### Advanced Tab

Use the Advanced tab for additional controls for the individual tab item, including custom CSS, conditions, visibility, and other Divi advanced settings. 

Now, let’s go through the parent options in this content tab for further customization.

### Content 

Select the product where you want to display the advanced product tabs. By default, the module uses the **Latest Product**, or you can select specific products to display the product tab content. 

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-5.webp)

### Settings

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-12.webp)

- **Display Mode:** You can choose the displaying style of the tabs.
  - **Tabs**
  - **Accordion** 
- **Default Open:** Available when you choose display mode to accordion
  - **Open First Item**
  - **All closed**
- **According Style:** Available when you choose according
  - **Line Separated**
  - **Bordered**
  - **Boxed**
  - **Flush**
- **Tab Position**: You can select the tab position on: Top, Left, and Right. It’s only available when you choose display mode to tabs
- **Single Line Nav**: Off by default. (Only shows when Display Mode is selected to Tabs *and* Tab Nav Position is selected to Top )

**Background**: Customize the module background using color, gradient, image, video, pattern, etc

**Element Label**: Add an internal label to organize and identify this module within the Divi Builder.

## Design Tab

Use this tab to customize the appearance, layout, spacing, and styling of the module. 

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-7.webp)

### Accordion Item

This design setting is only available when the display mode is set to Accordion.

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-8-1.webp)

- **Line & Border Color:** Set the color of the accordion item’s lines and borders.
- **Icon Color:** Set the color of the accordion icon.
- **Custom Icon Size:** Enable this option to set a custom size for the accordion icon.
- **Open Background Color:** Set the background color of the accordion item when it is open.
- **Close Background Color:** Set the background color of the accordion item when it is closed.

You will also find options to style the **Title Text, Close Title Text, Spacing,** and **Box Shadow**.

### Tab Container

- **Item Gap**: Here you will find background, border, box shadow, spacing, and sizing options to design the tab container

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-8.webp)

**Tabs:** Customizes the default/inactive state of tab headers (typography, text color, background, padding).

**Active Tab:** Sets distinct visual styles (color, border highlight, background) for the currently selected tab.

### Image & Icon

Use the **Image & Icon** settings to customize the appearance, size, placement, and alignment of the image or icon.

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-9.webp)

- **Icon Color:** Set the color of the accordion icon.
- Active Icon Color:
- **Use Custom Icon Size:** Enable this option to set a custom size for the accordion icon.
  - **Icon Size**: Adjust the size of the icon.
- **Image Size**: Adjust the size of the image.
- **Placement**: Choose where the image or icon is placed relative to the title.
- **Alignment**: Set the alignment of the image or icon.
- **Title - Image & Icon Gap**: Adjust the space between the title and the image or icon.

There you will also find options to style the **Background, Border, Box Shadow,** and **Spacing**.

![](https://divimerc.com/wp-content/uploads/2026/08/advance-product-tabs-10.webp)

**Content Area:** Adjusts background color, text styling, padding, and layout for the inner body pane.

**Sizing:** Adjust the width, height, and alignment of the module.

**Spacing:** Adjust the margins and padding of the module container.

**Border:** Customize the border using radius, style, width, and color settings.

**Box Shadow:** Add shadow effects to the module container.

**Filters:** Apply color filter effects to the module.

**Transform:** Adjust the scale, position, rotation, and size of the module.

**Animation:** Add reveal animation effects and control the animation style, delay, duration, and more.

## Advanced Tab

For advanced users seeking deeper control over the module, this tab offers extra configurations including custom code, conditions, and additional settings.

## Need Help?

If you have any questions or need assistance, contact our support team at support@wprio.com