How to Add Custom Tabs in Magento 2 Product Page

Adding custom tabs on a product page helps organize content and improves user experience. By default, Magento 2 product pages have three tabs 一 details, reviews, and more information.

This tutorial shows you how to add a new tab with packaging details.

Prerequisites

1. Switch to developer mode by running the following command:

   php bin/magento deploy:mode:set developer

2. Disable cache through CLI using the following command:

   php bin/magento cache:disable

How to Add Custom Tabs in Magento 2 Product Page

Step 1: Add New Attribute

1. In the Magento admin panel, navigate to Stores > Attributes > Product.

2. Click the orange Add Attribute button on the top right.

3. Click Properties in the left panel and add the following details:
   Attribute Properties > Default Label: Add “Packaging” value.
   Advanced Attribute Properties > Attribute Code: Add “packaging” value.

4. Click Save Attribute. You should now see a new “Packaging” attribute in the list.

Step 2: Create Attribute Set for Custom Tabs in Magento 2 Product Page

1. Go to Store > Attributes > Attribute Set.

2. Click the Default attribute set.

3. Drag the packaging attribute from the “Unassigned Attributes” list and drop it to “Product Details.”

4. Click Save.

Step 3: Create a New Module

Create module.xml in the “packaging-content” folder by using the following code:

nano app/code/Techobservatory/packaging-content/etc/module.xml

Next, insert the following code in the module.xml file:

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Techobservatory_packaging-content" setup_version="2.0.0">
<sequence>
<module name="Magento_Catalog"/>
</sequence>
</module>
</config>

This will define the module name and version.

Step 4: Create a registration.php File

Create a registration.php file in the app/code/Techobservatory/packaging-content folder by using the following code:

nano app/code/Techobservatory/packaging-content/registration.php

Add the following code in the registration.php file:

<?php

MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
'Techobservatory_packaging-content',
__DIR__
);

Creating a registration.php file will direct Magento to locate the module.

Step 5: Activate the Module

The “packaging-content” has now been created. To activate it, use the following code:

php bin/magento setup:upgrade

Check if the module appears in the list of enabled modules by using the following code:

php bin/magento module:status

Step 6: Create a Template file

Create a template file (packaging-content.phtml) in the templates/product/view/ directory using the following code:

nano app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/templates/product/view/packaging-content.phtml

Then insert the following code in the template file:

<?php
$_helper = $this->helper('MagentoCatalogHelperOutput');
$_product = $block->getProduct();
$_code = $block->getAtCode();
$_className = $block->getCssClass();
$_attributeLabel = $block->getAtLabel();
$_attributeType = $block->getAtType();
$_attributeAddAttribute = $block->getAddAttribute();
if ($_attributeLabel && $_attributeLabel == 'default') {
$_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();
}
$_attributeValue = $_product->getResource()->getAttribute($_code)->getFrontend()->getValue($_product);
?>

<?php if ($_attributeValue): ?>
<div class="packaging-content" <?php echo $_attributeAddAttribute;?>>
<?php echo $_attributeValue; ?>
</div>
<?php endif; ?>

Step 7: Create a Layout File

Finally, create a layout file (catalog_product_view.xml) in the layout/product/view/ directory by using the following code:

nano app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/layout/product/view/catalog_product_view.xml

Insert the following code in the xml file:

<?xml version="1.0"?>
<page layout="1column" 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="MagentoCatalogBlockProductViewDescription" name="packaging-content" template="Magento_Catalog::product/view/packaging-content.phtml" group="detailed_info">               <arguments>
<argument name="at_call" xsi:type="string">getPackaging</argument>
<argument name="at_code" xsi:type="string">packaging</argument>
<argument name="css_class" xsi:type="string">packaging</argument>
<argument name="at_label" xsi:type="string”>packaging</argument>
<argument name="add_attribute" xsi:type="string">itemprop="packaging"</argument>
<argument name="title" translate="true" xsi:type="string">Packaging content</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>