Showing results for 
Search instead for 
Did you mean: 

Limit Options on Category Page


Limit Options on Category Page

I'm trying to limit the number of options that show up on a product on the category page.

Currently it looks like the limit is 16.  I'm trying to change it to 5.  I'm unsure where to do this at. 


Anyone point me in the right direction?




Re: Limit Options on Category Page

What do you mean option? Do you mean number of products of any category?

Re: Limit Options on Category Page

You can set it from Magento\Swatch module by changing value of parameter, numberToShow: false, to numberToShow: 5 in swatch-renderer.js file.


File path is,


This file is used for show more button on swatches.

// number of controls to show (false or zero = show all)
            numberToShow: false,

In above variable you have to pass limit.

Second way,

You can just pass limit from phtml file,



above file to your theme or module level and keep below content,

 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
<div class="swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>"></div>
    ], function ($) {
        var jsonConfig = <?= /* @escapeNotVerified */ $block->getJsonConfig() ?>;

        $('.swatch-opt-<?= /* @escapeNotVerified */ $block->getProduct()->getId() ?>').SwatchRenderer({
            selectorProduct: '.product-item-details',
            onlySwatches: true,
            enableControlLabel: false,
            numberToShow: <?= /* @escapeNotVerified */ $block->getNumberSwatchesPerProduct() ?>,
            jsonConfig: jsonConfig,
            jsonSwatchConfig: <?= /* @escapeNotVerified */ $block->getJsonSwatchConfig() ?>,
            mediaCallback: '<?= /* @escapeNotVerified */ $block->getMediaCallback() ?>',

        var dataPriceBoxSelector = '[data-role=priceBox]',
            dataProductIdSelector = '[data-product-id=<?= $block->escapeHtml($block->getProduct()->getId()) ?>]',
            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);

            'priceConfig': {
                priceFormat: jsonConfig.priceFormat,
                prices: jsonConfig.prices
If Issue Solved, Click Kudos/Accept As solutions.

Re: Limit Options on Category Page

Thank you Rakesh!  Although editing the js file did not work, using the override did.


Thank you!!!!