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: Create a Magento 2 new attribute for the custom tab]
  • [Step 2: Choose or make an attribute set for Magento product tabs]
  • [Step 3: Configure the custom product tab]
  • [Step 4: Defind the the templates and layout files]
  • [Step 5: Rename the product tabs]
  • [Step 6: Remove product tabs]
  • [Step 7: Add custom tab]
  • [Step 8: Add related products in tabbed navigation]

Step 1: Create a Magento 2 new attribute for the custom tab

  • Log in to your Magento Admin Panel.

  • Navigate to Stores > Attributes > Product.

Attribute

  • Click on Add New Attribute.

Add new attribute

  • Set the Default Label as Test and the Attribute Code as “test”.

Attribute proprerties

  • Click Save Attribute.

Then, you can see the test attribute in the list below:

Test attribute

Step 2: Choose or make an attribute set for Magento product tabs

  • Go to Stores > Attribute Set.

Attribute set configuration

  • If you haven’t created an Attribute Set yet, click on Add Attribute Set.

Attribute set

  • Enter “shirt” as the Attribute Set Name.

New attribute set

  • Click on the newly created “shirt” Attribute Set.

  • Move “test” from unassigned to Product Details by drag and drop test attribute

  • Drag and drop the “test” attribute from the unassigned section to the Product Details section

Test attribute

  • Click Save.

Step 3: Configure the custom product tab

  • Open the product edit page in the Admin Panel.

  • Set the template name as “shirt”.

Properties

  • Add the test attribute.

  • Click Save.

Now you’ll see the new “test” attribute set on the product edit page. Remember to update the attribute set and save your changes.

Step 4: 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 5: 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 6: 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 7: 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>

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.


automatic related product

Automatic Related Products for M2

Encourage customers to add more items to their cart by showing related products alongside their favorites

Check it out!


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.

Image Description
Vinh Jacker
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Previous Add CMS Block in checkout page
Next Add Quick View feature
One Step Checkout for Magento 2 by Mageplaza
x