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.
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.
Post a Comment
Got a question? Have a feedback? Please feel free to leave your ideas, opinions, and questions in the comments section of our post! ❤️