Steps On How To Add Custom Tab To Product Page In Magento 2

Recently , i have started learning Magento 2 through Magento’s official website. Initially, I faced issues with installation as i was trying to install it in windows OS and it is clearly mentioned that magento 2 doesn’t support windows OS and mac OS.I fixed issues after installation somehow, after this i explored directory and file structure , it was quite difficult to learn and understand it in comparison to other cms like wordpress, drupal etc. So, i have started learning frontend customization by creating custom theme.Here, i have leaned following things through frontend customization so far –

  • How to create custom theme from scratch in Magento 2
  • How to add custom tabs to product page in Magento 2
  • How to rename a tab in Magento 2
  • How to remove a tab in Magento 2
  • How to rearrange or reorder tabs in Magento 2

Now we will look into steps to add custom tabs.For this, we need to understand the product page layout and templates that how it is managed.To check it, we need to enable Template Path Hints through the magento admin panel.Please follow navigation to configure it:

Stores -> Configuration -> Advanced -> Developer -> Debug

Here, you can find a setting to enable it.Please set yes to the option which you want to enable.Please check screenshot attached for same.Here, we have also learned how to enable template path hints.Now you can see the path to templates and layout to customize.

There may be different ways to customize the product detail page to add a custom tab.

  • There may be already contributed module
  • By creating custom module
  • By Creating custom theme or child theme

Step by Step Guideline  To Add Custom Tab To Product Page In Magento 2

Here , we will learn it through a custom theme.Please follow below steps:

Step 1: Create a custom theme –

Here, i will not explain how to create a theme.You just need to follow folder structure to place the layout and template files to override or customize it.Please review directory structure of a theme.Basically themes are conventionally located under app/design/frontend/

Step 2: Create a new layout file to override base layout –

As we have seen through template path hints that product detail page related layout file can be found in module_catalog folder.So, we need to create catalog_product_view.xml file in custom theme and should be placed to below fath:

Add below code to catalog_product_view.xml file

Here, template is associated with a block which is demotab_info.phtml. So the next step is to create demotab_info.phtml.

Step 3: Create a template file to display content –

Here, we will create a new template file which is associated with a block where content needs to be displayed. Please create demotab_info.phtml in below mentioned path

Add your custom code to this file for displaying any information.For demo add below code:

Step 4: Clear/Flush the cache to make changes working –

Here, you can clear cache through two ways by command and admin panel

We can clear cache through admin panel by following navigation
Admin Panel> System> Cache Management:

We can also clear cache via command line.Please use below commands for same

After completing these steps , we can see the custom tab is added on product detail page.Please check screenshot for same.

Hope all of you have learned how to add a custom tab easily by following the above steps.Please leave a comment below to suggest any thing or issues related to this guide line.It will be much appreciated.

Add a Comment

Your email address will not be published. Required fields are marked *