Display Sort by option on Top and Pagination at bottom

Question

On my product listing page, I need to change the display of Toolbar and Pager.

On top, I want to display Sort by option while on bottom I need to display Pagination

How can I achieve this ?

Please Guide.

Thanks.

Answer 1

One way of solving your issue is by hiding and showing toolbar HTML elements

For top toolbar your CSS should look like the following:

.toolbar .pager {
    display: none;
}

For bottom toolbar your CSS should look like the following:

.toolbar-bottom .toolbar .pager {
    display: block;
}

.toolbar-bottom .toolbar .sorter {
    display: none;
}

---

Another solution is to create a new toolbar template file for bottom and keep pager code and remove sort code and then call toolbar bottom template in product listing. Follow the following steps to accomplish this solution:

• Copy toolbar.phtml from app/design/frontend/base/default/template/catalog/product/list/toolbar.phtml to your custom theme template app/design/frontend/custom_package/custom_template/product/list/toolbar.phtml

• Make a copy of toolbar.phtml and name it toolbar-bottom.phtml

• Edit toolbar.phtml and remove pager code

• Edit toolbar-bottom.phtml and remove sort code

• Copy list.phtml from app/design/frontend/base/default/template/catalog/product/list.phtml to app/design/frontend/custom_package/custom_template/catalog/product/list.phtml

• Edit list.phtml and replace the following code:

Existing code:

<div class="toolbar-bottom">
    <?php echo $this->getToolbarHtml() ?>
</div>

With this code:

<div class="toolbar-bottom">
    <?php echo $this->getToolbarBlock()->setTemplate('catalog/product/list/toolbar-bottom.phtml')->toHtml() ?>
</div>