Magento 2: How to add new tabs to the product page

The tabs on the product page are handled by the Magento_Catalog’s product/view/details.phtml template file. In there the line $block->getGroupChildNames('detailed_info', 'getChildHtml') collects all blocks in the detailed_info group for the tabs.

This means the following layout XML will add a new tab:

        <referenceBlock name="product.info.details">
            <block class="Magento\Framework\View\Element\Template" template="Magento_Theme::path/to/template.phtml" name="INSERT NAME" group="detailed_info">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">TAB TITLE HERE</argument>
                </arguments>
                </block>
            </block>
        </referenceBlock>

The group="detailed_info" part adds it to the tabbed area.

The <argument name="title" part of that sets a string value on the block which will be used for the tab’s title. The content of the block you’re adding will be used as the tab content.

Unfortunately there’s no inbuilt way to determine the sort order of these tabs without overriding the details.phtml template. This is a known problem, but you can choose one of the solutions om StackOverflow.


Tags: magento2themedesign