I want to add a new tab along with the already available tabs on product view page at my desired position and without modifying Magento_Catalog/templates/product/view/details.phtml.

I know this can be done my customizing/creating the catalog_product_view.xml file but I want to know how to change its position.

Say for example :- After Details Tab.

  • There is no justification on how to change the position. – user46826 Dec 26 '17 at 9:08
  • Yes, you are right. – Prince Patel Dec 26 '17 at 9:09
  • Please read the bold content carefully. – user46826 Dec 26 '17 at 9:23

First go to the admin panel of your Magento store and then navigate to Stores -> Product. Click on Add New Attribute and create new Attribute. (Set Attribute label DEMO and Attribute code demo)

Now go to Stores -> Attribute Set and Add Attribute Set.

Now click on your Attribute Set and dragged unassigned Attribute (which you have created in first step) to Product Details and click Save.

Now go to your product edit page in admin panel and change the attribute name and template name which you have created in first and second step.


app/code/Test/ProductTabs/etc/module.xml paste this code.  
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Test_ProductTabs" setup_version="1.0.0"></module>

In app/code/Test/ProductTabs/registration.php, paste this code. 

In app/code/Test/ProductTabs/view/frontend/layout/catalog_product_view.xml, paste this code.

<?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">
    <referenceBlock name="product.info.details">
        <block class="Magento\Catalog\Block\Product\View" name="demo.tab" template="Test_ProductTabs::custom_tab.phtml" group="detailed_info" >
                <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>

Now in app/code/Test/ProductTabs/view/frontend/templates/custom_tab.phtml, paste this code.

getProduct(); ?> getData('demo'); ?>

After creating module please run following command

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
chmod -R 777 var pub /static
  • It is not working form me. I want the Tab at second position. – user46826 Dec 26 '17 at 10:22