Menu Close
    Hire Us Request Quote Reading List Switch to Dark Mode

    Add Tab On Product Edit Page Magento 2.1.0 Admin

    Here we will learn how to add Tab on product edit page magento admin in Magento Version 2.1.0.
    Magento 2.1.0 structure is different from previous version of magento2.

    Add Tab on Product Page

    First of all create ‘catalog_product_edit.xml’ file in location Webkul/Demo/view/adminhtml/layout.

    <?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceBlock name="product_form">
                <block class="Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab\Demo" name="demo.tab">
                    <arguments>
                        <argument name="config" xsi:type="array">
                            <item name="label" xsi:type="string" translate="true">Demo Tab</item>
                            <item name="collapsible" xsi:type="boolean">true</item>
                            <item name="opened" xsi:type="boolean">true</item>
                            <item name="sortOrder" xsi:type="string">2</item>
                            <item name="canShow" xsi:type="boolean">true</item>
                            <item name="componentType" xsi:type="string">fieldset</item>
                        </argument>
                    </arguments>
                </block>
            </referenceBlock>
        </body>
    </page>
    
    

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

    <?php
    namespace Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab;
    
    use Magento\Backend\Block\Template\Context;
    use Magento\Framework\Registry;
    
    class Demo extends \Magento\Framework\View\Element\Template
    {
        /**
         * @var string
         */
        protected $_template = 'product/edit/demo.phtml';
    
        /**
         * Core registry
         *
         * @var Registry
         */
        protected $_coreRegistry = null;
    
        public function __construct(
            Context $context,
            Registry $registry,
            array $data = []
        )
        {
            $this->_coreRegistry = $registry;
            parent::__construct($context, $data);
        }
    
        /**
         * Retrieve product
         *
         * @return \Magento\Catalog\Model\Product
         */
        public function getProduct()
        {
            return $this->_coreRegistry->registry('current_product');
        }
    
    }
    

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

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

    This is demo tab content.

    If you are using Magento 2.0.x then read how to create tab on product page in Magento 2.0.x Admin.

    If you have any query please comment below.

    . . .

    Comments (11)

    Add Your Comment

  • 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
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close