{"id":1030,"date":"2020-05-29T12:37:02","date_gmt":"2020-05-29T12:37:02","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2020\/05\/29\/change-toolbar-limiter-dropdown-to-links-in-magento-2\/"},"modified":"2025-07-21T15:52:23","modified_gmt":"2025-07-21T10:22:23","slug":"change-toolbar-limiter-dropdown-to-links-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/change-toolbar-limiter-dropdown-to-links-in-magento-2\/","title":{"rendered":"How to Change Toolbar Limiter Dropdown To Links in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hence, it is important for the Magento 2 store owners to work on minute details. As a part of it, here\u2019s the programmatic solution to&nbsp;<em><strong>change toolbar limiter dropdown to links in Magento 2<\/strong><\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By default, it looks something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/05\/default-1024x472.png\" alt=\"default.png\" class=\"wp-image-9091\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">And if you want to change it to this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2020\/05\/link-1024x466.png\" alt=\"\" class=\"wp-image-9092\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">use the below solution:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Change Toolbar Limiter Dropdown to Links in Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Override&nbsp;<em><strong>limiter.phtml<\/strong><\/em>&nbsp;from&nbsp;<strong>vendor\/magento\/Module_Catalog\/templates\/product\/list\/toolbar\/<\/strong>&nbsp;to&nbsp;<strong>app\/design\/frontend\/theme\/child_theme\/Magento_Catalog\/templates\/product\/list\/toolbar\/limiter.phtml<\/strong>&nbsp;and replace the below code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;select id=\"limiter\" data-role=\"limiter\" class=\"limiter-options\">\n            &lt;?php foreach ($block->getAvailableLimit() as $_key => $_limit): ?>\n                &lt;option value=\"&lt;?php \/* @escapeNotVerified *\/ echo $_key ?>\"&lt;?php if ($block->isLimitCurrent($_key)): ?>\n                    selected=\"selected\"&lt;?php endif ?>>\n                    &lt;?php \/* @escapeNotVerified *\/ echo $_limit ?>\n                &lt;\/option>\n            &lt;?php endforeach; ?>\n &lt;\/select><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">with<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php foreach ($block->getAvailableLimit() as $_key => $_limit): ?>\n        &lt;a data-role=\"limiter\" href=\"#\" data-value=\"&lt;?php echo $_key ?>\"\n            &lt;?php if ($block->isLimitCurrent($_key)): ?> class=\"selected\"\n            &lt;?php endif ?>>\n            &lt;?php echo $_limit ?>\n        &lt;\/a>\n&lt;?php endforeach; ?><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1030","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1030","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1030"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1030\/revisions"}],"predecessor-version":[{"id":18773,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1030\/revisions\/18773"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}