In online shopping, displaying proper specifications about the product is very important for ease of customers. In this article, I am going to explain Custom Tab on Product Page Magento 2.
Let’s Continue to customise content tab in product detail page :
1. Remove Product Tab
Removing any tab from product page is quite simple task. We just need to follow few steps.
Folder path:
/vendor/magento/module-catalog/view/frontend/layout
We need to make changes in catalog_product_view.xml
Override file in our theme:
/app/design/frontend/<vendor_name>/<theme_name>/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.review" remove="true" />
</body>
</page>
In the above code, we are removing the review tab from the product page. If you want to remove another tab just target that element and remove it.
2. Add new Custom Tab
Define tab in 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="custom.tab" template="Magento_Catalog::custom/custom_tab.phtml" group="detailed_info" >
<arguments>
<argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
Now, define template file for custom tab in
/app/design/frontend/<vendor_name>/<theme_name>/Magento_Catalog/templates/custom/custom_tab.phtml
<?php
echo "This is Custom tab in product detail page";
?>
Call Static block in custom product tab :
<?php
echo $this->getLayout()
->createBlock('Magento\Cms\Block\Block')
->setBlockId('your_block_identifier')
->toHtml();
?>3. Rename Product Tab
Rename the existing tab is a very simple task. We are going to target Custom Tab and rename it to New Custom Tab
Go to 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">
<referenceBlock name="custom.tab">
<arguments>
<argument name="title" translate="true" xsi:type="string">New Custom Tab</argument>
</arguments>
</referenceBlock>
</referenceBlock>
</body>
</page>
Clear Magento Cache
$ php bin/magento c:f
$ php bin/magento c:cHope this article helped you to add custom tab on product page.
If you have any queries, ask me at aryansrivastavadesssigner@gmail.com or contact me here.
If you like this article, you can buy me a cup of coffee Buy me a Coffee.
