How To Add Custom Tab To Product Page In Magento 2

by Syed Muneeb Ul Hasan  March 8, 2017

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

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:

Create Template File

In app/code/Cloudways/Mymodule/view/frontend/templates, create custom_tab.phtml and add the following code in the file:

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 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!

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Syed Muneeb Ul Hasan

Syed Muneeb Ul Hasan is a Magento Community Manager at Cloudways. An expert in PHP and Magento, he prefers to educate users in the implementation and usage of cloud based Magento Hosting Solutions. When not working, he loves to watch cricket. You can email him at muneeb.hasan@cloudways.com

Stay Connected:

You Might Also Like...