Add Tab On Product Edit Page Using Ui Component

Sometimes we need to add a custom tab on the product edit page for separate grouping of attributes, so here we will see how we can achieve that.

Add product_form.xml file

We need to add product_form.xml inside Vendor/Module/view/adminhtml/ui_component folder i.e,

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <htmlContent name="custom.setting" sortOrder="6">
        <argument name="data" xsi:type="array">
            <item name="wrapper" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Product Custom Tab</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="opened" xsi:type="boolean">true</item>
            </item>
        </argument>
        <settings>
            <wrapper>
                <canShow>true</canShow>
                <componentType>fieldset</componentType>
            </wrapper>
        </settings>
        <block class="Vendor\Module\Block\Adminhtml\Catalog\Product\Edit\CustomTab" name="custom.setting" >
            <arguments>
                <argument name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Product Custom Tab</item>
                    <item name="collapsible" xsi:type="boolean">true</item>
                    <item name="opened" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="string">170</item>
                    <item name="canShow" xsi:type="boolean">true</item>
                    <item name="componentType" xsi:type="string">fieldset</item>
                    <item name="group_code" xsi:type="string">advanced</item>
                    <item name="dataScope" xsi:type="string"></item>
                </argument>
            </arguments>
        </block>
    </htmlContent>
</form>

Now create block file Vendor\Module\Block\Adminhtml\Catalog\Product\Edit\CustomTab.php

<?php

namespace Vendor\Module\Block\Adminhtml\Catalog\Product\Edit;

use Magento\Backend\Block\Template\Context;
 
class CustomTab extends \Magento\Framework\View\Element\Template
{
    /**
     * @var string
     */
    protected $_template = 'product/edit/customtab.phtml';
 
    /**
     *
     * @param Context                                  $context
     * @param array                                    $data
     */
    public function __construct(
        Context $context,
        array $data = []
    ) {
    
        parent::__construct($context, $data);
    }
}

After creating a block file, we have to create a template file in which we can write our custom code which will be visible inside the custom tab.

This template file will be called in tab content.

protected $_template = ‘product/edit/customtab.phtml’

Now, create template file in location Vendor/Module/view/adminhtml/templates/product/edit/

Add custom code in this template file.

That’s all we have to do.

Thank you
Happy Coding 🙂