How To Reorder Product Tabs In Magento 2

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 of the cases. Moreover, product pages are the ones that are going to be shared maximum on social media.

An eCommerce page design plays a significant role to create the right visual effect, generate lead and conversion.

Additionally, an easy to follow design can enhance the users’ shopping experience!

When it comes to Magento 2, while developing a store, you may need to tweak the design of the default pages. It is to optimize the page for the better shopping experience and intrigue the visitors to stay on the page.

Reorder product tabs in Magento 2 as shown below:

Before:

After:

Method to reorder product tabs in Magento 2:

1. Create/change the file at app/design/frontend/Vendor/Theme/Magento_Catalog/layout/catalog_product_view.xml 
   
   <referenceBlock name="product.info.details"> <referenceBlock name="product.info.description"> <arguments> <argument name="priority" xsi:type="string">1</argument> </arguments> </referenceBlock> <referenceBlock name="product.attributes"> <arguments> <argument name="priority" xsi:type="string">3</argument> </arguments> </referenceBlock> <referenceBlock name="reviews.tab"> <arguments> <argument name="priority" xsi:type="string">4</argument> </arguments> </referenceBlock> <!-- Your Custom Tab --> <block class="Magento\Catalog\Block\Product\View\Description" name="product.features" as="features" template="product/view/features.phtml" group="detailed_info"> <arguments> <argument translate="true" name="title" xsi:type="string">Custom Tab</argument> <argument name="priority" xsi:type="string">2</argument> </arguments> </block> </referenceBlock>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

   <referenceBlock name="product.info.details">         <referenceBlock name="product.info.description">             <arguments>                 <argument name="priority" xsi:type="string">1</argument>             </arguments>         </referenceBlock>         <referenceBlock name="product.attributes">             <arguments>                 <argument name="priority" xsi:type="string">3</argument>             </arguments>         </referenceBlock>         <referenceBlock name="reviews.tab">             <arguments>                 <argument name="priority" xsi:type="string">4</argument>             </arguments>         </referenceBlock>         <!-- Your Custom Tab -->         <block class="Magento\Catalog\Block\Product\View\Description" name="product.features" as="features" template="product/view/features.phtml" group="detailed_info">             <arguments>                 <argument translate="true" name="title" xsi:type="string">Custom Tab</argument>                 <argument name="priority" xsi:type="string">2</argument>             </arguments>         </block>     </referenceBlock>

2. If details.phtml file does not exist in Theme directory then
   copy from vendor/magento-catalog-view/frontend/templates/product/view/details.phtml to
   app/design/frontend/Vendor/Theme/Magento_Catalog/templates/product/view/details.phtml
   
   
   <?php /** * Copyright © 2016 Magento. All rights reserved. * See COPYING.txt for license details. */ // @codingStandardsIgnoreFile ?> <?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?> <div class="product info detailed"> <?php $layout = $block->getLayout(); ?> <?php # We create a new array; $newPriority = array(); # forEach the original $detailedInfoGroup Array; foreach ($detailedInfoGroup as $name){ $alias = $layout->getElementAlias($name); # Get the priority which we applied via xml file # If no priority is applied via xml file then just set it to 10 $priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '10'; # variables pushed into new two-dimensional array array_push($newPriority, array($name, $priority)); } # Sort array by priority usort($newPriority, function($a, $b) { return $a['1'] <=> $b['1']; }); ?> <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'> <?php # Delete the original forEach statement #foreach ($detailedInfoGroup as $name) foreach ($newPriority as $name):?> <?php # rename $name[0] to $name because it's a two-dimensional array # No further changes to this file, it works as explained $name = $name[0]; $html = $layout->renderElement($name); if (!trim($html)) { continue; } $alias = $layout->getElementAlias($name); $label = $block->getChildData($alias, 'title'); ?> <div class="data item title" aria-labeledby="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title" data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>"> <a class="data switch" tabindex="-1" data-toggle="switch" href="#<?php /* @escapeNotVerified */ echo $alias; ?>" id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title"> <?php /* @escapeNotVerified */ echo $label; ?> </a> </div> <div class="data item content" id="<?php /* @escapeNotVerified */ echo $alias; ?>" data-role="content"> <?php /* @escapeNotVerified */ echo $html; ?> </div> <?php endforeach;?> </div> </div> <?php endif; ?>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

   <?php /** * Copyright © 2016 Magento. All rights reserved. * See COPYING.txt for license details. */   // @codingStandardsIgnoreFile   ?> <?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>     <div class="product info detailed">         <?php $layout = $block->getLayout(); ?>         <?php             # We create a new array;             $newPriority = array();             # forEach the original $detailedInfoGroup Array;             foreach ($detailedInfoGroup as $name){                 $alias = $layout->getElementAlias($name);                 # Get the priority which we applied via xml file                 # If no priority is applied via xml file then just set it to 10                 $priority = $block->getChildData($alias,'priority') ? $block->getChildData($alias,'priority') : '10';                 # variables pushed into new two-dimensional array                 array_push($newPriority, array($name, $priority));             }             # Sort array by priority             usort($newPriority, function($a, $b) {                 return $a['1'] <=> $b['1'];             });         ?>         <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>             <?php             # Delete the original forEach statement             #foreach ($detailedInfoGroup as $name)             foreach ($newPriority as $name):?>                 <?php                     # rename $name[0] to $name because it's a two-dimensional array                     # No further changes to this file, it works as explained                     $name = $name[0];                     $html = $layout->renderElement($name);                     if (!trim($html)) {                         continue;                     }                     $alias = $layout->getElementAlias($name);                     $label = $block->getChildData($alias, 'title');                 ?>                 <div class="data item title"                      aria-labeledby="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title"                      data-role="collapsible" id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>">                     <a class="data switch"                        tabindex="-1"                        data-toggle="switch"                        href="#<?php /* @escapeNotVerified */ echo $alias; ?>"                        id="tab-label-<?php /* @escapeNotVerified */ echo $alias;?>-title">                         <?php /* @escapeNotVerified */ echo $label; ?>                     </a>                 </div>                 <div class="data item content" id="<?php /* @escapeNotVerified */ echo $alias; ?>" data-role="content">                     <?php /* @escapeNotVerified */ echo $html; ?>                 </div>             <?php endforeach;?>         </div>     </div> <?php endif; ?>

That’s it.

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.

If you are stuck in between the steps, mention them in the Comments section below and I’d be happy to help.

Do share the solution with the fellow developers via social media.

Thank you.