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.
Leave a Comment
(0 Comments)
Useful Magento 2 Articles
Author Info
Chirag
Connect With Me