0

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.

3

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

  • 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

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.