How to Add Custom Tab to Product Page in Magento 2?
January 05, 2024
In this article, we will learn about to add custom tab to product page in Magento 2.
Adding an extra tab to the product page in Magento 2 is crucial for providing customers with detailed information about the products they are interested in. This additional tab ensures that customers have access to comprehensive details, aiding them in making informed purchasing decisions.
Proper product details are essential for customer satisfaction in the online shopping experience. By incorporating an extra tab, you enhance the presentation of essential information, contributing to a more satisfying and transparent shopping process for your customers.
Transform your Magento 2 product pages with the Product Tabs Extension for Magento 2 from MageAnts. This powerful extension allows you to effortlessly enhance user experience by adding custom tabs to your product pages.
Steps to Add Custom Tab to Product Page in Magento 2 :
Step 1 : Add New Attribute for Custom Magento 2 Tab
Go to the Admin Panel of your Magento store and navigate to Stores → Attributes → Product.
Now click on Add New Attribute.
Fill in the necessary information:
- Default label: Enter a unique identifier for your attribute label (e.g., custom tab).
- Attribute Code: Enter a unique identifier for your attribute code (e.g., add_custom_tab)..
- Scope: Choose the appropriate scope for your attribute.
We can see our Attribute (add_custom_tab) in the list as shown below:
Step 2 : Select Or Create Attribute Set for Magento Product Tabs
Go To the Stores → Attributes → Attribute Set.
Now click on Add Attribute Set if you have not created an Attribute Set yet.
Enter Custom Tab in Attribute Set Name.
Click on Custom Tab – Attribute Set which we have created.
Drag and drop the newly created attribute to the attribute set.
Step 3 : 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 Custom Tab, then Add Attribute Add Custom Tab and click on Save:
Now you can see the new attribute set Add Custom Tab on product edit page.
Update the attribute set and click on Save.
Step 4 : Create Layout file for Magento 2 Product Page Tab
In app/code/Mageants/ProductTabs/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/La
yout/etc/page_configuration.xsd">
<body>
<referenceBlock name="product.info.details">
<block
class="Magento\Catalog\Block\Product\View"
name="test.custom.tab" template="Mageants_ProductTabs::custom_tab.phtml">
<arguments>
<argument translate="true" name="title"
xsi:type="string">Custom Tab
</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
|
Step 5 : Create Template File for Magento 2 Product Page Tab
<?php
$product = $block→getProduct();
?>
<h3>
<?php echo $product→getData('add_custom_tab'); ?>
</h3>
|
Launch the Product page of your store and you will see the result:
Conclution:
This content focuses on adding custom tabs to Magento 2 product pages. It guides you through the process of adding a custom tab to enhance your product page functionality.
If you encounter any issues or have suggestions, feel free to leave a comment.
Stay tuned for the upcoming tutorial on adding social sharing buttons to Magento 2.
