Magento 2 - Tips and Tricks

HOW TO CUSTOMIZE PRODUCT INFO TABS IN MAGENTO 2

Product detail pages play an important role in generating sales through an e-commerce site. We can even say that it is the heart of every e-commerce site. And if customers don’t find proper details about the products, they will be less likely to purchase that product. Hence, it’s very important that you add the necessary details to the product page.

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

1. Renaming Product Tabs

This is the simplest task. For this, we have to override the base layout file named catalog_product_view.xml, which is obviously inside the 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 the title of the first tab called Detail by default 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 a single tab, in our case details tab. With <argument name=”title” translate=”true” xsi:type=”string”> we simply set a 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 the 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 follows the same procedure for every element. For this, we just have to set the remove attribute to true for any element, either tab or any 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

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

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 the 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 a 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

  • Written by: BizSpice
  • Posted on: October 25, 2018