Customizing Tab Order in Magento 2.3.1 and above

If you’re running Magento 2.3.1 or a newer version, you have more control than ever over the order in which tabs are displayed on your product pages. By using the sort_order argument in your layout XML configuration and making a small adjustment to your template file, you can effortlessly rearrange product detail tabs to better suit your needs.

Here’s how to do it:

1. Update Layout XML Configuration

You can adjust the tab order using the sort_order argument in your layout XML file, typically located at app/design/frontend/Packagename/themename/Magento_Catalog/layout/catalog_product_view.xml.

xml

Description 20

In the above code, we specify the sort_order value for the “product.info.description” block. By increasing or decreasing this value, you control the tab’s position relative to other tabs.

2. Modify Your Template File

To complete the customization, make a small change in your template file. If you are overriding the template “app/design/frontend/Packagename/themename/Magento_Catalog/templates/product/view/details.phtml,” you’ll need to update how you retrieve child names.

Old Method:

php

getGroupChildNames('detailed_info', 'getChildHtml')):?>

Updated Method:

php

getGroupSortedChildNames('detailed_info', 'getChildHtml')):?>

This change ensures that the tabs are displayed in the order you’ve set using the sort_order argument in the layout XML.

3. Overriding Magento\Catalog\Block\Product\View\Details.php (if necessary)

If you’ve overridden the Magento\Catalog\Block\Product\View\Details.php block class, make sure it includes the updated method getGroupSortedChildNames. This step is crucial to align your custom block with the new sorting logic.

With these changes, you have the power to effortlessly reorder product detail tabs on your Magento 2.3.1 or newer website. This can greatly enhance the user experience and enable you to showcase your product information in a more logical and appealing manner. Enjoy the flexibility that these updates offer and tailor your product pages to perfection!