How to add custom tab in product view page in Magento2
Milan Chauhan 
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]
<?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]
Related Posts
