How to Add, Rename and Remove Product Info Tabs in Magento 2
Horizontal or vertical tabs on the product pages are a great way to organize extensive content data without increasing the page length. One can provide as much information for the same topic in a digestible manner by showing data from a single tab at a time. From the UX perspective, this helps in quick navigation without affecting SEO or website ranking. Magento 2 product pages are loaded with such informative product info tabs. By default, there are 3 product info tabs:
- Details – It has the main product description
- More information – Having product attributes and values
- Review – Loaded with customer reviews and add the review section
Many times, store owners need to add customized product info tab to show more product related information. Also, these tabs can be renamed with the easily recognizable name to refer the information purpose. And, after adding such customized Magento 2 product info tabs, they need to be removed Today, I have come up with the code to Add, Rename and Remove Product Info Tabs in Magento 2.
Steps to Add, Rename and Remove Product Info Tabs in Magento 2:
-
Add Custom Magento 2 Product Info Tab
First of all, create a new attribute, name it as custom and add it to the default attribute set.
Create a new template file named custom-content.phtml and add below code to it.12345678910111213141516171819202122<?php$_helper = $this->helper('Magento\Catalog\Helper\Output');$_product = $block->getProduct();$_code = $block->getAtCode();$_className = $block->getCssClass();$_attributeLabel = $block->getAtLabel();$_attributeType = $block->getAtType();$_attributeAddAttribute = $block->getAddAttribute();if ($_attributeLabel && $_attributeLabel == 'default'){$_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();}$_attributeValue = $_product->getResource()->getAttribute($_code)->getFrontend()->getValue($_product);?><?php if ($_attributeValue): ?><div class="packaging-content" <?php echo $_attributeAddAttribute; ?>><?php echo $_attributeValue; ?></div><?php endif; ?>Now create catalog_product_view.xml file and write below code.
1234567891011121314151617<?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\Description" name="custom-content" template="Vendor_Extension::custom-content.phtml" group="detailed_info"><arguments><argument name="at_call" xsi:type="string">getCustom</argument><argument name="at_code" xsi:type="string">custom</argument><argument name="css_class" xsi:type="string">custom</argument><argument name="at_label" xsi:type="string">custom</argument><argument name="add_attribute" xsi:type="string">itemprop="custom"</argument><argument name="title" translate="true" xsi:type="string">Custom content</argument></arguments></block></referenceBlock></body></page>Note: Replace “Vendor_Extension::custom-content.phtml” with the file you have created above.
If you want to dynamically add product tabs or add tabs based on custom conditions, you may simply use the Magento 2 Product Tabs extension by Meetanshi and add unlimited custom tabs on the frontend.
-
Rename Magento 2 Product Info Tab
To rename the Description tab, go to app/design/frontend/<Theme>/Magento_Catalog/layout/catalog_product_view.xml
123456789101112<?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"><referenceBlock name="product.info.description"><arguments><argument name="title" translate="true" xsi:type="string">New Description</argument></arguments></referenceBlock></referenceBlock></body></page> -
Remove Magento 2 Product Tabs
Remove the review tab and then write below code in catalog_product_view.xml file
123456<?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.review" remove="true" /></body></page>
Hope you get the steps clearly. After implementing the above code, you can easily Add, Rename and Remove Product Info Tabs in Magento 2. You can use the separate code individually to serve your purpose. Let me know for which product tab you have used this code and how this blog has helped you! Also, don’t forget to comment down your issues, suggestions, and feedback. I would be quick enough to revert. And yes, do rate my blog with 5 stars to give me enough inspiration to write down such a tutorial.
2 Comments
Hello,
Your code has so many issues like in 3rd step in a page tag includes the double semicolon’s(;;)
Please Fix the Code.
Thanks,
Vishal Padhariya
Thank you, Vishal for bringing this to our attention. I’ve updated the code.