{"id":12210,"date":"2017-01-12T15:12:39","date_gmt":"2017-01-12T12:12:39","guid":{"rendered":"http:\/\/blog.belvg.com\/?p=12210"},"modified":"2025-06-30T22:44:31","modified_gmt":"2025-06-30T20:44:31","slug":"how-to-add-new-tabs-to-a-product-page-in-magento-2","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/how-to-add-new-tabs-to-a-product-page-in-magento-2.html","title":{"rendered":"How to Add New Tabs to a Product Page in Magento 2"},"content":{"rendered":"\n

To add a new custom tab to a product page you need to follow these steps:<\/p>\n

<\/p>\n

    \n
  1. Create a new module:<\/li>\n<\/ol>\n

    \"How<\/p>\n

    module.xml:<\/p>\n

    <?xml version=\"1.0\"?>\r\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/Module\/etc\/module.xsd\">\r\n   <module name=\"BelVG_AddTab\" setup_version=\"1.0.0\">\r\n   <\/module>\r\n<\/config>\r\n<\/pre>\n
    registration.php:<\/p>\n
    <?php\r\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\r\n   \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\r\n   'BelVG_AddTab',\r\n   __DIR__\r\n);\r\n<\/pre>\n
      \n
    1. Create a new product attribute. We are going to do this with the help of the InstallData.php script<\/li>\n<\/ol>\n
      <?php\r\n\/* app\/code\/BelVG\/AddTab\/Setup\/InstallData.php *\/\r\n\r\nnamespace BelVG\\AddTab\\Setup;\r\n\r\nuse Magento\\Eav\\Setup\\EavSetup;\r\nuse Magento\\Eav\\Setup\\EavSetupFactory;\r\nuse Magento\\Framework\\Setup\\InstallDataInterface;\r\nuse Magento\\Framework\\Setup\\ModuleContextInterface;\r\nuse Magento\\Framework\\Setup\\ModuleDataSetupInterface;\r\n\r\n\/**\r\n* @codeCoverageIgnore\r\n*\/\r\nclass InstallData implements InstallDataInterface\r\n{\r\n   \/**\r\n    * EAV setup factory\r\n    *\r\n    * @var EavSetupFactory\r\n    *\/\r\n   private $eavSetupFactory;\r\n\r\n   \/**\r\n    * Init\r\n    *\r\n    * @param EavSetupFactory $eavSetupFactory\r\n    *\/\r\n   public function __construct(EavSetupFactory $eavSetupFactory)\r\n   {\r\n       $this->eavSetupFactory = $eavSetupFactory;\r\n   }\r\n\r\n   \/**\r\n    * {@inheritdoc}\r\n    * @SuppressWarnings(PHPMD.ExcessiveMethodLength)\r\n    *\/\r\n   public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)\r\n   {\r\n       \/** @var EavSetup $eavSetup *\/\r\n       $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);\r\n\r\n       \/**\r\n        * Add attributes to the eav\/attribute\r\n        *\/\r\n\r\n       $eavSetup->addAttribute(\r\n           \\Magento\\Catalog\\Model\\Product::ENTITY,\r\n           'test_tab_attribute',\r\n           [\r\n               'group' => 'Product Details',\r\n               'type' => 'text',\r\n               'input' => 'textarea',\r\n               'backend' => '',\r\n               'frontend' => '',\r\n               'label' => 'Test Tab Attribute',\r\n               'class' => '',\r\n               'source' => '',\r\n               'global' =>  \\Magento\\Eav\\Model\\Entity\\Attribute\\ScopedAttributeInterface::SCOPE_GLOBAL,\r\n               'visible' => true,\r\n               'required' => false,\r\n               'user_defined' => false,\r\n               'default' => 0,\r\n               'searchable' => false,\r\n               'filterable' => false,\r\n               'comparable' => false,\r\n               'visible_on_front' => false,\r\n               'used_in_product_listing' => true,\r\n               'unique' => false,\r\n               'apply_to' => ''\r\n           ]\r\n       );\r\n   }\r\n}<\/pre>\n
        \n
      1. Add the new custom tab to a product page with the help of the catalog_product_view.xml file<\/li>\n<\/ol>\n
        <?xml version=\"1.0\"?>\r\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\r\n   <body>\r\n       <referenceBlock name=\"product.info.details\">\r\n           <block class=\"Magento\\Catalog\\Block\\Product\\View\" name=\"new.tab\" template=\"BelVG_AddTab::new_tab.phtml\" group=\"detailed_info\" >\r\n               <arguments>\r\n                   <argument translate=\"true\" name=\"title\" xsi:type=\"string\">New Tab<\/argument>\r\n               <\/arguments>\r\n           <\/block>\r\n       <\/referenceBlock>\r\n   <\/body>\r\n<\/page>\r\n<\/pre>\n
          \n
        1. Then create new_tab.phtml template where we need to output our attribute<\/li>\n<\/ol>\n
          <?php\r\n\/** @var \\Magento\\Catalog\\Block\\Product\\View $block *\/\r\n$product = $block->getProduct();\r\n?>\r\n<span style=\"color: #0000ff\"><?php echo $product->getData('test_tab_attribute'); ?><\/span>\r\n<\/pre>\n
            \n
          1. Change the attribute value on the Product Edit page<\/li>\n<\/ol>\n
            \"How<\/p>\n
            And here we get a new tab on the required page.<\/p>\n
            <\/a>
            \"Magento
            Magento Extensions<\/h3>
            Take your online store to the next level with BelVG Magento Extensions<\/p>Visit the store<\/span><\/a><\/div><\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"To add a new custom tab to a product page you need to follow these …","protected":false},"author":58,"featured_media":12215,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[14,389,524,526,34],"tags":[],"class_list":["post-12210","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-magento","category-magento2-development","category-magento-speed-optimization","category-magento-theme","category-tipstricks","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t