{"id":490,"date":"2019-07-03T12:00:17","date_gmt":"2019-07-03T12:00:17","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/07\/03\/add-magento-2-sort-by-price-for-low-to-high-high-to-low-options\/"},"modified":"2025-05-22T16:28:47","modified_gmt":"2025-05-22T10:58:47","slug":"add-magento-2-sort-by-price-for-low-to-high-high-to-low-options","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-magento-2-sort-by-price-for-low-to-high-high-to-low-options\/","title":{"rendered":"How to Add Magento 2 Sort by Price for Low to High &amp; High to Low Options"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The store design and its navigation must be in such a way that makes it easier for the shopper to find the exact required product and make the shopping process comfortable and enjoyable.&nbsp; Navigation can be made easier and hence improve the shopping experience by offering custom sorting options.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The default Magento 2 offers sorting by position, product name, and price, as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/07\/1_default-Magento-2-price-sorting.png\" alt=\"1_default Magento 2 price sorting\" class=\"wp-image-5909\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">However, for a full-fledged Magento 2 store, these options are not enough.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sometimes, people tend to have some specific budget for product purchase. A price-sensitive customer may save some clicks by starting with the cheapest products. On the other hand, customers who have a high standard for quality may quickly find their most desired products by sampling from high prices to low prices. To provide such feature in Magento 2 and serve both the type of price-sensitive customers, you can&nbsp;<em><strong>add Magento 2 sort by price for low to high &amp; high to low options&nbsp;<\/strong><\/em>as shown here:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2019\/07\/2_Custom-Price-Sorting-Option-.png\" alt=\"2_Custom Price Sorting Option\" class=\"wp-image-5911\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For doing so, follow the method given here.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Add Magento 2 Sort by Price for Low to High &amp; High to Low Options:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1. Create&nbsp;<strong>registration.php<\/strong>&nbsp;file in&nbsp;<em><strong><em><strong>app\\code\\[Vendor]\\[Namespace]\\<\/strong><\/em><\/strong><\/em><\/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\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n'[Vendor]_[Namespace]',\n    __DIR__\n);<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">2. Create&nbsp;<strong>module.xml<\/strong>&nbsp;file in&nbsp;<em><strong><em><strong><em><strong>app\\code\\[Vendor]\\[Namespace]\\etc<\/strong><\/em><\/strong><\/em><\/strong><\/em><\/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;?xml version=\"1.0\"?>\n&lt;config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n    &lt;module name=\"[Vendor]_[Namespace]\" setup_version=\"1.0.0\"\/>\n&lt;\/config><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">3. Create&nbsp;<strong>di.xml<\/strong>&nbsp;file in&nbsp;<em><strong><em><strong>app\\code\\[Vendor]\\[Namespace]\\etc<\/strong><\/em><\/strong><\/em><\/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;?xml version=\"1.0\"?>\n&lt;config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\">\n    &lt;type name=\"Magento\\Catalog\\Block\\Product\\ProductList\\Toolbar\">\n        &lt;plugin name=\"custom_custom_block_toolbar\" type=\"[Vendor]\\[Namespace]\\Plugin\\Catalog\\Block\\Toolbar\"\/>\n    &lt;\/type>\n    &lt;type name=\"Magento\\Catalog\\Model\\Config\">\n        &lt;plugin name=\"custom_catalog_model_config\" type=\"[Vendor]\\[Namespace]\\Plugin\\Catalog\\Model\\Config\"\/>\n    &lt;\/type>\n&lt;\/config><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">4. Create&nbsp;<strong>Toolbar.php<\/strong>&nbsp;file in&nbsp;<em><strong><em><strong>app\\code\\[Vendor]\\[Namespace]\\Plugin\\Catalog\\Block<\/strong><\/em><\/strong><\/em><\/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\nnamespace [Vendor]\\[namespace]\\Plugin\\Catalog\\Block;\nclass Toolbar\n{\n    public function aroundSetCollection(\\Magento\\Catalog\\Block\\Product\\ProductList\\Toolbar $subject, \n    \\Closure $proceed, $collection) \n    {\n        $currentOrder = $subject->getCurrentOrder();\n        $result = $proceed($collection);\n        if($currentOrder)\n        {\n            if($currentOrder == 'high_to_low')\n            {\n                $subject->getCollection()->setOrder('price', 'desc');\n            } \n            elseif ($currentOrder == 'low_to_high')\n            {\n                $subject->getCollection()->setOrder('price', 'asc');\n            }\n        }\n        else \n        {\n            $subject->getCollection()->getSelect()->reset('order');\n            $subject->getCollection()->setOrder('price', 'asc');\n        }\n        return $result;\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">5. Create&nbsp;<strong>Config.php<\/strong>&nbsp;file in&nbsp;<em><strong><em><strong>app\\code\\[Vendor]\\[Namespace]\\Plugin\\Catalog\\Model<\/strong><\/em><\/strong><\/em><\/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\n \nnamespace [Vendor]\\[namespace]\\Plugin\\Catalog\\Model;\n \nclass Config\n{\n    public function afterGetAttributeUsedForSortByArray(\\Magento\\Catalog\\Model\\Config $catalogConfig, $options)\n    {\n        $options['low_to_high'] = __('Price - Low To High');\n        $options['high_to_low'] = __('Price - High To Low');\n        return $options;\n    }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">It is safe to say that sorting and navigation are important elements of the Magento 2 store\u2019s design. The above method is just right to improve the sorting and offer options to sort the products by price for low to high &amp; high to low.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The store design and its navigation must be in such a way that makes it easier for the shopper to find the exact required product&#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-490","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/490","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=490"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/490\/revisions"}],"predecessor-version":[{"id":15358,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/490\/revisions\/15358"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}