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.
