Product detail plays an important role in keeping the customers satisfied when it comes to online shopping. Without proper details, your customer cannot make up their mind properly. Hence, it’s crucial that you add the necessary details, and to do so, an extra Magento 2 tab will be required on the product page.
We started off with how to create a module in Magento 2, and today we are going to continue the series with part 2.
Now let’s continue with the same module to create a custom Magento 2 tab.
Add New Attribute for Custom Magento 2 Tab
Go to the Admin Panel of your Magento store and navigate to Stores → Product.
Now click on Add New Attribute.
Set Default label as Test and Attribute Code as test. Now click on Save Attribute.
We can see our Attribute (test) in the list as shown below:
Select Or Create Attribute Set for Magento Product Tabs
Navigate to the Stores → Attribute Set.
Now click on Add Attribute Set if you have not created an Attribute Set yet.
Enter mobile in Attribute Set Name.
Click on mobile – Attribute Set which we have created.
Drag and Drop test attribute from unassigned to Product Details and click on Save.
Performance-Optimized Ecommerce Hosting to Amplify Your Growth
Set up your ecommerce store on the cloud solution of your choice. Get one migration completely FREE.
Configure Magento 2 Custom Tab to Product
Go to your product edit page in the Admin Panel of your store. First set the template name as mobile, then Add Attribute test and click on Save:
Now you can see the new attribute set test on product edit page. Update the attribute set and click on Save.
Create Layout File for Magento 2 Product Page Tab
In app/code/Cloudways/Mymodule/view/frontend/layout, create catalog_product_view.xml and add the following code in the file:
<?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 translate="true" name="title" xsi:type="string">Custom Tab</argument> </arguments> </block> </referenceBlock> </body> </page>
Create Template File for Custom Magento 2 Tab
In app/code/Cloudways/Mymodule/view/frontend/templates, create custom_tab.phtml and add the following code in the file:
<?php $product = $block->getProduct(); ?> <h1 style="color: #1979c3"><?php echo $product->getData('test'); ?></h1>
Optimize Magento Speed Like a Pro
Subscribe now and get a free ebook to your inbox.
Your Ebook is on it’s Way to Your Inbox.
Launch the Product page of your store and you will see the result:
Following this tutorial without wandering your mind anywhere else will enable you to add a custom tab to magento 2 product page. If you have a problem or would like to add to the discussion, just leave a comment below. In the last part of this series, we will learn how to add social sharing buttons in Magento 2, so don’t forget to check back soon!
You don’t need to worry as long as Cloudways Managed Magento Hosting is here for increasing your everyday sales and taking away your server side management hassles.
Customer Review at
“Great speed, features, knowledgebase, dashboard, UX and fast, expert support. Very happy!”
Stefan [Management Consultant]
Syed Muneeb Ul Hasan is a Magento Community Manager at Cloudways - A Managed Magento Hosting Platform. He is an expert in PHP and Magento and prefers to educate users in the implementation of Magento. When not working, he loves to play games and watch cricket.