Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How To Add Custom Tab To Product Page In Magento 2

March 8, 2017

3 Min Read
Reading Time: 3 minutes

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.

Magento 2 add tab to product page

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.

Navigate store to product

Now click on Add New Attribute.

Add new attribute

Set Default label as Test and Attribute Code as test. Now click on Save Attribute.

save attribute

We can see our Attribute (test) in the list as shown below:

attribute list

Select Or Create Attribute Set

Navigate to the Stores → Attribute Set.

navigate to stores attribute set

Now click on Add Attribute Set if you have not created an Attribute Set yet.

Add attribute set

Enter mobile in Attribute Set Name.

save attribute set

Click on mobile – Attribute Set which we have created.

click attribute set

Drag and Drop test attribute from unassigned to Product Details and click on Save.

drag atrribute

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:

product setting

Now you can see the new attribute set test on product edit page. Update the attribute set and click on Save.

update attribute

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:

Custom Tab Magento 2

Final Words

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.

Share your opinion in the comment section. COMMENT NOW

Share This Article

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

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.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!