Magento 2 - Add 'per page' text inside option tag

Question

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

<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?

Answer 1

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>

Keep your cache disabled or clean your cache .

Note: Tested on LUMA Theme

Let me know if any problem

Answer 2

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.

Answer 3

I realise this is an old question but I assume you don't want the 'Per page' text to be rendered inside the dropdown options also. This can be achieved with the following code inside limiter.phtml 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 ?>>
                    <?php if ($block->isLimitCurrent($_key)): ?><span class="limiter-text"><?= /* @escapeNotVerified */ __('Per Page: ') ?></span><?php endif ?>
                    <?= /* @escapeNotVerified */ $_limit ?>
                </option>
            <?php endforeach; ?>
        </select>
    </div>
</div>

The path for this file is: vendor/magento/module-catalog/view/frontend/templates/product/list/toolbar/limiter.phtml

But you will want to over-ride this file inside your frontend theme to make the changes. Copy the file and place it here:

app/design/frontend/vendor/themename/Magento_Catalog/templates/product/list/toolbar/limiter.phtml