How to add custom tab in product details page in magento 2.4.0

Magento Asked on January 1, 2021

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="MagentoCatalogBlockProductViewAttributes"
               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('MagentoCmsBlockBlock')
->setBlockId('custom-info')
->toHtml();
?>

blocks custom magento2.4.0 product detail page tabs

3 Answers

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

<referenceBlock name="product.info.details">
        <block class="MagentoCatalogBlockProductView"
               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('MagentoCmsBlockBlock')
->setBlockId('custom-info')
->toHtml();
?>

And Run :-

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

Answered by Mohit Patel on January 1, 2021

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="MagentoFrameworkViewElementTextListText" 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="MagentoCmsBlockBlock" name="block_tab_product_details">
                <arguments>
                    <argument name="block_id" xsi:type="string">custom-info</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Answered by Herve Tribouilloy on January 1, 2021

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="MagentoCatalogBlockProductView"
               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>

Answered by Rakesh Donga on January 1, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Jon Church on Why fry rice before boiling?
Joshua Engel on Why fry rice before boiling?
Lex on Does Google Analytics track 404 page responses as valid page views?
Peter Machado on Why fry rice before boiling?
haakon.io on Why fry rice before boiling?