Read More
Read More
Menu Close

    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="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
            <referenceBlock name="product_form">
                <block class="Webkul\Demo\Block\Adminhtml\Catalog\Product\Edit\Tab\Demo" name="">
                        <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>

    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.

    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.

    Searching for an experienced
    Magento 2 Company ?
    Read More
    This is demo tab content.

    Add Tab

    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.

    . . .
    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