How to Add Custom Tab in Product Page Magento 2
Product details play an important role in customer experience, so it’s critical to let customers understand what they are going to buy. But a product page shouldn’t be flooded with too much information.
Adding tabs is a great way to help you reduce information overloading as it can organize large content into easily digestible data chunks. Using this method, all the information which is related to a specific subject will be provided without overwhelming users.
As a result, users can quickly navigate through all the content at the same time from just one tab, which would simply facilitate access to information without negatively impacting your SEO and site ranking. Therefore, in this post, I will show you the way to create a custom tab in Magento 2 Product Page.
5 steps to add a Custom Tab to the Product Page in Magento 2:
- [Step 1: Create a Magento 2 new attribute for the custom tab]
- [Step 2: Choose or make an attribute set for Magento product tabs]
- [Step 3: Configure the custom product tab]
- [Step 4: Defind the the templates and layout files]
- [Step 5: Rename the product tabs]
- [Step 6: Remove product tabs]
- [Step 7: Add custom tab]
- [Step 8: Add related products in tabbed navigation]
Step 1: Create a Magento 2 new attribute for the custom tab
-
Log in to your Magento Admin Panel.
-
Navigate to
Stores > Attributes > Product
.
- Click on
Add New Attribute
.
- Set the
Default Label
as Test and theAttribute Code
as “test”.
- Click
Save Attribute
.
Then, you can see the test attribute
in the list below:
Step 2: Choose or make an attribute set for Magento product tabs
- Go to
Stores > Attribute Set
.
- If you haven’t created an Attribute Set yet, click on
Add Attribute Set
.
- Enter “shirt” as the Attribute Set Name.
-
Click on the newly created “shirt” Attribute Set.
-
Move “test” from unassigned to Product Details by drag and drop
test
attribute -
Drag and drop the “test” attribute from the unassigned section to the
Product Details
section
- Click
Save
.
Step 3: Configure the custom product tab
-
Open the product edit page in the Admin Panel.
-
Set the template name as “shirt”.
-
Add the
test
attribute. -
Click
Save
.
Now you’ll see the new “test” attribute set on the product edit page. Remember to update the attribute set and save your changes.
Step 4: Define the templates and layout files
Firstly, you need to define which templates and layout files that you are going to customize. An effective method which can help you to do this is enabling Template Path Hints
and adding Block Names
to Hints
via Magento admin. Please follow this: Stores > Configuration > Advanced > Developer > Debug
. Now, you will see that the Magento module which is responsible for product info tabs is module-catalog
. You can start your customization now.
Step 5: Rename the product tabs
Before setting another title for the product tab, you need to override base layout file catalog_product_view.xml
which can be found inside the vendor/module_catalog
folder.
The standard way to override this file is to create a new layout file inside your theme scope and then name it just like the base file.
Following is how your file path will look like:
app/design/frontend/<Mageplaza>/<Theme>/Magento_Catalog/layout/catalog_product_view.xml
And this is the code which is inside the file:
<?xml version="1.0"?>
<page layout="1column" 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">
<referenceBlock name="product.info.description">
<arguments>
<argument name="title" translate="true" xsi:type="string">Description</argument>
</arguments>
</referenceBlock>
</referenceBlock>
</body>
</page>
In the above code, the first layout handler <referenceBlock name="product.info.details">
is used to reference your product tabbed navigation as a whole. Meanwhile, the child handler <referenceBlock name="product.info.description">
reference individual tab, in this example is your case details tab.
By using <argument name="title" translate="true" xsi:type="string">
you can set new title for your tab. Note that the handler <arguments>
is just a container for <argument>
and it does not have it’s own attributes.
Step 6: Remove product tabs
Removing product tabs is quite a simple task. You just need to reference your target block and set the remove attribute to true.
Bellow is the catalog_product_view.xml
:
<?xml version="1.0"?>
<page layout="1column" 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.review" remove="true" />
</body>
</page>
Step 7: Add custom tab
Bellow is the way you can add a custom tab to your product page:
Firstly, go to Magento admin and create a new attribute. Then, name it Packaging
and add it to default
attribute set.
After finishing the above step, you need to create a new template file. The file can be named as packaging-content.phtml
and be saved in app/design/frontend/<Magplaza>/<Theme>/Magento_Catalog/templates/product/view/
.
Next, paste this code to the file:
<?php
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_product = $block->getProduct();
$_code = $block->getAtCode();
$_className = $block->getCssClass();
$_attributeLabel = $block->getAtLabel();
$_attributeType = $block->getAtType();
$_attributeAddAttribute = $block->getAddAttribute();
if ($_attributeLabel && $_attributeLabel == 'default') {
$_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();
}
$_attributeValue = $_product->getResource()->getAttribute($_code)->getFrontend()->getValue($_product);
?>
<?php if ($_attributeValue): ?>
<div class="packaging-content" <?php echo $_attributeAddAttribute;?>>
<?php echo $_attributeValue; ?>
</div>
<?php endif; ?>
Make sure that the N.B. attribute set match with the string value in your if statement which is in line number 9.
Finally, place the below code in your layout file catalog_product_view.xml
:
<?xml version="1.0"?>
<page layout="1column" 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\Description" name="packaging-content" template="Magento_Catalog::product/view/packaging-content.phtml" group="detailed_info">
<arguments>
<argument name="at_call" xsi:type="string">getPackaging</argument>
<argument name="at_code" xsi:type="string">packaging</argument>
<argument name="css_class" xsi:type="string">packaging</argument>
<argument name="at_label" xsi:type="string”>packaging</argument>
<argument name="add_attribute" xsi:type="string">itemprop="packaging"</argument>
<argument name="title" translate="true" xsi:type="string">Packaging content</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
Step 8: Add related products in tabbed navigation
In order to add related products in tabbed navigation, there will be two files which you will need to edit, which are template and layout.
With the template file, name it as related-products.phtml
and save in app/design/frontend/<Mageplaza>/<Theme>/Magento_Catalog/templates/product/
. The file will only have one code line:
<?php echo $this->getBlockHtml('catalog.product.related'); ?>
The layout file which named catalog_product_view.xml
will look like this:
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance";; xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<!— 1st Code Block: Get Related Products as new tab -->
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View" name="deliveryinfo.tab" as="deliveryinfo" template="Magento_Catalog::product/related-products.phtml" group="detailed_info" >
<arguments>
<argument translate="true" name="title" xsi:type="string">Related Products</argument>
</arguments>
</block>
</referenceBlock>
<!— 2nd Code Block: Move original block to product info tabs -->
<move element="catalog.product.related" destination="product.info.details" />
</body>
</page>
The first code is for setting up a new tab with related products. The second code is used to change your upsell-products.phtml
template file to this:
<?php echo $this->getBlockHtml('product.info.upsell'); ?>
Here are some customizations you need to make in your layout file:
- Line 6: change template file’s name to
upsell-products.phtml
. - Line 8: title your tab to
You might be interested
. - Line 14: element the attribute to
product.info.upsell
.
Automatic Related Products for M2
Encourage customers to add more items to their cart by showing related products alongside their favorites
Check it out!Conclusion
In conclusion, it is not too difficult to customize and add a custom tab to your product page’s tabbed navigation. I hope that after reading this post, you will be able to have new tabs with new customized content with ease by adding some CSS for styling.
- How to create a simple Hello World module for Magento 2
- Magento 2 Block Template Ultimate Guides
- How to Create Module in Magento 2
- How to Create Controller in Magento 2
- How to create CRUD Models in Magento 2
- How to Create Magento 2 Block, Layout and Templates
- Configuration - System.xml
- How To Create Admin Menu In Magento 2
- Admin ACL
- Admin Grid