How to add product custom tab In Magento 2

15 Aug, 2021

Today we going to create a new custom product tab in Magento 2.x

Product tab is usefull to showing product details with specific categorised. We will going to create new product tab in magento 2.x. Magento 2 provide 3 to 4 product tabs, We will add our custom product tab in Magento 2. It's very simple to add our custom product tab in Magento 2.

Let's start by creating a new custom product tab.

Step1. Create module directory

Go to Magento app/code directory and create a directory with your vendor name. My vendor name is "RS". After creating the vendor directory, need to create a directory for the module. My module name is "ProductTab". My custom module directory path is like "MAGENTO_ROOT/app/code/RS/ProductTab"

Step2. Create module registration file

	<?php
	//file path: MAGENTO_ROOT/app/code/RS/ProductTab/registration.php

	\Magento\Framework\Component\ComponentRegistrar::register(
	    \Magento\Framework\Component\ComponentRegistrar::MODULE,
	    "RS_ProductTab",
	    __DIR__
	);	

Step3. Create module config file

	
<?xml version="1.0"?>
<!-- file path: MAGENTO_ROOT/app/code/RS/ProductTab/etx/module.xml -->

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="RS_ProductTab" setup_version="1.0.0" />
</config>	

Step4. Create layout file for adding new custom product tab to product details page.

	
	<?xml version="1.0"?>
<!-- file path: MAGENTO_ROOT/app/code/RS/ProductTab/view/frontend/layout/catalog_product_view.xml -->
<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="rs.product.tab" template="RS_ProductTab::catalog/product/view/custom-tab.phtml" group="detailed_info" >
               <arguments>
                   <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
               </arguments>
           </block>
       </referenceBlock>
   </body>
</page>

Step5. Create template file for tab content

	
	<?php 
/* file path: MAGENTO_ROOT/app/code/RS/ProductTab/view/frontend/templates/catalog/product/view/custom-tab.phtml */
?>
<h3><?= __("Custom product tab") ?></h2>
<p><?php /* YOUR BODY CONTENT */ ?></p>

Step6. Install your module to magento

	php bin/magento module:enable RS_ProductTab
php bin/magento setup:di:compile
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

That's the steps to create a custom product tab in Magento 2.x

RAJU SADADIYA (MAGENTO DEVELOPER)