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.
Get Weekly Updates
Never miss Magento tips, tricks, tutorials, and news.
Thank you for subscribing.
Something went wrong.
2 comments On How to Change Toolbar Limiter Dropdown To Links in Magento 2
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.