In this Post We will know How to add custom tab in product view page in Magento2?

Folder  structure:-

1. First of all You have to create a registration.php inside app/code/Webcreta/Customtab/registration.php


<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Webcreta_Customtab',
__DIR__
);

2. Create a module.xml in app/code/Webcreta/Customtab/etc/module.xml


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Webcreta_Customtab" setup_version="2.0.0">
</module>
</config>

3. Create a Customtab.php in app/code/Webcreta/Customtab/Block/Customtab.php


<?php
namespace Webcreta\Customtab\Block;
use Magento\Framework\View\Element\Template;
class Customtab extends Template
{
}

4. Create a customtab_index_index.xml in app/code/Webcreta/Customtab/view/frontend/layout/customtab_index_index.xml


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<title>Webcreta Customtab Page</title>
<css src="css/styles.css" />
<link src="js/sample.js"/>
<script src="js/bootstrap.min.js"/>
<css src="css/bootstrap.css" />​
</head>

<body>
<referenceContainer name="content">
<block class="Webcreta\Customtab\Block\Customtab" name="customtabPage" template="Webcreta_Customtab::customtab.phtml" />
</referenceContainer>
</body>
</page>

5. Create a catalog_product_view.xml inside app/code/Webcreta/Customtab/view/frontend/layout/catalog_product_view.xml


<?xml version="1.0"?>
<page 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="demo.tab" template="Webcreta_Customtab::customtab.phtml" group="detailed_info" >
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

6. Create a customtab.phtml inside app/code/Webcreta/Customtab/view/frontend/templates/customtab.phtml


<?php echo "Custom tab"; ?>

Leave a Reply