How to Create a Custom Tab and Call Custom Phtml in Product UI-Component Form in Magento 2

Magento 2 CMS 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.

You may develop Magento 2 extensions that extend such custom features in the online store.

While developing such extensions, you may require to create a custom tab and call custom phtml in product UI-component form in Magento 2 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 will help to not let your customers distract from their main goal that is purchasing.

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

The ‘product edit form’ 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.

For example,

Check out the below solution and add your required customized components under the custom tab.

Also, if you may need to , you can refer to my solution.

Method to Create a Custom Tab and Call Custom Phtml in Product UI-Component Form in Magento 2

1. Create the product_form.xml file at app/code/Vendor/Module/view/adminhtml/ui_component

<?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="custom_tab">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Custom tab</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="opened" xsi:type="boolean">true</item>
                <item name="canShow" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="string">1</item>
            </item>
        </argument>
        <container name="custom_tab_container">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="string">1</item>
                </item>
            </argument>
            <htmlContent name="html_content">
                <argument name="block" xsi:type="object">Vendor\Module\Block\Adminhtml\Product\CustomTab</argument>
            </htmlContent>
        </container>
    </fieldset>
</form>

2. Create the CustomTab.php file at app/code/Vendor/Module/Block/Adminhtml/Product

<?php
namespace Vendor\Module\Block\Adminhtml\Product;
use Magento\Backend\Block\Template;

class CustomTab extends Template
{
    protected $_template = 'custom_tab.phtml';

}

3. Create the custom_tab.phtml file at app/code/Vendor/Module/view/adminhtml/templates

<?php
echo "coustom tab";
?>

The custom tab in the product UI-component form looks as shown below:

That’s it!

Also, do share the post with Magento Community via social media.

Thank you.