5

How can I show related products on bottom section of the product view page?

I want to show 3 related products in bottom part of product view page in Magento 2

4

I presume you are falling back to the blank or Luma theme? If this is the case you need to move the related products using the <move> XML.

<move element="catalog.product.related" destination="block-name-where-you-want-to-place-it" />

And then add the related products to each product through the admin (if you're not using sample data).

  • Can u please tell me how to add the related products in admin. Should we install any plugin? – Sushivam Sep 16 '16 at 11:52
  • Nope, no plugins are required. You just need to navigate to each product in the admin and find the option for related products, then add some related products to it. You may need to clear cache and/or run a reindex for the front end to update. – Ben Crook Sep 16 '16 at 12:15
  • So it will be <move element="catalog.product.related" destination="product.info.main" before="-"/> Right @BenCrook – Ankit Shah Nov 7 '16 at 9:25
  • Yeah, you might need to change before to after if you want it to show after the product info. If it doesn't show you may need to call the block inside a template – Ben Crook Nov 7 '16 at 9:32
  • @BenCrook - I have assigned related products to a specific product and place this snippet <body> <referenceContainer name="content"> <move element="catalog.product.related" destination="product.info.main" after="-" /> </referenceContainer> </body> at myCompany/myTheme/Magento_Catalog/layout/catalog_product_view.xml using custom theme. But exception Element 'move': This element is not expected – Slimshadddyyy Nov 15 '17 at 12:40
4

Adding related product in Magento 2 is very easy. Here are steps

  • Admin -> Product(left sidebar) -> Catalog
  • Click on Edit link under Action tab.
  • Go to Related Products, Up-Sells, and Cross-Sells section of the page
  • Here you can select any number of product and these products will be displayed as related products.

Hope it will help someone.

1

Default Theme

Default theme(Luma) will show related products in bottom part of product view page.

If not show, it is possible the Visibility of your related products is Not Visible Individually.

The "Visibility" setting is in the product edit page.

Other Theme

If you are using other theme or your custom theme, you could customize the "related products position" by layout file.

In the directory app\design\frontend\Vendor\Your_theme_name\Magento_Catalog\layout\, create the file catalog_product_view.xml, in it write the codes like below, then related products will show in bottom part of product view page.

<?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>
        <move element="catalog.product.related" destination="content" />
    </body>
</page>

In the <move>, you could add after | before attribute to assign the element's position relative to siblings. If the attribute is omitted, the element is placed after all siblings.

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.