With the growing use of digital, Customers are demanding for rich and detailed product information from the sellers before making an online purchase. Default Magento comes with an option of organized product information in individual tabs that serves the purpose of a detailed product description. Because All products are not same, that’s why configurations and product features are varies depending on a product. In Magento tabbed navigation plays an important role to display product information in separate individual tabs so the customer can easily grab the needed information by viewing single tab at a time. Being open source platform Magento lets you to easily customize and add new product tabs to fulfill the need of displaying well-organized product information in Magento frontend.
Usually, we came across the requirement of adding a custom tab to Magento 2 frontend product page which is common when it comes to Magento Customization. Today, I am going to share this small piece of code with you guys. Simply follow the below steps and you are done.
First, you need to create the frontend layout file at below location and named it as “catalog_product_view.xml“.
app\code\Vendor\Extension\view\frontend\layout\catalog_product_view.xml
<pre class="lang:default decode:true">
<?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" name="new.tab" template="Magecomp_AddTab::new_tab.phtml" group="detailed_info" >
<arguments>
<argument translate="true" name="title" xsi:type="string">New Tab</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
</pre>
Now, you have to create another file “custom_tab.phtml” at following path.
app\code\Vendor\Extension\view\frontend\templates\custom_tab.phtml
<pre class="lang:default decode:true"><!--?php $product = $block->getProduct(); ?--></pre>
And you are ready to go!
You can even customize this code as per your need to display different attribute or file in frontend.
Lastly, Don’t forget to smash that down stars and comment down below if you face any issue while implementing this code.
Happy Coding.
