Mitech Preloader
Magento / Magento2

How to add custom tab in product view page in Magento2

How to add Custom tab in Product View Page in Magento2

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

Folder  structure:-

blank

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

[php]

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

[/php]

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

[php]

<?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>

[/php]

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

[php]

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

[/php]

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

[php]

<?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>

[/php]

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

[php]

<?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>

[/php]

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

[php]

<?php echo “Custom tab”; ?>

[/php]

blank