Display Custom tabs on Product Detail Page Magento2

In this post we will guide you how to add a new custom tab in the product detail page in magento2.

This is very simple and we are going to show in two steps:

Step 1: Create Custom Tab

To start with create a file ‘catalog_product_view.xml’ in the app/code/<VendorName>/<ModuleName>/view/frontend/layout folder.

<?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" template="VendorName_ModuleName::custom_tab.phtml" group="detailed_info" >
           <arguments>
              <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
              <argument name="sort_order" xsi:type="string">30</argument>
           </arguments>
       </block>
    </referenceBlock>
</body>
</page>

Step 2: Display Content in Custom Tab

Change <VendorName>_<ModuleName> to your module in the catalog_product_view.xml

Now create the custom_tab.phtml file in app/code/<VendorName>/<ModuleName>/view/frontend/layout folder and add the below snippet in the phtml file.

<?php

echo "This is Custom tab in product detail page";

?>

Now you can check your product detail page on frontend.

That’s it.

Related Posts:

Comments (0)