{"id":347,"date":"2019-03-21T21:20:11","date_gmt":"2019-03-21T21:20:11","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/03\/21\/add-custom-tab-with-custom-template-on-magento-2-2-product-edit-page\/"},"modified":"2025-05-22T17:02:23","modified_gmt":"2025-05-22T11:32:23","slug":"add-custom-tab-with-custom-template-on-magento-2-2-product-edit-page","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-tab-with-custom-template-on-magento-2-2-product-edit-page\/","title":{"rendered":"Add Custom Tab with Custom Template on Magento 2.2 Product Edit Page"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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 <\/strong><\/em>custom<\/strong><\/em> tab with <\/strong><\/em>custom<\/strong><\/em> template on Magento 2.2 product edit page<\/strong><\/em>! You can also hide unnecessary tabs<\/a> 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<\/p>\n\n\n\n

Method to Add Custom Tab with Custom Template on Magento 2.2 Product Edit Page:<\/h2>\n\n\n\n

Step 1: <\/strong>Create product_form.xml<\/strong> in Vendor\/Module\/view\/adminhtml\/ui_component\/product_form.xml<\/strong><\/p>\n\n\n\n

<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<form xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n      xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd\">\n    <fieldset name=\"testingproduct\">\n        <argument name=\"data\" xsi:type=\"array\">\n            <item name=\"config\" xsi:type=\"array\">\n                <item name=\"label\" xsi:type=\"string\" translate=\"true\">[Tab Group Name]<\/item>\n                <item name=\"provider\" xsi:type=\"string\">product<\/item>\n                <item name=\"dataScope\" xsi:type=\"string\">data.product<\/item>\n                <item name=\"sortOrder\" xsi:type=\"number\">2<\/item>\n                <item name=\"collapsible\" xsi:type=\"boolean\">true<\/item>\n                <item name=\"opened\" xsi:type=\"boolean\">false<\/item>\n                <item name=\"ns\" xsi:type=\"string\">product_form<\/item>\n            <\/item>\n        <\/argument>\n        <container name=\"testing_group\">\n            <argument name=\"data\" xsi:type=\"array\">\n                <item name=\"config\" xsi:type=\"array\">\n                    <item name=\"sortOrder\" xsi:type=\"number\">1<\/item>\n                <\/item>\n            <\/argument>\n            <htmlContent name=\"html_content\">\n                <argument name=\"block\" xsi:type=\"object\">Vendor\\Module\\Block\\Adminhtml\\Product\\Edit\\Tab\\CustomTab\n                <\/argument>\n            <\/htmlContent>\n        <\/container>\n    <\/fieldset>\n<\/form><\/pre>\n\n\n\n
Step 2:<\/strong> Create CustomTab.php<\/strong> in Vendor\/Module\/Block\/Adminhtml\/Product\/Edit\/CustomTab.php<\/strong><\/p>\n\n\n\n
<?php\nnamespace Vendor\\Module\\Block\\Adminhtml\\Product\\Edit\\Tab;\nuse Magento\\Backend\\Block\\Template\\Context;\nuse Magento\\Framework\\Registry;\nclass CustomTab extends \\Magento\\Framework\\View\\Element\\Template\n{\n    protected $_template = 'customtab.phtml';\n    protected $_coreRegistry = null;\n    public function __construct(Context $context, Registry $registry, array $data = [])\n    {\n        $this->_coreRegistry = $registry;\n        parent::__construct($context, $data);\n    }\n    public function getProduct()\n    {\n        return $this->_coreRegistry->registry('current_product');\n    }\n}<\/pre>\n\n\n\n
Step 3:<\/strong> Create customtab.phtml<\/strong> in Vendor\/Module\/view\/adminhtml\/templates\/customtab.phtml<\/strong><\/p>\n\n\n\n
<div>\n    <span><?php echo __(\"Some Custom Data\");?><\/span>\n    <!-- Here Design or Data for Tab -->\n<\/div><\/pre>\n\n\n\n
And that’s it!<\/p>\n\n\n\n
Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-347","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=347"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/347\/revisions"}],"predecessor-version":[{"id":15489,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/347\/revisions\/15489"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}