1

I want to change the toolbar limiter and to insert "per page" text inside <option> tag.

enter image description here

<div class="limiter">
    <label class="label" for="limiter">
        <span><?= /* @escapeNotVerified */ __('Show') ?></span>
    </label>
    <div class="control">
        <select id="limiter" data-role="limiter" class="limiter-options">
            <?php foreach ($block->getAvailableLimit() as $_key => $_limit): ?>
                <option value="<?= /* @escapeNotVerified */ $_key ?>"<?php if ($block->isLimitCurrent($_key)): ?>
                    selected="selected"<?php endif ?>>
                    <?= /* @escapeNotVerified */ $_limit ?>
                </option>
            <?php endforeach; ?>
        </select>
    </div>
    <span class="limiter-text"><?= /* @escapeNotVerified */ __('per page') ?></span>
</div>

I add this pages on my custom theme but even if I change something the changes are not displayed.

app/design/frontend/MyTheme/default/Magento_Theme/templates/html/pager.phtml
app/design/frontend/MyTheme/default/Magento_Catalog/template/product/list/toolbar/limiter.phtml

I need to add changes in other file?

  • which file you are editing ? what's your custom file path ? – Manoj Deswal Oct 24 '17 at 11:21
  • is already in the post the files that I try to edit, pager.phtml and limiter.phtml – Robert Oct 24 '17 at 11:25
  • there are little corrections in code, try with updated code – Manoj Deswal Oct 24 '17 at 11:38
4

There are little corrections in your limiter.phtml code and it will be displayed , here is updated file.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
/**
 * Product list toolbar
 *
 * @var $block \Magento\Catalog\Block\Product\ProductList\Toolbar
 */
use Magento\Catalog\Model\Product\ProductList\Toolbar;
?>
<div class="field limiter">
    <label class="label" for="limiter">
        <span><?= /* @escapeNotVerified */ __('Show') ?></span>
    </label>
    <div class="control">
        <select id="limiter" data-role="limiter" class="limiter-options">
            <?php foreach ($block->getAvailableLimit() as $_key => $_limit): ?>
                <option value="<?= /* @escapeNotVerified */ $_key ?>"<?php if ($block->isLimitCurrent($_key)): ?>
                    selected="selected"<?php endif ?>>
                    <?= /* @escapeNotVerified */ $_limit ?>
                    <span class="limiter-text"><?= /* @escapeNotVerified */ __('per page') ?></span>
                </option>
            <?php endforeach; ?>


        </select>

    </div>

</div>

enter image description here

Keep your cache disabled or clean your cache .

Note: Tested on LUMA Theme

Let me know if any problem

  • no is not work, so is not display any changes in this files: pager.phtml or limiter.phtml – Robert Oct 24 '17 at 11:43
  • only need to edit limiter.phtml , try clearing your cache and deploying static files once – Manoj Deswal Oct 24 '17 at 11:46
  • great @Robert ! cheers :) – Manoj Deswal Oct 24 '17 at 11:48
  • can you tell me with something please? is there any way to change the click on limiter with hover state? – Robert Oct 24 '17 at 11:48
  • you want to make it show all options on hover state rather than clicking – Manoj Deswal Oct 24 '17 at 11:49
0

If you are trying to change to number of products then you do not need to edit any phtml file. There is an option in the backend at following path:

Store > Configuration > Catalog > Catalog > Storefront > Products per Page on Grid Allowed Values

Change the value of Products per Page on Grid Allowed Values according to your requirement.

Thanks.

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.