Reorder product tabs in Magento 2<\/strong><\/em> as shown below:<\/p>\n\n\n\n Before:<\/strong><\/p>\n\n\n\n After:<\/strong><\/p>\n\n\n\n 1. Create\/change the file at <\/p>\n\n\n\n app\/design\/frontend\/Vendor\/Theme\/Magento_Catalog\/layout\/catalog_product_view.xml<\/strong><\/em><\/p>\n\n\n\n 2. If details.phtml<\/strong><\/em> file does not exist in Theme directory then vendor\/magento-catalog-view\/frontend\/templates\/product\/view\/details.phtml<\/em><\/strong><\/p>\n\n\n\n to<\/p>\n\n\n\n app\/design\/frontend\/Vendor\/Theme\/Magento_Catalog\/templates\/product\/view\/details.phtml<\/strong><\/em><\/p>\n\n\n\n That\u2019s it.<\/p>\n\n\n\n Change the order of the tabs on the product page in Magento 2 store. Tweak the design of the product page based on buyer persona and content relevancy.<\/p>\n\n\n\n Do share the solution with the fellow developers via social media.<\/p>\n\n\n\n Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":" A product page design in E-commerce is important as a potential customer is going to search for the product and not a brand in most…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-723","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=723"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/723\/revisions"}],"predecessor-version":[{"id":19083,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/723\/revisions\/19083"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Before](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/12\/Product-tabs-in-Magento-2-Meetanshi-1024x377.png\")
<\/figure>\n\n\n\n![\"](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/12\/Reordered-product-tabs-in-Magento-2-Meetanshi-1024x378.png\")
<\/figure>\n\n\n\nMethod to reorder product tabs in Magento 2<\/h2>\n\n\n\n
<referenceBlock name=\"product.info.details\">\n <referenceBlock name=\"product.info.description\">\n <arguments>\n <argument name=\"priority\" xsi:type=\"string\">1<\/argument>\n <\/arguments>\n <\/referenceBlock>\n <referenceBlock name=\"product.attributes\">\n <arguments>\n <argument name=\"priority\" xsi:type=\"string\">3<\/argument>\n <\/arguments>\n <\/referenceBlock>\n <referenceBlock name=\"reviews.tab\">\n <arguments>\n <argument name=\"priority\" xsi:type=\"string\">4<\/argument>\n <\/arguments>\n <\/referenceBlock>\n <!-- Your Custom Tab -->\n <block class=\"Magento\\Catalog\\Block\\Product\\View\\Description\" name=\"product.features\" as=\"features\" template=\"product\/view\/features.phtml\" group=\"detailed_info\">\n <arguments>\n <argument translate=\"true\" name=\"title\" xsi:type=\"string\">Custom Tab<\/argument>\n <argument name=\"priority\" xsi:type=\"string\">2<\/argument>\n <\/arguments>\n <\/block>\n <\/referenceBlock><\/pre>\n\n\n\n
copy from<\/p>\n\n\n\n<?php\n\/**\n * Copyright \u00a9 2016 Magento. All rights reserved.\n * See COPYING.txt for license details.\n *\/\n\n\/\/ @codingStandardsIgnoreFile\n\n?>\n<?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>\n <div class=\"product info detailed\">\n <?php $layout = $block->getLayout(); ?>\n <?php\n # We create a new array;\n $newPriority = array();\n # forEach the original $detailedInfoGroup Array;\n foreach ($detailedInfoGroup as $name){\n $alias = $layout->getElementAlias($name);\n # Get the priority which we applied via xml file\n # If no priority is applied via xml file then just set it to 10\n $priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '10';\n # variables pushed into new two-dimensional array\n array_push($newPriority, array($name, $priority));\n }\n # Sort array by priority\n usort($newPriority, function($a, $b) {\n return $a['1'] <=> $b['1'];\n });\n ?>\n <div class=\"product data items\" data-mage-init='{\"tabs\":{\"openedState\":\"active\"}}'>\n <?php\n # Delete the original forEach statement\n #foreach ($detailedInfoGroup as $name)\n foreach ($newPriority as $name):?>\n <?php\n # rename $name[0] to $name because it's a two-dimensional array\n # No further changes to this file, it works as explained\n $name = $name[0];\n $html = $layout->renderElement($name);\n if (!trim($html)) {\n continue;\n }\n $alias = $layout->getElementAlias($name);\n $label = $block->getChildData($alias, 'title');\n ?>\n <div class=\"data item title\"\n aria-labeledby=\"tab-label-<?php \/* @escapeNotVerified *\/ echo $alias;?>-title\"\n data-role=\"collapsible\" id=\"tab-label-<?php \/* @escapeNotVerified *\/ echo $alias;?>\">\n <a class=\"data switch\"\n tabindex=\"-1\"\n data-toggle=\"switch\"\n href=\"#<?php \/* @escapeNotVerified *\/ echo $alias; ?>\"\n id=\"tab-label-<?php \/* @escapeNotVerified *\/ echo $alias;?>-title\">\n <?php \/* @escapeNotVerified *\/ echo $label; ?>\n <\/a>\n <\/div>\n <div class=\"data item content\" id=\"<?php \/* @escapeNotVerified *\/ echo $alias; ?>\" data-role=\"content\">\n <?php \/* @escapeNotVerified *\/ echo $html; ?>\n <\/div>\n <?php endforeach;?>\n <\/div>\n <\/div>\n<?php endif; ?><\/pre>\n\n\n\n