0

how to add a new custom tab in the product detail page in magento2

Magento_Catalog/layout/catalog_product_view.xml

<?xml version="1.0"?>
<page 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\Attributes"
               name="product.custom-info.tab"
               as="custom-info.tab" template="Magento_Catalog::product/view/custom.phtml" group="detailed_info">
            <arguments>
                <argument translate="true" name="title" xsi:type="string">CUSTOM TAB</argument>
                <argument name="sort_order" xsi:type="string">20</argument>
            </arguments>
        </block>
    </referenceBlock>
  </body>
</page>

Magento_Catalog/templates/product/view/custom.phtml

<?php
echo $this->getLayout()
->createBlock('Magento\Cms\Block\Block')
->setBlockId('custom-info')
->toHtml();
?>

enter image description here

4 Answers 4

1

You might like this one below: this will work using one layout only catalog_product_view.xml, no need of template

<?xml version="1.0"?>
<page 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\Framework\View\Element\Text\ListText" name="product.custom-info.tab" as="custom-info.tab" group="detailed_info">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">CUSTOM TAB</argument>
                    <argument name="sort_order" xsi:type="string">10</argument>
                </arguments>
            </block>
        </referenceBlock>

        <referenceBlock name="product.custom-info.tab">
            <block class="Magento\Cms\Block\Block" name="block_tab_product_details">
                <arguments>
                    <argument name="block_id" xsi:type="string">custom-info</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>
0

can you replace below code with your xml

<?xml version="1.0"?>
<page 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="product.custom-info.tab"
               as="custom-info.tab" template="Magento_Catalog::product/view/custom.phtml" group="detailed_info">
            <arguments>
                <argument translate="true" name="title" xsi:type="string">CUSTOM TAB</argument>
            </arguments>
        </block>
    </referenceBlock>
  </body>
</page>
0

Go to your catalog_product_view.xml file and add below code :-

<referenceBlock name="product.info.details">
        <block class="Magento\Catalog\Block\Product\View"
               name="product.custom-info.tab"
               as="custom-info.tab" template="Magento_Catalog::product/view/custom.phtml" group="detailed_info">
            <arguments>
                <argument translate="true" name="title" xsi:type="string">Your Tab Name</argument>
            </arguments>
        </block>
    </referenceBlock>

After your Create new file in Magento_Catalog/templates/product/view/custom.phtml

<?php
echo $this->getLayout()
->createBlock('Magento\Cms\Block\Block')
->setBlockId('custom-info')
->toHtml();
?>

And Run :-

php bin/magento c:c
php bin/magento c:f

enter image description here

0

For Magento >= 2.4.5 you must change the product layout, form "Product — Full Width" to "No Layout Updates"

Magento product tabs do not work on the frontend on version >= 2.4.5 with layout "Product — Full Width" so you want be enable to see your new tab if you do not change the design layout.

1
  • Are you sure this answer is related to this question ? If yes, can you elaborate a bit more ?
    – Cladiuss
    Oct 2, 2023 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.