Our Feature Items: SM Market // SM AutoStore // SP Revo
Shopping cart (0)

Club Magento 2

How To Add a Custom Product Tab in Magento 2 Theme

Rate this item
(2 votes)
Written by  Sarah
Wednesday, 14 November 2018 17:25
How To Add a Custom Product Tab in Magento 2 Theme - 5.0 out of 5 based on 2 votes

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.

How to add custom tab to magento 2 product

In this post, i will show you how to Add Custom Tab in Magento 2 Product Page Layout

Add New Attribute

Go to the Admin Panel of your Magento store and navigate to Stores → Product.

Add Custom Tab Magento 2

Now click on Add New Attribute.

Add Custom Tab Magento 2

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

Add Custom Tab Magento 2

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

Add Custom Tab Magento 2

Select Or Create Attribute Set

Navigate to the Stores >> Attribute Set.

Add Custom Tab Magento 2

Now click on Add Attribute Set if you have not created an Attribute Set yet. Enter mobile in Attribute Set Name.

Add Custom Tab Magento 2

Click on mobile – Attribute Set which we have created. Drag and Drop test attribute from unassigned to Product Details and click on Save.

Add Custom Tab Magento 2

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:

Add Custom Tab Magento 2

Now you can see the new attribute set test on product edit page. Update the attribute set and click on Save.

Add Custom Tab Magento 2

Create Layout File

In app/code/SM/MagentechThemeName/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="SM/Magentechthemename::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

In app/code/SM/MagentechThemeName/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>
  

Let’s move on to running commands now.

Note: All of the following commands will have to be run in the root directory of your Magento 2.

Run this command now:

php bin/magento module:status

If you found the module in the disabled list, then you have to enable it by running the following command:

php bin/magento module:enable SM/MagenTech-Theme-Name_Mymodule

Lastly, just run all these commands:

php bin/magento setup:upgrade

php bin/magento cache:clean

php bin/magento cache:clean

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

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

Google+
Joomla TemplatesFree Joomla TemplatesVirtuemart TemplatesK2 TemplatesJoomShopping TemplatesHikaShop TemplatesSobiPro TemplatesOpenCart Themes
Quà Tết Cao Cấp Hộp quà tết Giỏ quà tết Túi quà tết