Magento – Move related products to “Details” tab on product page

frontendmagento2producttabsxml

I would like to move related products to "Details" tab below description on product page.

Best Answer

Creating additional tab is quite easy as one two three. Its been well described by "Claudiu Creanga" in another relevant question answer here: https://magento.stackexchange.com/a/123693

A quick overview considering the Mayur answer and a quick one I used in my scenario follows this way.

In your catalog_product_view.xmlusually available in app/design/frontend/{vendor}/{theme}/Magento_Catalog/layout/catalog_product_view.xml use this

<referenceBlock name="product.info.details">
    <block class="Magento\Catalog\Block\Product\ProductList\Related" name="product.info.related" template="Magento_Catalog::product/list/items.phtml" group="detailed_info">
        <arguments>
            <argument name="type" xsi:type="string">related</argument>
            <argument translate="true" name="title" xsi:type="string">Related Products</argument>
            <argument name="sort_order" xsi:type="string">40</argument>
        </arguments>
    </block>
</referenceBlock>

Take a note on sort_order, this will help you move its position in tabs, in my case I used 40 to make it appear next to Review. 30 is set for Review block as its seen here: https://github.com/magento/magento2/blob/2.3.3/app/code/Magento/Review/view/frontend/layout/catalog_product_view.xml#L23

You can adjust this position as per your need.

NOTE: You may wish to remove existing Related product block from the theme, to do this add this line to your catalog_product_view.xml

<referenceBlock name="catalog.product.related" remove="true"/>

IMPORTANT: Don't forget to change the template path, or adjustments to your related product template to match with your theme design.

Related Topic