Nerd For Tech
Published in

Nerd For Tech

Add and Customize Custom Tab on Product Page Magento 2

E-commerce plays a very important role in our life especially in this Covid-19 Pandemic. As we all know, it’s not safe going out for purchasing essential items for us. In that case, many vendors are offering online purchase for our goodwill.

In online shopping, displaying proper specification about the product is very important for ease of customers.

Let’s Continue to customize 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 above code, we are removing review tab from product page. If you want to remove other tab just target that element and remove.

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

Hope this article helped you to add custom tab on product page. Follow me for the further article on Magento Frontend Development.

If you like this article, you can buy me a cup of coffee https://www.buymeacoffee.com/aryansrivastava

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

My Journey Into the world of the Linux Operating System.

Why is Agile Roadmapping so Misunderstood?

A man standing in a corner of a room. There are sticky notes covering the walls and his face.

4 Ways You Can Organise Your TODOs as a Software Engineer

Flash Stock Rom on Xolo A1000s Lite

11111

Instrument and Patch Your Way to Binary Enlightenment

Discord Bots with Javacord: Installing the JDK

K Framework — An Overview

AWS 1x1 — S3

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aryan Srivastava

Aryan Srivastava

Magento Frontend Developer at Magneto IT Solutions

More from Medium

A Little Intro About Magento Ui Components

What is Laravel? What are the Main Features?

How to localize Nette app using contributte/translation and Localazy

MVC Design Pattern + Clean ABAP