With the growing use of digital, Customers are demanding for rich and detailed product information from the sellers before making an online purchase. Default Magento comes with an option of organized product information in individual tabs that serves the purpose of a detailed product description. Because All products are not same, that’s why configurations and product features are varies depending on a product. In Magento tabbed navigation plays an important role to display product information in separate individual tabs so the customer can easily grab the needed information by viewing single tab at a time. Being open source platform Magento lets you to easily customize and add new product tabs to fulfill the need of displaying well-organized product information in Magento frontend.
Usually, we came across the requirement of adding a custom tab to Magento 2 frontend product page which is common when it comes to Magento Customization. Today, I am going to share this small piece of code with you guys. Simply follow the below steps and you are done.
First, you need to create the frontend layout file at below location and named it as “catalog_product_view.xml“.
app\code\Vendor\Extension\view\frontend\layout\catalog_product_view.xml
<pre class="lang:default decode:true"> <?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="new.tab" template="Magecomp_AddTab::new_tab.phtml" group="detailed_info" > <arguments> <argument translate="true" name="title" xsi:type="string">New Tab</argument> </arguments> </block> </referenceBlock> </body> </page> </pre>
Now, you have to create another file “custom_tab.phtml” at following path.
app\code\Vendor\Extension\view\frontend\templates\custom_tab.phtml
<pre class="lang:default decode:true"><!--?php $product = $block->getProduct(); ?--></pre>
And you are ready to go!
You can even customize this code as per your need to display different attribute or file in frontend.
Lastly, Don’t forget to smash that down stars and comment down below if you face any issue while implementing this code.
Happy Coding.
E-commerce has transformed the way consumers shop for products and services and interact with businesses.…
The e-commerce world is constantly in flux. New tech and strategies emerge daily to help…
Hello Magento Friends, In today’s blog, we will discuss adding a header and footer to…
Hello React Native Friends, Building a visually appealing and responsive mobile app is crucial in…
We're thrilled to announce the release of Hyvä Themes 1.3.6 and 1.3.7! These latest updates…
Your e-commerce platform is surging - orders are rolling in, traffic spikes are becoming the…