{"id":1770,"date":"2021-05-17T10:22:16","date_gmt":"2021-05-17T10:22:16","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/create-a-custom-tab-and-call-custom-phtml-in-product-ui-component-form-in-magento-2\/"},"modified":"2025-07-16T17:50:28","modified_gmt":"2025-07-16T12:20:28","slug":"create-a-custom-tab-and-call-custom-phtml-in-product-ui-component-form-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/create-a-custom-tab-and-call-custom-phtml-in-product-ui-component-form-in-magento-2\/","title":{"rendered":"How to Create a Custom Tab and Call Custom Phtml in Product UI-Component Form in Magento 2"},"content":{"rendered":"\n

Magento 2\u00a0CMS not only facilitates users to customize the default features but also to add new features, buttons, forms, tabs, or any components in order to provide advanced functionalities that improve the store in terms of performance, administration, customer experience, etc.<\/p>\n\n\n\n

You may develop Magento 2 extensions<\/a> that extend such custom features in the online store.<\/p>\n\n\n\n

While developing such extensions, you may require to create a custom tab and call custom phtml in product UI-component form in Magento 2 <\/strong><\/em>to take any input value from the admin. Likewise if you want to hide the unnecessary tabs in the product page frontend then Magento 2 hide an empty custom tab<\/a> will help to not let your customers distract from their main goal that is purchasing.<\/p>\n\n\n\n

The product UI-component form in Magento 2 allows the admin to create different Magento 2 product types <\/a>such as simple<\/a>, configurable<\/a>, virtual<\/a>, downloadable<\/a>, bundle<\/a> products, and edit them from the backend Catalog > Products > Product edit form<\/strong>.<\/p>\n\n\n\n

The \u2018product edit form\u2019 offers various tabs by default. However, these default tabs are not always enough to meet the business requirement. The store owner may require an additional tab to upload a CSV file or enable\/disable the custom module that offers product-specific features.<\/p>\n\n\n\n

For example,<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

Check out the below solution and add your required customized components under the custom tab.<\/p>\n\n\n\n

Also, if you may need to , you can refer to my solution.<\/a><\/p>\n\n\n\n

Method to Create a Custom Tab and Call Custom Phtml in Product UI-Component Form in Magento 2<\/h2>\n\n\n\n

1. Create the product_form.xml<\/strong> file at app\/code\/Vendor\/Module\/view\/adminhtml\/ui_component<\/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=\"custom_tab\">\n        <argument name=\"data\" xsi:type=\"array\">\n            <item name=\"config\" xsi:type=\"array\">\n                <item name=\"label\" xsi:type=\"string\" translate=\"true\">Custom tab<\/item>\n                <item name=\"collapsible\" xsi:type=\"boolean\">true<\/item>\n                <item name=\"opened\" xsi:type=\"boolean\">true<\/item>\n                <item name=\"canShow\" xsi:type=\"boolean\">true<\/item>\n                <item name=\"sortOrder\" xsi:type=\"string\">1<\/item>\n            <\/item>\n        <\/argument>\n        <container name=\"custom_tab_container\">\n            <argument name=\"data\" xsi:type=\"array\">\n                <item name=\"config\" xsi:type=\"array\">\n                    <item name=\"sortOrder\" xsi:type=\"string\">1<\/item>\n                <\/item>\n            <\/argument>\n            <htmlContent name=\"html_content\">\n                <argument name=\"block\" xsi:type=\"object\">Vendor\\Module\\Block\\Adminhtml\\Product\\CustomTab<\/argument>\n            <\/htmlContent>\n        <\/container>\n    <\/fieldset>\n<\/form><\/pre>\n\n\n\n
2. Create the CustomTab.php <\/strong>file at <\/strong>app\/code\/Vendor\/Module\/Block\/Adminhtml\/Product<\/strong><\/p>\n\n\n\n
<?php\nnamespace Vendor\\Module\\Block\\Adminhtml\\Product;\nuse Magento\\Backend\\Block\\Template;\n\nclass CustomTab extends Template\n{\n    protected $_template = 'custom_tab.phtml';\n\n}<\/pre>\n\n\n\n
3. Create the custom_tab.phtml <\/strong>file at app\/code\/Vendor\/Module\/view\/adminhtml\/templates<\/strong><\/p>\n\n\n\n
<?php\necho \"coustom tab\";\n?><\/pre>\n\n\n\n
The custom tab in the product UI-component form looks as shown below:<\/p>\n\n\n\n
\"screenshot\"<\/figure>\n\n\n\n
That\u2019s it!<\/p>\n\n\n\n
Also, do share the post with Magento Community via social media.<\/p>\n\n\n\n
Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"
Magento 2\u00a0CMS not only facilitates users to customize the default features but also to add new features, buttons, forms, tabs, or any components in order…<\/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-1770","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1770","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=1770"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1770\/revisions"}],"predecessor-version":[{"id":18076,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1770\/revisions\/18076"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}