Customizing Sort by drop down options in Magento in Listing Page

In Magento, let us say you want to make your sort by dropdown menu options in product listing page to add some custom options( like price low to high and vice versa). This is very basic functionality and it seems Magento’s by default only have 3 options Position, Price and Name and give a arrow image for ascending and descending. Below steps will help you to understand and add your own custom sort by option in magento in listing page. “Customizing sort by drop down options in Magento in Listing Page”

Step 1 – Go to below file

app/design/frontend/base/default/template/catalog/product/list/toolbar.phtml

if you are using some custom theme, this file can also be found at below path.

app/design/frontend/default/your_custom_theme/template/catalog/product/list/toolbar.phtml

 Step 2 – Search for below code

<fieldset class="sort-by">

        <label><?php echo $this->__('Sort by') ?></label>

        <select onchange="setLocation(this.value)">

        <?php foreach($this->getAvailableOrders() as $_key=>$_order): ?>

            <option value="<?php echo $this->getOrderUrl($_key, 'asc') ?>"<?php if($this->isOrderCurrent($_key)): ?> selected="selected"<?php endif; ?>>

                <?php echo $_order ?>

            </option>

        <?php endforeach; ?>

        </select>

        <?php if($this->getCurrentDirection() == 'desc'): ?>

            <a href="<?php echo $this->getOrderUrl(null, 'asc') ?>"><img src="<?php echo $this->getSkinUrl('images/sort_desc_arrow.gif') ?>" alt="<?php echo $this->__('Set Ascending Direction') ?>" class="v-middle" /></a>

        <?php else: ?>

            <a href="<?php echo $this->getOrderUrl(null, 'desc') ?>"><img src="<?php echo $this->getSkinUrl('images/sort_asc_arrow.gif') ?>" alt="<?php echo $this->__('Set Descending Direction') ?>" class="v-middle" /></a>

        <?php endif; ?>

    </fieldset>

Step 3 – Replace or use below code as per your requirement

<fieldset class="sort-by">

        <label><?php echo $this->__('Sort by') ?></label>

        <select onchange="setLocation(this.value)">

  <option value="<?php echo $this->getOrderUrl('entity_id', 'desc') ?>"<?php if($this->isOrderCurrent('entity_id') && $this->getCurrentDirection() == 'desc'): ?> selected="selected"<?php endif; ?>>

                New to Old

            </option>

            <option value="<?php echo $this->getOrderUrl('entity_id', 'asc') ?>"<?php if($this->isOrderCurrent('entity_id') && $this->getCurrentDirection() == 'asc'): ?> selected="selected"<?php endif; ?>>

                Old to New

            </option>

            <option value="<?php echo $this->getOrderUrl('position', 'asc') ?>"<?php if($this->isOrderCurrent('position') && $this->getCurrentDirection() == 'asc'): ?> selected="selected"<?php endif; ?>>

                Postion

            </option>

            <option value="<?php echo $this->getOrderUrl('price', 'asc') ?>"<?php if($this->isOrderCurrent('price') && $this->getCurrentDirection() == 'asc'): ?> selected="selected"<?php endif; ?>>

                Price Low to High

            </option>

            <option value="<?php echo $this->getOrderUrl('price', 'desc') ?>"<?php if($this->isOrderCurrent('price') && $this->getCurrentDirection() == 'desc'): ?> selected="selected"<?php endif; ?>>

                Price High to Low

            </option>

            <option value="<?php echo $this->getOrderUrl('name', 'asc') ?>"<?php if($this->isOrderCurrent('name') && $this->getCurrentDirection() == 'asc'): ?> selected="selected"<?php endif; ?>>

                By Name A-Z

            </option>

            <option value="<?php echo $this->getOrderUrl('name', 'desc') ?>"<?php if($this->isOrderCurrent('name') && $this->getCurrentDirection() == 'desc'): ?> selected="selected"<?php endif; ?>>

                By Name Z-A

            </option>

          

        </select>

    </fieldset>

Step 4 – Save file, clear cache and check again, you would have got new options added.

Note – If you want you can replace dropdown with custom html structure like to display anchor tag next to each other.

Hope this helps…Happy Coding!!!!