To add a new custom tab to a product page you need to follow these steps:
- Create a new module:
module.xml:
|
1 2 3 4 5 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd"> <module name="BelVG_AddTab" setup_version="1.0.0"> </module> </config> |
registration.php:
|
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'BelVG_AddTab', __DIR__ ); |
- Create a new product attribute. We are going to do this with the help of the InstallData.php script
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<?php /* app/code/BelVG/AddTab/Setup/InstallData.php */ namespace BelVG\AddTab\Setup; use Magento\Eav\Setup\EavSetup; use Magento\Eav\Setup\EavSetupFactory; use Magento\Framework\Setup\InstallDataInterface; use Magento\Framework\Setup\ModuleContextInterface; use Magento\Framework\Setup\ModuleDataSetupInterface; /** * @codeCoverageIgnore */ class InstallData implements InstallDataInterface { /** * EAV setup factory * * @var EavSetupFactory */ private $eavSetupFactory; /** * Init * * @param EavSetupFactory $eavSetupFactory */ public function __construct(EavSetupFactory $eavSetupFactory) { $this->eavSetupFactory = $eavSetupFactory; } /** * {@inheritdoc} * @SuppressWarnings(PHPMD.ExcessiveMethodLength) */ public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context) { /** @var EavSetup $eavSetup */ $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]); /** * Add attributes to the eav/attribute */ $eavSetup->addAttribute( \Magento\Catalog\Model\Product::ENTITY, 'test_tab_attribute', [ 'group' => 'Product Details', 'type' => 'text', 'input' => 'textarea', 'backend' => '', 'frontend' => '', 'label' => 'Test Tab Attribute', 'class' => '', 'source' => '', 'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_GLOBAL, 'visible' => true, 'required' => false, 'user_defined' => false, 'default' => 0, 'searchable' => false, 'filterable' => false, 'comparable' => false, 'visible_on_front' => false, 'used_in_product_listing' => true, 'unique' => false, 'apply_to' => '' ] ); } } |
- Add the new custom tab to a product page with the help of the catalog_product_view.xml file
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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.info.details"> <block class="Magento\Catalog\Block\Product\View" name="new.tab" template="BelVG_AddTab::new_tab.phtml" group="detailed_info" > <arguments> <argument translate="true" name="title" xsi:type="string">New Tab</argument> </arguments> </block> </referenceBlock> </body> </page> |
- Then create new_tab.phtml template where we need to output our attribute
|
1 2 3 4 5 |
<?php /** @var \Magento\Catalog\Block\Product\View $block */ $product = $block->getProduct(); ?> <span style="color: #0000ff"><?php echo $product->getData('test_tab_attribute'); ?></span> |
- Change the attribute value on the Product Edit page
And here we get a new tab on the required page.
Magento Extensions
Take your online store to the next level with BelVG Magento Extensions
Visit the store
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
Hello,
How can we handle tab name from admin side? Like name comes from product attribute name which we set in admin.
Could you please provide magento version?
Hi,
Using your snippet I am unable to add more than one custom product tab. It throws exception
. The same exception for other argument type like at_call and at_code.
How do I more multiple product tabs using your above code?
Thanks.
Could you please provide any details?
I tried the same method. But the new tab is not displaying on the product page.
Thanks for the tutorial. I helped me a lot.
Very useful , great work.
Thanks