How to Change Toolbar Limiter Dropdown To Links in Magento 2

The on-site experience of an online store depends on how each element is placed and designed. Even a small link or a dropdown can irritate a visitor and leave the store.

Hence, it is important for the Magento 2 store owners to work on minute details. As a part of it, here’s the programmatic solution to change toolbar limiter dropdown to links in Magento 2.

By default, it looks something like this:

And if you want to change it to this:

use the below solution:

Method to Change Toolbar Limiter Dropdown to Links in Magento 2:

Override limiter.phtml from vendor/magento/Module_Catalog/templates/product/list/toolbar/ to app/design/frontend/theme/child_theme/Magento_Catalog/templates/product/list/toolbar/limiter.phtml and replace the below code:

<select id="limiter" data-role="limiter" class="limiter-options">
            <?php foreach ($block->getAvailableLimit() as $_key => $_limit): ?>
                <option value="<?php /* @escapeNotVerified */ echo $_key ?>"<?php if ($block->isLimitCurrent($_key)): ?>
                    selected="selected"<?php endif ?>>
                    <?php /* @escapeNotVerified */ echo $_limit ?>
                </option>
            <?php endforeach; ?>
 </select>

with

<?php foreach ($block->getAvailableLimit() as $_key => $_limit): ?>
        <a data-role="limiter" href="#" data-value="<?php echo $_key ?>"
            <?php if ($block->isLimitCurrent($_key)): ?> class="selected"
            <?php endif ?>>
            <?php echo $_limit ?>
        </a>
<?php endforeach; ?>

That’s it.