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 tab is 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 tab in Magento 2.
Add New Attribute
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
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 Product Page
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
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
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>
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 in Magento 2. 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.
Boost Your Magento Store Performance by 5x Times & Maximize Your Sales
Our fastest Magento hosting can help you in growing your business revenue by 500%
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.