How to Programmatically limit Related, Cross-sell and Upsell Products in Magento 2

Urška Jenko14.01.2020Optilife

In Magento administration, Related, Upsell, and Cross-sell products can be set for each individual product.

Related and Upsell products are displayed on the product page of those products for which we have set them up. There is no limit to their number, so if an online store administrator enters a larger number of products, all of them can be shown on the page.

On the other hand, Cross-sell products are shown in the cart according to the products that are in it. By default, they are limited to four.

In this article, we will limit the number of Related, Cross-sell and Upsell products shown on the product page and in the cart. If more products are entered in the product settings in the Magento administration, only some of them will be displayed. We will limit the size of the collections used for loading Related and Upsell products. There is already a restriction on Cross-sell products, so we’ll just override it.

In order not to edit Magento core files, we will create a new Optiweb_LimitRelatedCrossUpsell module that will overwrite only the files that are relevant to us.

To add a new module, we create a registration.php and module.xml files.

app/code/Optiweb/LimitRelatedCrossUpsell/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::MODULE,
   'Optiweb_LimitRelatedCrossUpsell',
   __DIR__
);

In module.xml we determine the dependency of our module to the Magento_Checkout (for Cross-sell products) and Magento_Catalog (for Related and Up-sell products) modules:

app/code/Optiweb/LimitRelatedCrossUpsell/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
   <module name="Optiweb_LimitRelatedCrossUpsell" setup_version="1.0.0">
       <sequence>
           <module name="Magento_Checkout"></module>
           <module name="Magento_Catalog"></module>
       </sequence>
   </module>
</config>

The file app/code/Optiweb/LimitRelatedCrossUpsell/etc/di.xml will specify which core files to override. In our case, we will need to override:

Magento\Checkout\Block\Cart\Crosssell.php
Magento\Catalog\Block\Product\ProductList\Related.php
Magento\Catalog\Block\Product\ProductList\Upsell.php

app/code/Optiweb/LimitRelatedCrossUpsell/etc/di.xml

<?xml version="1.0" encoding="UTF-8" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
  
   <preference for="Magento\Checkout\Block\Cart\Crosssell" type="Optiweb\LimitRelatedCrossUpsell\Block\Cart\Crosssell" ></preference>
  
   <preference for="Magento\Catalog\Block\Product\ProductList\Related" type="Optiweb\LimitRelatedCrossUpsell\Block\Product\ProductList\Related" ></preference>
  
   <preference for="Magento\Catalog\Block\Product\ProductList\Upsell" type="Optiweb\LimitRelatedCrossUpsell\Block\Product\ProductList\Upsell" ></preference>
  
</config>

In the Magento core file Magento\Checkout\Block\Cart\Crosssell.php, the $_maxItemCount variable specifies a limit on the displayed Cross-sell products that appear in the cart. The limit is set to 4 by default. In our module, we create a new file app/code/Optiweb/LimitRelatedCrossUpsell/Block/Cart/Crosssell.php, in which we override the $_maxItemCount variable and assign it a new value.

app/code/Optiweb/LimitRelatedCrossUpsell/Block/Cart/Crosssell.php

<?php

namespace Optiweb\LimitRelatedCrossUpsell\Block\Cart;

class Crosssell extends \Magento\Checkout\Block\Cart\Crosssell
{

   /**
    * We can now set our limit here
    */
   const CROSSSELL_LIMIT = 2;

   /**
    * Crosssell constructor.
    * @param \Magento\Catalog\Block\Product\Context $context
    * @param \Magento\Checkout\Model\Session $checkoutSession
    * @param \Magento\Catalog\Model\Product\Visibility $productVisibility
    * @param \Magento\Catalog\Model\Product\LinkFactory $productLinkFactory
    * @param \Magento\Quote\Model\Quote\Item\RelatedProducts $itemRelationsList
    * @param \Magento\CatalogInventory\Helper\Stock $stockHelper
    * @param array $data
    */
   public function __construct(
       \Magento\Catalog\Block\Product\Context $context,
       \Magento\Checkout\Model\Session $checkoutSession,
       \Magento\Catalog\Model\Product\Visibility $productVisibility,
       \Magento\Catalog\Model\Product\LinkFactory $productLinkFactory,
       \Magento\Quote\Model\Quote\Item\RelatedProducts $itemRelationsList,
       \Magento\CatalogInventory\Helper\Stock $stockHelper,
       array $data = []
   ) {
       parent::__construct(
           $context,
           $checkoutSession,
           $productVisibility,
           $productLinkFactory,
           $itemRelationsList,
           $stockHelper,
           $data
       );

       $this->_maxItemCount = self::CROSSSELL_LIMIT; //limit number of products
   }
}

As the limit for Related and Up-sell products is not set by default, we need to override the _prepareData() methods, which create product collections for the currently selected product. We will limit collections with setPageSize().

app/code/Optiweb/LimitRelatedCrossUpsell/Block/Product/ProductList/Related.php

<?php

namespace Optiweb\LimitRelatedCrossUpsell\Block\Product\ProductList;

class Related extends \Magento\Catalog\Block\Product\ProductList\Related
{

   /**
    * We can now set our limit here
    */
   const RELATED_LIMIT = 2;

