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.

    Product in Magento admin panel
    Go to Stores > Attributes > Product through Magento admin panel
  2. Click the orange Add Attribute button on the top right.

    Add Attribute button on Product Attributes page
    Click Add Attribute button on Product Attributes page.
  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.

    Properties section, Default Label field, Attribute Code field on New Product Attribute
    Configure Properties section on New Product Attribute page
  4. Click Save Attribute. You should now see a new “Packaging” attribute in the list.

    Save Attribute button on New Product Attribute page
    Click Save Attribute button on New Product Attribute page

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

  1. Go to Store > Attributes > Attribute Set.

    Attribute Set in Magento admin panel
    Go to Store > Attributes > Attribute Set
  2. Click the Default attribute set.

    Default Attribute Set
    Click the Default attribute set
  3. Drag the packaging attribute from the “Unassigned Attributes” list and drop it to “Product Details.”

    Packaging attribute and Save button on Default Attribute Set
    Drag and drop “packaging” attribute
  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

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::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('Magento\Catalog\Helper\Output');
$_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="Magento\Catalog\Block\Product\View\Description" 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>
Custom tab in Magento 2
Custom tab on product page

Was this article helpful?

Leave a Comment