1. Home
  2. Magento 2 Module Development
  3. How to Add Custom Tab in Product Page Magento 2

How to Add Custom Tab in Product Page Magento 2

Product details play an important role in customer experience, so it’s critical to let customers understand what they are going to buy. But a product page shouldn’t be flooded with too much information.

Adding tabs is a great way to help you reduce information overloading as it can organize large content into easily digestible data chunks. Using this method, all the information which is related to a specific subject will be provided without overwhelming users.

As a result, users can quickly navigate through all the content at the same time from just one tab, which would simply facilitate access to information without negatively impacting your SEO and site ranking. Therefore, in this post, I will show you the way to create a custom tab in Magento 2 Product Page.

5 steps to add a Custom Tab to the Product Page in Magento 2:

Step 1: Define the templates and layout files

Firstly, you need to define which templates and layout files that you are going to customize. An effective method which can help you to do this is enabling Template Path Hints and adding Block Names to Hints via Magento admin. Please follow this: Stores > Configuration > Advanced > Developer > Debug. Now, you will see that the Magento module which is responsible for product info tabs is module-catalog. You can start your customization now.

Step 2: Rename the product tabs

Before setting another title for the product tab, you need to override base layout file catalog_product_view.xml which can be found inside the vendor/module_catalog folder. The standard way to override this file is to create a new layout file inside your theme scope and then name it just like the base file. Following is how your file path will look like: app/design/frontend/<Mageplaza>/<Theme>/Magento_Catalog/layout/catalog_product_view.xml

And this is the code which is inside the 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">                
      <referenceBlock name="product.info.description">
        <arguments>
          <argument name="title" translate="true" xsi:type="string">Description</argument>
        </arguments>
      </referenceBlock>
    </referenceBlock>
  </body>
</page>

In the above code, the first layout handler <referenceBlock name="product.info.details"> is used to reference your product tabbed navigation as a whole. Meanwhile, the child handler <referenceBlock name="product.info.description"> reference individual tab, in this example is your case details tab.

By using <argument name="title" translate="true" xsi:type="string"> you can set new title for your tab. Note that the handler <arguments> is just a container for <argument> and it does not have it’s own attributes.

Step 3: Remove product tabs

Removing product tabs is quite a simple task. You just need to reference your target block and set the remove attribute to true.

Bellow is the catalog_product_view.xml:

<?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.review" remove="true" />
  </body>
</page>

Step 4: Add custom tab

Bellow is the way you can add a custom tab to your product page: Firstly, go to Magento admin and create a new attribute. Then, name it Packaging and add it to default attribute set.

After finishing the above step, you need to create a new template file. The file can be named as packaging-content.phtml and be saved in app/design/frontend/<Magplaza>/<Theme>/Magento_Catalog/templates/product/view/.

Next, paste this code to the 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; ?>

Make sure that the N.B. attribute set match with the string value in your if statement which is in line number 9.

Finally, place the below code in your layout file catalog_product_view.xml:

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

Step 5: Add related products in tabbed navigation

In order to add related products in tabbed navigation, there will be two files which you will need to edit, which are template and layout.

With the template file, name it as related-products.phtml and save in app/design/frontend/<Mageplaza>/<Theme>/Magento_Catalog/templates/product/. The file will only have one code line:

<?php echo $this->getBlockHtml('catalog.product.related'); ?>

The layout file which named catalog_product_view.xml will look like this:

<?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>
    <!— 1st Code Block: Get Related Products as new tab -->
    <referenceBlock name="product.info.details">
      <block class="Magento\Catalog\Block\Product\View" name="deliveryinfo.tab" as="deliveryinfo" template="Magento_Catalog::product/related-products.phtml" group="detailed_info" >
        <arguments>
          <argument translate="true" name="title" xsi:type="string">Related Products</argument>
        </arguments>
      </block>
    </referenceBlock>
 
    <!— 2nd Code Block: Move original block to product info tabs -->
    <move element="catalog.product.related" destination="product.info.details" />
  </body>
</page>

The first code is for setting up a new tab with related products. The second code is used to change your upsell-products.phtml template file to this:

<?php echo $this->getBlockHtml('product.info.upsell'); ?>

Here are some customizations you need to make in your layout file:

  • Line 6: change template file’s name to upsell-products.phtml.
  • Line 8: title your tab to You might be interested.
  • Line 14: element the attribute to product.info.upsell.

Conclusion

In conclusion, it is not too difficult to customize and add a custom tab to your product page’s tabbed navigation. I hope that after reading this post, you will be able to have new tabs with new customized content with ease by adding some CSS for styling.

Previous Add CMS Block in checkout page
Next Add Quick View feature
One Step Checkout for Magento 2 by Mageplaza

Enjoyed the tutorial? Spread it to your friends!