{"id":7404,"date":"2019-10-04T12:42:33","date_gmt":"2019-10-04T07:12:33","guid":{"rendered":"https:\/\/www.hiddentechies.com\/blog\/?p=7404"},"modified":"2019-10-04T15:26:38","modified_gmt":"2019-10-04T09:56:38","slug":"magento-2-add-custom-tab-on-product-view-page","status":"publish","type":"post","link":"https:\/\/www.hiddentechies.com\/blog\/magento-2\/magento-2-add-custom-tab-on-product-view-page\/","title":{"rendered":"Magento 2 – How to Add Custom Tab on Product View Page"},"content":{"rendered":"

In this post I am going to explain how to add custom tab on product detail page in Magento 2.<\/p>\n

Here, I am using my custom module \u2013 Ht_Mymodule<\/p>\n

First, create product page layout file catalog_product_view.xml and add following code in it.<\/p>\n

File Path: app\/code\/Ht\/Mymodule\/view\/frontend\/layout\/catalog_product_view.xml<\/p>\n

<?xml version=\"1.0\"?>\r\n\r\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\r\n    <body>\r\n        <referenceBlock name=\"product.info.details\">\r\n            <block class=\"Magento\\Catalog\\Block\\Product\\View\" name=\"custom.tab\" template=\"Ht_Mymodule::product\/view\/custom-tab.phtml\" group=\"detailed_info\" >\r\n                <arguments>\r\n                    <argument name=\"title\" translate=\"true\" xsi:type=\"string\">Custom Tab<\/argument>\r\n                    <argument name=\"css_class\" xsi:type=\"string\">custom-tab<\/argument>\r\n                    <argument name=\"sort_order\" xsi:type=\"string\">100<\/argument>\r\n                <\/arguments>\r\n            <\/block>\r\n        <\/referenceBlock>\r\n    <\/body>\r\n<\/page><\/pre>\n
Next to that, create the template file custom-tab.phtml and write your content in that.<\/p>\n
File Path: app\/code\/Ht\/Mymodule\/view\/frontend\/templates\/product\/view\/custom-tab.phtml<\/p>\n
Now clear the cache and check for the result.<\/p>\n
\"Magento<\/p>\n
If you want to display product details in this file then you can simply get product data by:<\/p>\n
$_product = $block->getProduct();\r\n\r\n$productId = $_product->getId();\r\n$productName = $_product->getName();<\/pre>\n
Thats it.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post I am going to explain how to add custom tab on product detail page in Magento 2. Here, I am using my custom module \u2013 Ht_Mymodule First, create product page layout file catalog_product_view.xml and add following code in it. File Path: app\/code\/Ht\/Mymodule\/view\/frontend\/layout\/catalog_product_view.xml <?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”… <\/p>\n
Continue Reading<\/a><\/div>\n","protected":false},"author":1,"featured_media":7407,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[10],"_links":{"self":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/7404"}],"collection":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/comments?post=7404"}],"version-history":[{"count":1,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/7404\/revisions"}],"predecessor-version":[{"id":7406,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/7404\/revisions\/7406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media\/7407"}],"wp:attachment":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media?parent=7404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/categories?post=7404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/tags?post=7404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}