I would like to move related products to "Details" tab below description on product page.
2
-
Do you want to show related product in default Detail tab ?– PawanCommented Oct 23, 2018 at 17:07
-
@Pawan yes, I want– GreckCommented Oct 24, 2018 at 6:40
Add a comment
|
2 Answers
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.
-
Thanks for your tips, it works perfectly. I have a question, is it possible to add up-sell products or cross-sell to the same tab inside the "related product" tab? Commented May 20, 2020 at 0:10
For adding related products we also need two files, template and layout:
Our template file, we shall name it related-products.phtml and save it in app/design/frontend///Magento_Catalog/templates/product/ will have just one line of code:
<?php echo $this->getBlockHtml('catalog.product.related'); ?>
And our layout file catalog_product_view.xml should look like this:
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance";; xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<!— 1st Code Block: Get Related Products as new tab -->
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View" name="deliveryinfo.tab" as="deliveryinfo" template="Magento_Catalog::product/related-products.phtml" group="detailed_info" >
<arguments>
<argument translate="true" name="title" xsi:type="string">Related Products</argument>
</arguments>
</block>
</referenceBlock>
<!— 2nd Code Block: Move original block to product info tabs -->
<move element="catalog.product.related" destination="product.info.details" />
</body>
</page>
First code block is to set up a new tab with related products, and the second one is for removing the original block from layout flow.
In similar fashion this can be done for displaying upsell products as well. All we need to do is change our template (we can name it upsell-products.phtml) file to:
<?php echo $this->getBlockHtml('product.info.upsell'); ?>
And in our layout file change:
– name of template file to upsell-products.phtml (line: 6)
– title of our tab to “You might be interested” or something similar (line: 8)
– element attribute to product.info.upsell (line: 14)
