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.

Say hello to redesigned Cloudways, an empowering Startup Program, enhanced Staging, a new Let’s Encrypt Wildcard SSL certificate feature, and more. GET STARTED

How To Add Custom Tab To Product Page In Magento 2

Updated on  8th March

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

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:

Cloudways Magento Hosting For Developers

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

Syed Muneeb Ul Hasan

Syed Muneeb Ul Hasan is a Magento Developer and Blogger at Magenticians - a platform for Magento Tutorials. 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.

Convert visitors into buyers on your 100% faster Magento store.

Deploy your Magento stores on optimized Magento hosting servers.


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