Product detail page play important role in an ecommerce site. Even we can say that, it is the heart of every ecommerce site. And if customer don’t find proper detail about the products, he or she will be less likely to purchase that product. Hence, it’s very important that you add the necessary details on the product page.

There are many ways we can customize product tabs in Magento 2 . Let discuss some of them

 

1. Renaming product tabs

 

This is the simplest thing. For this we have to override base layout file named catalog_product_view.xml which is obviously inside Catalog Module i.e inside vendor/module_catalog.

For this put catalog_product_view.xml inside your theme file like this

 

 

 

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

 

And put code 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>
<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>

 

Here we have changed title of first tab that is Detail by default and we have changed its name to Description.

The first layout handler <referenceBlock name="product.info.details"> reference our product tabbed navigation as a whole while the child handler <referenceBlock name="product.info.description"> reference single tab, in our case details tab. With <argument name="title" translate="true" xsi:type="string"> we simply set new title for our tab. <arguments> handler is just a (required) container for <argument> and it doesn’t have it’s own attributes.(You can check referenceBlock name from original layout file that is inside Vendor).

 

Now After this product page will look like this

 

 

 

2. Removing product tabs

Removing something through XML is always an easy task and always contain same procedure for every element. For this we just have to set remove attribute to true for any element either its tab or other element.

 

In catalog_product_view.xml we are removing review tab 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>
<referenceBlock name="product.info.review" remove="true" />
</body>
</page>

Here <referenceBlock name="product.info.review" remove="true" /> is used for removing Review tab.

 

 

 

3. Adding Custom tabs

Sometime an extra tab is required on the product page to show additional information regarding product. For this we will create a new module and to start it first we have to create a new attribute for product in which we fill this extra information for product. So lets start

 

Step 1 : Create a new attribute.

 

Go to the Admin and navigate to Stores => Product and click on Add New Attribute

 

 

 

 

Set Default label and Attribute Code as per your requirement, For this article we are using Test as label and test Attribute Code. Now click on Save Attribute.

 

 

 

Step 2 : Set attribute in your attribute set.

 

Drag and Drop test attribute from unassigned to Product Details and click on Save.

 

 

 

Step 3 : Fill Value for test attribute in product from admin so that its content will be displayed in tab

 

 

 

 

Step 4 : Create Layout File

 

In app/code/<Vendor>/<Module>/view/frontend/layout, create catalog_product_view.xml and add the following code in the file:

 

<?xml version="1.0"?>

<page 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="test.tab" template="Bizspice_Addtab::custom_tab.phtml" group="detailed_info" >

<arguments>

<argument translate="true" name="title" xsi:type="string">Custom Tab</argument>

</arguments>

</block>

</referenceBlock>

</body>

</page>

 

Step 5 : Create Template File

 

In app/code/<Vendor>/<Module>/view/frontend/templates, create custom_tab.phtml and add the following code in the file:

 

<?php

$product = $block->getProduct();

?>

 

<h1 style="color: #1979c3"><?php echo $product->getData('test'); ?></h1>

 

And here is the final custom tab