   /**
    * Related constructor.
    * @param \Magento\Catalog\Block\Product\Context $context
    * @param \Magento\Checkout\Model\ResourceModel\Cart $checkoutCart
    * @param \Magento\Catalog\Model\Product\Visibility $catalogProductVisibility
    * @param \Magento\Checkout\Model\Session $checkoutSession
    * @param \Magento\Framework\Module\Manager $moduleManager
    * @param array $data
    */
   public function __construct(
       \Magento\Catalog\Block\Product\Context $context,
       \Magento\Checkout\Model\ResourceModel\Cart $checkoutCart,
       \Magento\Catalog\Model\Product\Visibility $catalogProductVisibility,
       \Magento\Checkout\Model\Session $checkoutSession,
       \Magento\Framework\Module\Manager $moduleManager,
       array $data = []
   ) {
       $this->_checkoutCart = $checkoutCart;
       $this->_catalogProductVisibility = $catalogProductVisibility;
       $this->_checkoutSession = $checkoutSession;
       $this->moduleManager = $moduleManager;
       parent::__construct(
           $context,
           $checkoutCart,
           $catalogProductVisibility,
           $checkoutSession,
           $moduleManager,
           $data
       );
   }

   /**
    * Prepare data
    * added limit for collection
    *
    * @return $this
    */
   protected function _prepareData()
   {
       $product = $this->getProduct();
       /* @var $product \Magento\Catalog\Model\Product */

       $this->_itemCollection = $product->getRelatedProductCollection()->addAttributeToSelect(
           'required_options'
       )->setPositionOrder()->addStoreFilter();

       //limit number of products
       $this->_itemCollection->setPageSize(self::RELATED_LIMIT);

       if ($this->moduleManager->isEnabled('Magento_Checkout')) {
           $this->_addProductAttributesAndPrices($this->_itemCollection);
       }
       $this->_itemCollection->setVisibility($this->_catalogProductVisibility->getVisibleInCatalogIds());

       $this->_itemCollection->load();

       foreach ($this->_itemCollection as $product) {
           $product->setDoNotUseCategoryId(true);
       }

       return $this;
   }
}

app/code/Optiweb/LimitRelatedCrossUpsell/Block/Product/ProductList/Upsell.php

<?php

namespace Optiweb\LimitRelatedCrossUpsell\Block\Product\ProductList;

class Upsell extends \Magento\Catalog\Block\Product\ProductList\Upsell
{

   /**
    * We can now set our limit here
    */
   const UPSELL_LIMIT = 2;

   /**
    * Upsell constructor.
    * @param \Magento\Catalog\Block\Product\Context $context
    * @param \Magento\Checkout\Model\ResourceModel\Cart $checkoutCart
    * @param \Magento\Catalog\Model\Product\Visibility $catalogProductVisibility
    * @param \Magento\Checkout\Model\Session $checkoutSession
    * @param \Magento\Framework\Module\Manager $moduleManager
    * @param array $data
    */
   public function __construct(
       \Magento\Catalog\Block\Product\Context $context,
       \Magento\Checkout\Model\ResourceModel\Cart $checkoutCart,
       \Magento\Catalog\Model\Product\Visibility $catalogProductVisibility,
       \Magento\Checkout\Model\Session $checkoutSession,
       \Magento\Framework\Module\Manager $moduleManager,
       array $data = []
   )
   {
       $this->_checkoutCart = $checkoutCart;
       $this->_catalogProductVisibility = $catalogProductVisibility;
       $this->_checkoutSession = $checkoutSession;
       $this->moduleManager = $moduleManager;
       parent::__construct(
           $context,
           $checkoutCart,
           $catalogProductVisibility,
           $checkoutSession,
           $moduleManager,
           $data
       );
   }

   /**
    * Prepare data
    * added limit for collection
    *
    * @return $this
    */
   protected function _prepareData()
   {
       $product = $this->getProduct();
       /* @var $product \Magento\Catalog\Model\Product */
       $this->_itemCollection = $product->getUpSellProductCollection()->setPositionOrder()->addStoreFilter();

       //limit number of products
       $this->_itemCollection->setPageSize(self::UPSELL_LIMIT);

       if ($this->moduleManager->isEnabled('Magento_Checkout')) {
           $this->_addProductAttributesAndPrices($this->_itemCollection);
       }
       $this->_itemCollection->setVisibility($this->_catalogProductVisibility->getVisibleInCatalogIds());

       $this->_itemCollection->load();

       /**
        * Updating collection with desired items
        */
       $this->_eventManager->dispatch(
           'catalog_product_upsell',
           ['product' => $product, 'collection' => $this->_itemCollection, 'limit' => null]
       );

       foreach ($this->_itemCollection as $product) {
           $product->setDoNotUseCategoryId(true);
       }

       return $this;
   }
}

We can now set the limit of:

Cross-sell products by changing the value of the constant CROSSSELL_LIMIT (app/code/Optiweb/LimitRelatedCrossUpsell/Block/Cart/Crosssell.php)
Related products by changing the value of the constant RELATED_LIMIT (app/code/Optiweb/LimitRelatedCrossUpsell/Block/Product/ProductList/Related.php)
Up-sell products by changing the value of the constant UPSELL_LIMIT (app/code/Optiweb/LimitRelatedCrossUpsell/Block/Product/ProductList/Upsell.php)

Conclusion

By applying the steps above we can now successfully configure the number of cross-sell, related and up-sell items. This allows us to have full control over how many items are displayed in each section, which in turn helps us design our ecommerce to our advantage, improve the user experience and consequently increase sales.

Urška Jenko

Web Developer

As a Magento Developer I enjoy the challenges that the digital world has to offer.

Be the first one to hear about the latest digital trends and case studies.

Write down your email address below!

How to Programmatically limit Related, Cross-sell and Upsell Products in Magento 2

Conclusion

Share this entry

Urška Jenko

Web Developer

Don’t miss out on similar articles

Employee life cycle

Need Measure Summit 2022 notes? We’re happy to share

All roads lead to Škofja Loka