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

Improve this question

4 Answers 4

Reset to default
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>
Improve this answer
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>
Improve this answer
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

Improve this answer
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.

Improve this answer
1
  • Are you sure this answer is related to this question ? If yes, can you elaborate a bit more ?
    – Cladiuss
    Commented 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.