How to Hide an Empty Custom Tab in Magento 2
According to a study by Google
- The visitors will judge the online store as beautiful or not in the only 1/50th to 1/20th of a second.
- Visually complex websites are consistently rated as less beautiful than their simpler equivalent.
A beautiful website means a visually appealing, simpler, and easy navigation website.
As a Magento 2 store owner, you would want to offer a shopping platform that would not confuse or irritate the shoppers! Removing unnecessary elements from the frontend is quite important as to not distract the visitors from their main goal (and obviously, ours ), i.e., making a purchase!
Keeping this in mind, I have come up with a programmatic method to hide an empty custom tab in Magento 2. With this method, hide unnecessary tabs from the product page.
For example, a product page shows the FAQ section. However, for products with no FAQs, you’d not want to show an empty FAQ tab. To hide such empty custom tabs from the storefront, implement the below method.
Method to Hide an Empty Custom Tab in Magento 2:
- Create registration.php at app/code/[VendorName]/[ModuleName]
12345\Magento\Framework\Component\ComponentRegistrar::register(\Magento\Framework\Component\ComponentRegistrar::MODULE,'[VendorName]_[ModuleName]',__DIR__); - Create module.xml at app/code/[VendorName]/[ModuleName]
1234567<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"><module name="[VendorName]_[ModuleName]" setup_version="1.0.0"><sequence><module name="Magento_Catalog"/></sequence></module></config> - Create catalog_product_view.xml at app/code/[VendorName]/[ModuleName]/view/frontend/layout
123456789101112<?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="custom.tab" template="[VendorName]_[ModuleName]::product/view/details/custom_tab.phtml" group="detailed_info"><arguments><argument translate="true" name="title" xsi:type="string">Tab Title</argument></arguments></block></referenceBlock></body></page> - Create custom_tab.phtml at app/code/[VendorName]/[ModuleName]/view/frontend/templates/product/view/details/
12<?php $attributeCode = '<product_attribute_code>'; ?><?php echo $block->getProduct()->getData($attributeCode); ?>
That’s it.
With the above steps, make your Magento 2 store presentable, simpler, and hide unnecessary custom tabs.
Sanjay Jethva
Sanjay is the co-founder and CTO of Meetanshi with hands-on expertise with Magento since 2011. He specializes in complex development, integrations, extensions, and customizations. Sanjay is one the top 50 contributor to the Magento community and is recognized by Adobe.
His passion for Magento 2 and Shopify solutions has made him a trusted source for businesses seeking to optimize their online stores. He loves sharing technical solutions related to Magento 2 & Shopify.
2 Comments
Thanks save my lot of time
Hey Manoj!
Happy to help 🙂