15/08/2022
We use cookies to make your experience better. To comply with the new e-Privacy directive, we need to ask for your consent to set the cookies. Learn more.
How to Add Custom Tab in Product Page Magento 2
Steps to add Custom Tab in Product Page
Define the templates and layout files
Firstly, you require to set which templates and layout file that you are going to customize. An efficient way which can help you to do this is enabling Template Path Hints and adding Block Names to Hints via Magento admin. Follow this: Stores > Configuration > Advanced > Developer > Debug. Now, you will see that the Magento module which is responsible for product info tabs is module-catalog. You can start your customization now.
Rename the product tabs
Before setting another title for the product tab, you need to override the base layout file which can be found inside the vendor/module_catalog folder. The efficient method to override is creating the new layout file in your theme scope and giving the same name as the base file.
Directory
app/design/frontend/VendorName/<Theme>/Magento_Catalog/layout/catalog_product_view.xml
Content for this file
<?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.attribute">
<arguments>
<argument name="title" translate="true" xsi:type="string">Attribute</argument>
</arguments>
</referenceBlock>
</referenceBlock>
</body>
</page>The <referenceBlock name="product.info.details"> is used to reference your product tabbed navigation as a whole.
The <referenceBlock name="product.info.attribute"> reference individual tab.
The <argument name="title" translate="true" xsi:type="string"> is used to set a new tab title.
Remove product tabs
Content for removing tab
<?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>
Add custom tab
You need to create a new template file.
Directory
app/design/frontend/VendorName/<Theme>/Magento_Catalog/templates/product/view/newTab.phtml
Content for this file
<?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 place the below code in your layout file, 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\Description" name="newtab" template="Magento_Catalog::product/view/newTan.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getPackaging</argument>
<argument name="at_code" xsi:type="string">packaging</argument>
<argument name="css_class" xsi:type="string">packaging</argument>
<argument name="at_label" xsi:type="string”>packaging</argument>
<argument name="add_attribute" xsi:type="string">itemprop="packaging"</argument>
<argument name="title" translate="true" xsi:type="string">New Tab</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>Add related products in tabbed navigation
Directory
app/design/frontend//<Theme>/Magento_Catalog/templates/product/related-products.phtml
Content for this file
<?php echo $this->getBlockHtml('catalog.product.related'); ?>Now the layout file catalog_product_view.xml will look 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>
<!— 1st Code Block: Get Related Products as new tab -->
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View" name="deliveryinfo.tab" as="deliveryinfo" template="Magento_Catalog::product/related-products.phtml" group="detailed_info" >
<arguments>
<argument translate="true" name="title" xsi:type="string">Related Products</argument>
</arguments>
</block>
</referenceBlock>
<!— 2nd Code Block: Move original block to product info tabs -->
<move element="catalog.product.related" destination="product.info.details" />
</body>
</page>
If you are looking for Magento Developers, visit Magento Web Agency.