Magento 2 - Tips and Tricks

LEARN HOW TO CUSTOMIZE PRODUCT INFO TABS ON MAGENTO 2

Product detail page plays an important role in an e-commerce site. It would not be wrong to say that, it is the heart of every e-commerce site. If a customer doesn’t find proper detail about the product, 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. Product tab plays an important role in keeping details about products.

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

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 the title of the the 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 does’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 the the same procedure for every element. For this, we just have to set “remove” attribute to “true” for any element either its tab or another element.

In catalog_product_view.xml we are removingreview 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 and to start it first we have to create a new attribute for a product in which we fill this extra information for the product. So let’s 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 asper 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

  • Written by: BizSpice
  • Posted on: June 24, 2019