How to Add Custom Tab in Product Detail Page in Magento 2

Let’s assume that you have created custom theme. Then you need to create app/design/frontend/Vendor/Theme/Magento_Catalog/layout/catalog_product_view.xml file and paste the below code :

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product.info.details">
            <block class="Magento\Catalog\Block\Product\View"
                name="custom.tab"
                as="customtab"
                template="Magento_Catalog::product/view/custom.phtml"
                group="detailed_info">
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
                    <argument name="sort_order" xsi:type="string">10</argument>
                </arguments>
            </block>
        </referenceBlock> 
    </body>
</page>
After that, You need to create file app/design/frontend/Vendor/Theme/Magento_Catalog/templates/product/view/custom.phtml file and add content which you want to display inside that custom tab. You can also set sort order of your custom tab and then, it will display on appropriate order based on your value of sort order.

Leave a comment Cancel reply