fbpx

How to Remove and Reorder Default Tabs in Magento 2

You need to make changes in catalog_product_view.xml to make any changes on product page including editing tabs. Edit or create ( if it doesn’t exist in your theme) and place this file in app\design\frontend\<Vendor>\<Theme>\Magento_Catalog\layout.

Replace <Vendor> and <Theme> with you vendor and theme name. For magento luma it is Magento and luma accordingly, e.g.:

app\design\frontend\Magento\luma\Magento_Catalog\layout

For Athlete2 theme it is Olegnax and athlete2. E.g.:

app\design\frontend\Olegnax\athlete2\Magento_Catalog\layout

Magento2 Tab blocks xml names

Magento has 3 default tabs, with following xml names:

Details: product.info.description
More Information: product.attributes
Reviews: reviews.tab

Remove Magento 2 Tabs

You can remove any block in Magento 2 using remove attribute. Define block name using reference block and set remove attribute value to true.

See Common layout customization tasks in Magento official documentation.

Add sample code below to the body tag in catalog_product_view.xml to remove specific Magento 2 tabs.

Details Tab:

<referenceblock name="product.info.description" remove="true">

More Information Tab:

<referenceBlock name="product.attributes" remove="true" />

Reviews Tab:

<referenceBlock name="reviews.tab" remove="true" />

Example of catalog_product_view.xml in case you need to create it:

<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.description" remove="true" />
        <referenceblock name="product.attributes" remove="true">
        <referenceBlock name="reviews.tab" remove="true" />
    </body>
</page>

You can use following code in case you want to completely remove tabs section from the product page:

<referenceBlock name="product.info.details" remove="true" />

Complete catalog_product_view.xml example in case you need to create it:

<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" remove="true" />
    </body>
</page>

Reorder Magento2 Tabs

You can reorder Magento 2 default tabs by changing sort_order argument of the tab block. Add following code to the body tag in catalog_product_view.xml

Details Tab:

<referenceBlock name="product.info.description">
    <arguments>
        <argument name="sort_order" xsi:type="string">40</argument>
    </arguments>
</referenceBlock>

In the code above, we defined what block to with referenceBlock and added sort order argument with value = 40. Default values are 10, 20 and 30 for details, more information and reviews accordingly. So value 40 will move details tab after reviews and more information tabs.

You can also change the tab title this way, by changing title argument :

<referenceBlock name="product.info.description">
    <arguments>
        <argument name="title" translate="true" xsi:type="string">Description</argument>
        <argument name="sort_order" xsi:type="string">40</argument>
    </arguments>
</referenceBlock>

Do the same for other tabs, simply change block reference name.

More information tab:

<referenceBlock name="product.attributes">
    <arguments>
        <argument name="sort_order" xsi:type="string">40</argument>
    </arguments>
</referenceBlock>

Reviews Tab:

<referenceBlock name="reviews.tab">
    <arguments>
        <argument name="sort_order" xsi:type="string">40</argument>
    </arguments>
</referenceBlock>

Don’t forget to adjust sort order value.

Example of catalog_product_view.xml with code to reorder and rename tabs title for all 3 default tabs, in case you need to create it:

<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.description">
			<arguments>
				<argument name="title" translate="true" xsi:type="string">Description</argument>
				<argument name="sort_order" xsi:type="string">10</argument>
			</arguments>
		</referenceBlock>
		<referenceBlock name="product.attributes">
			<arguments>
				<argument name="title" translate="true" xsi:type="string">More Information</argument>
				<argument name="sort_order" xsi:type="string">20</argument>
			</arguments>
		</referenceBlock>
		<referenceBlock name="reviews.tab">
			<arguments>
				<argument name="title" translate="true" xsi:type="string">Reviews</argument>
				<argument name="sort_order" xsi:type="string">30</argument>
			</arguments>
		</referenceBlock>
    </body>
</page>