How to create a new custom tab in the product detail page in Magento 2?

In this post we will guide you how to add a new custom tab in the product detail page in magento2.

To start with create a file ‘catalog_product_view.xml’ in the app/code/<VendorName>/<ModuleName>/view/frontend/layout folder.

<?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="Aureatelabs_Training::custom_tab.phtml" group="detailed_info" >
               <arguments>
                   <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
               </arguments>
           </block>
       </referenceBlock>
   </body>
</page>

Change “Aureatelabs_Training” with <VendorName>_<ModuleName> in the catalog_product_view.xml

Now create the custom_tab.phtml file in app/code/<VendorName>/<ModuleName>/view/frontend/layout folder and add the below snippet in the phtml file.

<?php

echo "This is Custom tab in product detail page";

?>

Now you can check your product detail page on frontend.

Custom Tab

Show product details in custom tab

You can show product data on custom tab in product detail page. In order to do this you have to make the below changes in the custom_tab.phtml file.

<?php
// get current product data
$product = $block->getProduct();

// get Product name
echo $product->getName();

// get product description
echo $product->getDescription();

// Get custom product attribute value, change ‘custom_product_attribute’ with your ‘product attribute code’
echo $product->getData('custom_product_attribute');

?>

$block->getProduct() will get current product data.

In custom_product_attribute you can add custom attribute code to get custom attribute data for current product.

Show static block in custom tab

You can show static block data on custom tab in product detail page. To do this you have to make the below change in the custom_tab.phtml file.

<?php

echo $this->getLayout()
   ->createBlock('Magento\Cms\Block\Block')
   ->setBlockId('your_block_identifier')
   ->toHtml();

?>

Hope this article helped you to create a custom tab on product detail page in Magento 2.

  • Share :