How to add a custom tab to Magento 2 product pages

Advanced Product Tabs will be a built-in feature of our upcoming premium Magento 2 theme -- UB Trex Pro.

With this built-in feature, you can easily create multiple custom tabs with dynamic content, assign the tabs to any individual products and reorder tabs using a visual drag and drop interface. It gives you complete control over your product page tabs right from your Magento 2 admin dashboard.

Here, you can have a quick view on the key features of Advanced Product Tabs feature that will be packed with our upcoming [M2] UB Trex Pro theme:

  • Create multiple custom tabs with dynamic content (product attribute-based or CMS static blocks) on any particular product pages
  • Flexibly define where you want to display the tabs (by category IDs or product IDs)
  • Drag and drop to sort the order of the tabs, including core tabs (Review, Details)
  • Easily enable or disable particular tabs
  • Customize the title of core tabs (Review, Details)
  • Supports three tab styles: Tab, List and Accordion
  • Support multiple languages

Create multiple custom tabs with dynamic content

Magento 2 custom product tab

Custom tab -- the main place for managing your Magento 2 product tabs

The Advanced Product Tab feature allows you to add new tabs with dynamic content to product pages. You can configure to display custom content from product attributes or CMS static blocks where you can load up embedded information, such as images, HTML content, custom blocks etc.,

Magento 2 custom product tab - Three tab styles

Three tab styles: Tab, List and Accordion

Allow to add global tabs, but only for particular product categories

The Category IDs, Product IDs fields allow you to define the conditions to display the tab on the front-end. You can assign the tabs to any number of product pages by entering their Category IDs or Products IDs. Each individual ID should be comma-separated. In case you specify particular products’ IDs you want to show the tab, the tab simply ignores the Category IDs value. If you leave both fields blank, the tab will be shown on all product pages.

Magento 2 custom product tab - Specify Category IDs and Product IDs

Specify Category IDs or Product IDs

In case you do not need some of the tabs, you can simply disable them using the Status toggle.

Customize the system product tabs

Please note that the system tabs can not be removed. However, you can reorder, rename all system tabs. You can also restrict to display the tabs only on certain product categories or products.

Drag and drop

The tab functionality provides the possibility to drag and drop to change the position of the tabs. You simply press the eight-dots rectangular to grab the tab and change to the desired position. Once you save the changes, the order of the tab on the frontend will be changed automatically.

Conclusion

Advanced Custom Tabs in our upcoming Magento 2 theme -- UB Trex Pro -- will be valuable to your Magento 2 product page because they let you create a much richer user experience and effectively present the content your shoppers see when they come to your page.

We’re looking forward to seeing you take advantage of this awesome feature that’ll revamp the default Magento 2 product detail page. Let us know what you think of this upcoming feature in the comment section below and make sure you check back with us for more updates with UB Trex Pro theme!

Written By

Head of UberTheme Team

Comments