Magento 2 : How to show/Hide custom tab on product detail page based on product attribute?

Please make your code same as below code

In this example i have warranty_display attribute code for Warranty Display and warranty_info attribute code for Warranty Info.

Your catalog_product_view.xml code should be

<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="warrantyInfo.tab"
                   template="Product_CustomTab::custom_tab.phtml"
                   group="detailed_info">
                   <!--ifconfig="product/is_warranty_display"-->
                <arguments>
                    <argument name="sort_order" xsi:type="string">40</argument>
                    <argument translate="true" name="title" xsi:type="string">Warranty Info</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

your custom_tab.phtml file code should be

<?php if($this->getProduct()->getWarrantyDisplay()): ?>
    <?php echo $this->getProduct()->getWarrantyInfo(); ?>
<?php endif; ?>

When attribute enabled:

enter image description here

enter image description here

When attribute disabled:

enter image description here

enter image description here

Make sure you can get your attribute code in custom_tab.phtml file.

Hope this will help you!


Please follow below step to display or remove tab into product detail page.

Create custom tab via module using below reference link

https://www.cloudways.com/blog/add-custom-tab-product-page-magento-2/

Then Create app/code/Cloudways/Mymodule/view/frontend/layout/catalog_product_view.xml file and past below code.

<?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="test.tab" template="Cloudways_Mymodule::custom_tab.phtml" group="detailed_info" >
                <arguments>
                    <argument name="sort_order" xsi:type="string">40</argument>
                    <argument translate="true" name="title" xsi:type="string">Warranty Info</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Then update app/code/Cloudways/Mymodule/view/frontend/templates/custom_tab.phtml file and past below code.

<?php
 $product = $block->getProduct();
 $data = $this->getProduct()->getAttributeText('warranty_display');
?> 
  <?php if($data == 'Yes'): ?>
       <h1 style="color: #1979c3">
        <?php echo $product->getData('sku'); ?>
       </h1>
 <?php endif; ?>
  • Then run setup upgrade command and clear cache.
  • Then check product detail page and verify with your "warranty_display" attribute value
    • if warranty_display value is yes then it's display custom tab same as below enter image description here
    • if warranty_display value is no then custom tab will be removed. enter image description here

I am tested with magento 2.3 please check and let me known if you have any query.


Create these files in your module

Vendor/Module/view/frontend/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="Vendor\Module\Block\MyBlock" template="Vendor_Module::index.phtml" group="detailed_info">
                <arguments>
                    <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
                    <argument name="sort_order" xsi:type="string">25</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

\Vendor\Module\Block\MyBlock.php

<?php

namespace Vendor\Module\Block;

class MyBlock extends \Magento\Catalog\Block\Product\View\Attributes
{
    public function isCustomAttrAvailable()
    {
        /** @var \Magento\Catalog\Model\Product $product */
        $product = $this->getProduct();

        // Find your attribute from $product variable and return true or false
    }
}

Vendor/Module/view/frontend/templates/index.phtml

<?php if($block->isCustomAttrAvailable()): ?>
    <div class="additional-attributes-wrapper table-wrapper">
        <table class="data table additional-attributes" id="custom-tab">
            <caption class="table-caption"><?= $block->escapeHtml(__('Custom Tab')) ?></caption>
            <tbody>
                <tr>
                    <th>Hello</th>
                    <td>Custom Tab</td>
                </tr>
            </tbody>
        </table>
    </div>
<?php endif; ?>

Tags:

Custom Attributes

Magento2

Product Attribute

Customtab

Recent Posts