How to change the order of tabs on the Product page?

The best way to implement the order change on the tabs that are displayed on magento’s product page is by extending the product page layout and changing the sort_order attribute for the tab block you want to move.

In your theme’s folder (design/frontend/Theme_Vendor/Theme_Name) add (or append to) the file catalog_product_view.xml under the folder Magento_Catalog/layout.

Is you already have that file add the following xml code to it:

<referenceBlock name="tab_name">
	<arguments>
		<argument name="sort_order" xsi:type="string">15</argument>
	</arguments>
</referenceBlock>

Where tab_name is the reference to the tab you want to move and the value 15 is the priority used to sort the tabs when they are rendered into the frontend.

On the default layout for the product page you can find the product.info.details block that is responsible for the product tabs:

<block class="Magento\Catalog\Block\Product\View\Details" name="product.info.details" template="Magento_Catalog::product/view/details.phtml" after="product.info.media">
	<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" as="description" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info">
		<arguments>
			<argument name="at_call" xsi:type="string">getDescription</argument>
			<argument name="at_code" xsi:type="string">description</argument>
			<argument name="css_class" xsi:type="string">description</argument>
			<argument name="at_label" xsi:type="string">none</argument>
			<argument name="title" translate="true" xsi:type="string">Details</argument>
			<argument name="sort_order" xsi:type="string">10</argument>
		</arguments>
	</block>
	<block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="Magento_Catalog::product/view/attributes.phtml" group="detailed_info">
		<arguments>
			<argument translate="true" name="title" xsi:type="string">More Information</argument>
			<argument name="sort_order" xsi:type="string">20</argument>
		</arguments>
	</block>
</block>

There you can see that the description tab has a sort_order of 10 and the additional tab has the sort_order of 20. So, by setting a new tab with the sort_order of 15 you are telling magento to place it in between these default tabs.

And that is it :)!

Leave a Reply

Your email address will not be published.