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 Magento 2 Tab In Product Page

December 7, 2021

4 Min Read
How to Add Custom Magento 2 Tab

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.

Custom Magento Tab Navigation

Now click on Add New Attribute.

Add new attribute for Custom Magento Tab

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

Define Custom Attribute

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

Custom Attribute Listing

Select Or Create Attribute Set for Magento Product Tabs

Navigate to the Stores → Attribute Set.

Custom Tab Attribute Set

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

Add Custom Attribute Set

Enter mobile in Attribute Set Name.

Save Custom 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.

Define Attribute Set to Custom Tab

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:

Add Custom Tab to Magento 2 Product Page

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

Thank You

Your Ebook is on it’s Way to Your Inbox.

Launch the Product page of your store and you will see the result:

Magento 2 Custom Tab Display

Final Words

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.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Great speed, features, knowledgebase, dashboard, UX and fast, expert support. Very happy!”

Stefan [Management Consultant]

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.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!