Magento 2

How to add custom tabs in Product Page in Magento 2

In your theme add “catalog_product_view.xml” file path would be app/design/frontend/{{vendor}}/{{theme}}/Magento_Catalog/layout

<?xml version=”1.0″?>
<!–
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
–>
<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\Description” name=”product.use” as=”use” template=”product/view/use.phtml” group=”detailed_info”>
<arguments>
<argument translate=”true” name=”title” xsi:type=”string”>How to use</argument>
<argument name=”sort_order” xsi:type=”string”>15</argument>
</arguments>
</block>
<block class=”Magento\Catalog\Block\Product\View\Description” name=”product.directions” as=”directions” template=”product/view/directions.phtml” group=”detailed_info”>
<arguments>
<argument translate=”true” name=”title” xsi:type=”string”>Directions</argument>
<argument name=”sort_order” xsi:type=”string”>20</argument>
</arguments>
</block>

</referenceBlock>

</body>
</page>

After that add this two phtml use.phtml and directions.phtml in app/design/frontend/{{vendor}}/{{theme}}/Magento_Catalog/templates/product/view

for use.phtml

<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/

// @codingStandardsIgnoreFile

/**
* Product view template
*
* @see \Magento\Catalog\Block\Product\View\Description
*/
?>
<?php
$_helper = $this->helper(‘Magento\Catalog\Helper\Output’);
$_product = $block->getProduct();
?>
<div class=”product attribute directions”>

<div class=”value”><?php echo $_product->getData(‘use’); ?> </div>
</div>

same you can use for the directions just remember i am using an custom attribute that i made “use” and added to the attribute set.

With this you can add custom tabs in Magneto 2 for the product page without any problem

 397 total views

Leave a Reply

Your email address will not be published. Required fields are marked *