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

In this tutorial, Today I will explain to how to add custom tab in product detail page in Magento 2. By default, there are 3 tabs display in product detail page. Details, More Information & Review Tab. Now, if you want to add more tabs then, you need to do some customization.

You may also like this :

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 :

Copy 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.

That’s it !!!

I hope this blog is easy to understand about how to add custom tab in product detail page in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.

Keep liking and sharing !!

Post Views: 3,979