How to Add Magento 2 Sort by Price for Low to High & High to Low Options

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.  Navigation can be made easier and hence improve the shopping experience by offering custom sorting options.

The default Magento 2 offers sorting by position, product name, and price, as shown below:

However, for a full-fledged Magento 2 store, these options are not enough.

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 add Magento 2 sort by price for low to high & high to low options as shown here:

For doing so, follow the method given here.

Method to Add Magento 2 Sort by Price for Low to High & High to Low Options:

1. Create registration.php file in app\code\[Vendor]\[Namespace]\

<?php
\Magento\Framework\Component\ComponentRegistrar::register(\Magento\Framework\Component\ComponentRegistrar::MODULE,
'[Vendor]_[Namespace]',
    __DIR__
);

2. Create module.xml file in app\code\[Vendor]\[Namespace]\etc

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="[Vendor]_[Namespace]" setup_version="1.0.0"/>
</config>

3. Create di.xml file in app\code\[Vendor]\[Namespace]\etc

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Block\Product\ProductList\Toolbar">
        <plugin name="custom_custom_block_toolbar" type="[Vendor]\[Namespace]\Plugin\Catalog\Block\Toolbar"/>
    </type>
    <type name="Magento\Catalog\Model\Config">
        <plugin name="custom_catalog_model_config" type="[Vendor]\[Namespace]\Plugin\Catalog\Model\Config"/>
    </type>
</config>

4. Create Toolbar.php file in app\code\[Vendor]\[Namespace]\Plugin\Catalog\Block

<?php
namespace [Vendor]\[namespace]\Plugin\Catalog\Block;
class Toolbar
{
    public function aroundSetCollection(\Magento\Catalog\Block\Product\ProductList\Toolbar $subject, 
    \Closure $proceed, $collection) 
    {
        $currentOrder = $subject->getCurrentOrder();
        $result = $proceed($collection);
        if($currentOrder)
        {
            if($currentOrder == 'high_to_low')
            {
                $subject->getCollection()->setOrder('price', 'desc');
            } 
            elseif ($currentOrder == 'low_to_high')
            {
                $subject->getCollection()->setOrder('price', 'asc');
            }
        }
        else 
        {
            $subject->getCollection()->getSelect()->reset('order');
            $subject->getCollection()->setOrder('price', 'asc');
        }
        return $result;
    }
}

5. Create Config.php file in app\code\[Vendor]\[Namespace]\Plugin\Catalog\Model

<?php
 
namespace [Vendor]\[namespace]\Plugin\Catalog\Model;
 
class Config
{
    public function afterGetAttributeUsedForSortByArray(\Magento\Catalog\Model\Config $catalogConfig, $options)
    {
        $options['low_to_high'] = __('Price - Low To High');
        $options['high_to_low'] = __('Price - High To Low');
        return $options;
    }
}

It is safe to say that sorting and navigation are important elements of the Magento 2 store’s design. The above method is just right to improve the sorting and offer options to sort the products by price for low to high & high to low.

Thank you.