How to Add a Custom Tab in Product Detail Page in Magento 2

Magento 2 out of the box support three tabs on the product detail page. The first tab is the “Details” tab that display product description. The second tab is the “More Information” tab that displays product attributes. The third tab is the “Review” tab that displays product reviews and review form.

However, these three tabs are not enough for a large e-commerce store. For example, a clothing selling store needs to display a size chart somewhere on a product detail page. For such requirements, a custom tab on the product detail page is an ideal solution.

In this post, We will see how to add a custom tab on the product detail page. We will also see how to get product id in that tab. So that we can query additional data from product id.

Add a Custom Tab in Product Detail Page in Magento 2

In your project, create this file and add below code.
app/design/frontend/Vendor/Theme/Magento_Catalog/layout/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" name="feature.tab" as="featuretab" template="product/view/feature_info.phtml" group="detailed_info" >
			    <arguments>
			        <argument translate="true" name="title" xsi:type="string">Features</argument>
			        <argument name="sort_order" xsi:type="string">10</argument>
			    </arguments>
			</block>
		</referenceBlock>	
	</body>
</page>

Now create a template file in this location.
app/design/frontend/Vendor/Theme/Magento_Catalog/templates/product/view/feature_info.phtml

<?php 
/** 
* Product feature template 
* 
* @var $block \Magento\Catalog\Block\Product\View 
*/ 

$_product = $block->getProduct();

Here, you can see we can easily get the project object. Using this object we can easily query other information. Please note, if you do not display anything in this template, Magento will hide the tab from the product detail page.

In short, We can easily add a custom tab in product detail page in Magento 2 and display appropriate content.

Want to ask a question or leave a comment?

Leave a Comment

(0 Comments)

All the comments are goes into moderation before approval. Irrelevant comment with links directly goes to spam. Your email address will not be published.

Was this post helpful? Please support Us!

Follow us on twitter or Like us on facebook.

 


Want to Increase your Magento 2 Development Knowledge?

If Yes! Then Subscribe to our newsletter below and get weekly development posts to your inbox.
Subscribe Here
SUBSCRIBE NOW
close-link

To Avoid Spam Downloads, We Want Your Email

We will send you download link right
away. Please submit form below.
SEND ME DOWNLOAD LINK
Close