Add Custom Tab with Custom Template on Magento 2.2 Product Edit Page

Magento 2 is a flexible and feature-rich platform that is suitable for an E-commerce business. However, the default functionalities may fall short, owing to the varied business requirements in the vast scope of E-commerce.

In such cases, integration with 3rd parties are required, extensions are used, etc. to offer the features lacking in the default Magento 2. And, in doing so, the admin panel requires certain changes.

For example, if you are using some third-party module to implement a feature or display some data in a separate product tab, you’d be requiring to add custom tab with custom template on Magento 2.2 product edit page! You can also hide unnecessary tabs in product page frontend for that you need to hide an empty custom tabs in Magento 2 this is helpful in not letting your visitors get distract

Method to Add Custom Tab with Custom Template on Magento 2.2 Product Edit Page:

1. Create product_form.xml in Vendor/Module/view/adminhtml/ui_component/product_form.xml
   
   
   <?xml version="1.0" encoding="UTF-8"?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <fieldset name="testingproduct"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">[Tab Group Name]</item> <item name="provider" xsi:type="string">product</item> <item name="dataScope" xsi:type="string">data.product</item> <item name="sortOrder" xsi:type="number">2</item> <item name="collapsible" xsi:type="boolean">true</item> <item name="opened" xsi:type="boolean">false</item> <item name="ns" xsi:type="string">product_form</item> </item> </argument> <container name="testing_group"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="sortOrder" xsi:type="number">1</item> </item> </argument> <htmlContent name="html_content"> <argument name="block" xsi:type="object">Vendor\Module\Block\Adminhtml\Product\Edit\Tab\CustomTab </argument> </htmlContent> </container> </fieldset> </form>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

   <?xml version="1.0" encoding="UTF-8"?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"       xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">     <fieldset name="testingproduct">         <argument name="data" xsi:type="array">             <item name="config" xsi:type="array">                 <item name="label" xsi:type="string" translate="true">[Tab Group Name]</item>                 <item name="provider" xsi:type="string">product</item>                 <item name="dataScope" xsi:type="string">data.product</item>                 <item name="sortOrder" xsi:type="number">2</item>                 <item name="collapsible" xsi:type="boolean">true</item>                 <item name="opened" xsi:type="boolean">false</item>                 <item name="ns" xsi:type="string">product_form</item>             </item>         </argument>         <container name="testing_group">             <argument name="data" xsi:type="array">                 <item name="config" xsi:type="array">                     <item name="sortOrder" xsi:type="number">1</item>                 </item>             </argument>             <htmlContent name="html_content">                 <argument name="block" xsi:type="object">Vendor\Module\Block\Adminhtml\Product\Edit\Tab\CustomTab                 </argument>             </htmlContent>         </container>     </fieldset> </form>

2. Create CustomTab.php in Vendor/Module/Block/Adminhtml/Product/Edit/CustomTab.php
   
   
   <?php namespace Vendor\Module\Block\Adminhtml\Product\Edit\Tab; use Magento\Backend\Block\Template\Context; use Magento\Framework\Registry; class CustomTab extends \Magento\Framework\View\Element\Template { protected $_template = 'customtab.phtml'; protected $_coreRegistry = null; public function __construct(Context $context, Registry $registry, array $data = []) { $this->_coreRegistry = $registry; parent::__construct($context, $data); } public function getProduct() { return $this->_coreRegistry->registry('current_product'); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   <?php namespace Vendor\Module\Block\Adminhtml\Product\Edit\Tab; use Magento\Backend\Block\Template\Context; use Magento\Framework\Registry; class CustomTab extends \Magento\Framework\View\Element\Template {     protected $_template = 'customtab.phtml';     protected $_coreRegistry = null;     public function __construct(Context $context, Registry $registry, array $data = [])     {         $this->_coreRegistry = $registry;         parent::__construct($context, $data);     }     public function getProduct()     {         return $this->_coreRegistry->registry('current_product');     } }

3. Create customtab.phtml in Vendor/Module/view/adminhtml/templates/customtab.phtml
   
   
   <div> <span><?php echo __("Some Custom Data");?></span> <!-- Here Design or Data for Tab --> </div>

   1 2 3 4

   <div>     <span><?php echo __("Some Custom Data");?></span>     <!-- Here Design or Data for Tab --> </div>

And that’s it!

Do post any doubts related to the topic in the Comments section below and I’d be happy to help!

Thank you.