Magento 2: Move up-sell product to product.info.details tab

magento.stackexchange https://magento.stackexchange.com/questions/189103

Frage

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.

War es hilfreich?

Lösung

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

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit magento.stackexchange
scroll top