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:
|
1 2 3 4 5 6 7 8 |
<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
|
1 2 3 4 5 6 7 |
<?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.
Any doubts in the solution can be mentioned in the Comments section below. I’d be happy to help you out.
4 Comments
Your blog proved to be an absolute gem! It gave me valuable insights and made the seemingly complex a breeze of understanding. Thanks for making learning so enjoyable and enlightening.
Hey Tarhib
Thank You for the Appreciation!
Not working, the url is empty. :/
Hello Eyad,
I am not having such issue. You may have made a mistake while overriding child theme or there may be some mistake while replacing the code.
Thank you.