0

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

  • Do you want to show related product in default Detail tab ? – Pawan Oct 23 '18 at 17:07
  • @Pawan yes, I want – Greck Oct 24 '18 at 6:40
0

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)

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.