Add and Customize Custom Tab on Product Page Magento 2

Add and Customize Custom Tab on Product Page Magento 2

In online shopping, displaying proper specifications about the product is very important for ease of customers. In this article, I am going to explain Custom Tab on Product Page Magento 2.

Let’s Continue to customise content tab in product detail page :

1. Remove Product Tab

Removing any tab from product page is quite simple task. We just need to follow few steps.

Folder path:

/vendor/magento/module-catalog/view/frontend/layout

We need to make changes in catalog_product_view.xml

Override file in our theme:

/app/design/frontend/<vendor_name>/<theme_name>/Magento_Catalog/layout/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>

In the above code, we are removing the review tab from the product page. If you want to remove another tab just target that element and remove it.


2. Add new Custom Tab

Define tab in 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" name="custom.tab" template="Magento_Catalog::custom/custom_tab.phtml" group="detailed_info" >
               <arguments>
                   <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
               </arguments>
           </block>
       </referenceBlock>
   </body>
</page>

Now, define template file for custom tab in

/app/design/frontend/<vendor_name>/<theme_name>/Magento_Catalog/templates/custom/custom_tab.phtml

<?php
  echo "This is Custom tab in product detail page";
?>
Call Static block in custom product tab :
<?php
  echo $this->getLayout()
     ->createBlock('Magento\Cms\Block\Block')
     ->setBlockId('your_block_identifier')
     ->toHtml();
?>

3. Rename Product Tab

Rename the existing tab is a very simple task. We are going to target Custom Tab and rename it to New Custom Tab

Go to 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">                
      <referenceBlock name="custom.tab">
        <arguments>
          <argument name="title" translate="true" xsi:type="string">New Custom Tab</argument>
        </arguments>
      </referenceBlock>
    </referenceBlock>
  </body>
</page>

Clear Magento Cache

$ php bin/magento c:f
$ php bin/magento c:c

Hope this article helped you to add custom tab on product page.

If you have any queries, ask me at aryansrivastavadesssigner@gmail.com or contact me here.

If you like this article, you can buy me a cup of coffee Buy me a Coffee.

About Aryan Srivastava

I’m a Passionate Magento 2 Frontend Developer. I have 2.5+ years of experience in Frontend. I cherish taking up complex problems and turning them into the best layout in the easiest and proper way. I love to work on Magento 2 e-Commerce Solutions.

View all posts by Aryan Srivastava →

Leave a Reply

Your email address will not be published. Required fields are marked *