Reading list Switch to dark mode

    Add Tab On Product Edit Page Magento2 Admin

    Updated 27 January 2023

    Here we will learn how to add Tab on product edit page magento admin

    Add Tab on Product Page

    First of all create ‘di.xml’ file in location Webkul/Demo/etc/adminhtml/di.xml.

    <?xml version="1.0"?>
    <config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool">
                <argument name="modifiers" xsi:type="array">
                    <item name="demo-tab" xsi:type="array">
                        <item name="class" xsi:type="string">Webkul\Demo\Ui\DataProvider\Product\Form\Modifier\DemoTab</item>
                        <item name="sortOrder" xsi:type="number">20</item>

    Now create DemoTab.php in location Webkul\Demo\Ui\DataProvider\Product\Form\Modifier.

    namespace Webkul\Demo\Ui\DataProvider\Product\Form\Modifier;
    use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
    use Magento\Framework\View\LayoutFactory;
    use Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab\Demo;
    class DemoTab extends AbstractModifier
        protected $layoutFactory;
        public function __construct(
            LayoutFactory $layoutFactory
        ) {
            $this->layoutFactory = $layoutFactory;
         * Modify data
         * @param array $data
         * @return array
        public function modifyData(array $data)
            return $data;
         * Modify meta data
         * @param array $meta
         * @return void
        public function modifyMeta(array $meta)
            $meta['demo_tab'] = [
                "children" => [
                    "demo_tab_container" => [
                        "arguments" => [
                            "data" => [
                                "config" => [
                                    "formElement" => "container",
                                    "componentType" => "container",
                                    'component' => 'Magento_Ui/js/form/components/html',
                                    "required" => 0,
                                    "sortOrder" => 5,
                                    "content" => $this->layoutFactory->create()->createBlock(
                "arguments" => [
                    "data" => [
                        "config" => [
                            "componentType" => "fieldset",
                            "label" => __("Demo Tab"),
                            "collapsible" => true,
                            "sortOrder" => 5,
                            'opened' => true,
                            'canShow' => true
            return $meta;

    Now create block Demo.php in location Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab.

    namespace Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab;
    class Demo extends \Magento\Backend\Block\Widget
         * @var string
        protected $_template = 'product/edit/demo.phtml';

    protected $_template = ‘product/edit/demo.phtml’
    This template file will be called in tab content.

    Searching for an experienced
    Magento 2 Company ?
    Read More

    Finally create template file demo.phtml in location Webkul/Demo/view/adminhtml/templates/product/edit.

    This is demo tab content.

    Add Tab

    If you have any query please comment below.

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


  • kavya k
    I followed the above steps which are mentioned in tutorial, but it is not working in ver 2.2.4
  • Zulqarnain Abdul Jabbar
    An easy to follow blog. Thank you for sharing.
    • Zulqarnain Abdul Jabbar
      I further work to add a form in demo.phtml file
  • Johan van de Vijver
    Hi, i followed your steps of this tutorial. But unfortunately the custom tab is not showing. Is this applicable in Magento 2.2?
    • Webkul Support
      We will try to add that in future blog
      • sunil verma
        Any news how to add it on v 2.2
        • sunil verma
          Hi Support, is there any tutorial doe v 2.2, above is not working in 2.2 version.
  • Sikander Al Masum
    I did exactly like the tutorial, but unfortunately not working. Im using ver 2.1.5.
  • kumarg311
    I create textbox in demo.phtml but textbox value not posted on product save
  • Futuresoft India
    I create textbox in demo.phtml but textbox value not posted on product save
  • Maciej Sroka
    How do you remove the Tab that is already there?
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home