2

I would like to move my up-sell products into a custom tab on product view page and can't find a way. How can it be done by modifying catalog_product_view.xml.

Please advise, thanks.

9

1. Add below code to catalog_product_view.xml to remove old block

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

2. Add new upsell block to product.info.details

<referenceBlock name="product.info.details">
  <block class="Magento\Catalog\Block\Product\ProductList\Upsell" template="Magento_Catalog::product/list/items.phtml" name="upsell.tab" as="upselltab" group="detailed_info" >
        <arguments>
         <argument translate="true" name="title" xsi:type="string">Upsell</argument>
         <argument name="type" xsi:type="string">upsell</argument>
        </arguments>
        <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="upsell.product.addto" as="addto">
                <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
                       name="upsell.product.addto.compare" as="compare"
                       template="Magento_Catalog::product/list/addto/compare.phtml"/>
            </block>
  </block>
</referenceBlock>

Finshed example catalog_product_view.xml

So your new catalog_product_view.xml within theme should look like below (if there are no other modifications):

<?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>
<!--remove original block-->
<referenceBlock name="product.info.upsell" remove="true"/>
<!--add the new block within product details tab-->
<referenceBlock name="product.info.details">
  <block class="Magento\Catalog\Block\Product\ProductList\Upsell" template="Magento_Catalog::product/list/items.phtml" name="upsell.tab" as="upselltab" group="detailed_info" >
        <arguments>
         <argument translate="true" name="title" xsi:type="string">Upsell</argument>
         <argument name="type" xsi:type="string">upsell</argument>
        </arguments>
        <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="upsell.product.addto" as="addto">
                <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
                       name="upsell.product.addto.compare" as="compare"
                       template="Magento_Catalog::product/list/addto/compare.phtml"/>
            </block>
  </block>
</referenceBlock>
</body>
</page>

File Location: app/design/frontend/Vendor/Theme/Magento_Catalog/layout/catalog_product_view.xml

Changing the Tab Title

Change title of tab within title argument of the added upsell block e.g.

 <argument translate="true" name="title" xsi:type="string">You May be Interested In...</argument>

Tested on Magento 2.1.7

Upsell Tab

5
  • It is possible to move upsell products below description in Details tab?
    – Greck
    Oct 23 '18 at 14:09
  • I'm not sure about doing this with XML like above. Only way I can think of seems a bit messy of top of my head. That is the details.phtml within Catalog module product/view folder. You could maybe check if alias is description and add additional code into there after the description. This could get quite involved however making that whole upsell block work within there. Ask another question and see if anyone has any better ideas?
    – harri
    Oct 23 '18 at 14:28
  • @harri i follow your code and it's working fine but when some product does not have upsell product but custom tab is still displaying can you give any kind of solution?
    – Magento
    yesterday
  • @Magento of the top of my head I would look at possibly an observer that checks the number of upsell products and then modifies the layout to remove the upsell.tab block conditionally.
    – harri
    yesterday
  • @harri if possible can you check it and give me solution for that?
    – Magento
    yesterday

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.