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:
1. 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.
<?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.
<?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.
2. Rename Magento 2 Product Info Tab
To rename the Description tab, go to app/design/frontend/<Theme>/Magento_Catalog/layout/catalog_product_view.xml
<?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>
3. Remove Magento 2 Product Tabs
Remove the review tab and then write below code in catalog_product_view.xml 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.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.
