Magento: Moving the Toolbar to category/view.phtml

I was given a design to implement into Magento yesterday, and I began on the product pages today. I quickly realized that the standard toolbar placement wasn’t going to work due to the design. The only way to make it work was to move it from catalog/product/list.phtml to catalog/category/view.phtml.

After playing around with the two templates, and with catalog.xml, I realized that there was more going on behind the scenes that would not allow an easy move. There are two problems that exist. First, you can’t just move the blocks in catalog.xml to be nested under view.phtml instead of list.phtml. It won’t load as a child. Second, the product collection is not yet loaded when Magento renders category/view.phtml, therefore, the toolbar can’t work (because it requires a knowledge of the products that it’s loading to work).

Thanks to a good friend of mine, Vinai, we came up with a solution that works, and is VERY easy to implement. It just takes two easy steps:

Step One:

Remove the display of the toolbar from product/list.phtml. You probably don’t want the toolbar displaying twice above all the products. So, find the following code and comment it out:

<?php echo $this->getToolbarHtml() ?>

Step Two:

Add this code where you want the toolbar to be displayed in category/view.phtml:

$toolbar = $this->getChild('product_list')->getToolbarBlock();
echo $toolbar->toHtml();

What is this code doing? Well, the toolbar block is loaded as a child to the list.phtml template block. The first line is calling the toolbar block as a child of the product_list and storing it as $toolbar. On the second line, the $toolbar object is being fed the proper product collection, again called by the child of product_list. Then, you simply display the $toolbar object using it’s toHtml() method.

It’s not exactly one of those easy-to-figure-out kind of things, but – it is very easy to implement. So, hopefully you find this as useful as I have!

This entry was posted in Magento. Bookmark the permalink.

22 Responses to Magento: Moving the Toolbar to category/view.phtml

  1. Marcin says:

    Only this worked in my case, maybe someone will find it useful:
    $toolbar = Mage::app()->getLayout()->createBlock(‘catalog/product_list’)->getToolbarBlock();
    $toolbar->setCollection( $_productCollection );
    echo $toolbar->toHtml();

  2. JR Rum says:

    I added the line of code getChild(‘product_list’)->getToolbarBlock();
    echo $toolbar->toHtml();

    inside my view.phtml and im getting this error:
    Fatal error: Call to a member function getToolbarBlock() on a non-object in /domainname/magento/app/design/frontend/budo/disain/template/catalog/layer/view.phtml on line 42

    Im using latest magento ver.

  3. andre viana says:

    thank you my friend, i already serach this a lot and didnt find a solution. this is the first time that works! =D

  4. Great info worked like a charm. Thanks

  5. Sarlak says:

    Thank you so much ! And thanks to thomas sittig ! I spent hours on trying to move the toolbar from the content to one of the top level.

    As Thomas I had to navigate through the tree to reach the correct data. Eventually I did this :
    I declared the block in a reference to root () in the part that interested me () and I used a new template to display just the toolbar. Ending in :

    before_cw_main is the name of the block where I wanted to put my block

    Then I wrote this in toolbar_container.phtml, just to get a clear code in the view


    $content = $parent->getChild(‘content’);
    $categoryProducts = $content->getChild(‘category.products’);
    $productList = $categoryProducts->getChild(‘product_list’);
    $toolbar = $productList->getToolbarBlock();
    echo $toolbar->toHtml();

    With that, you can put this @#*%& toolbar wherever you want 😉

    Thank you again for posting your solutions guys !

  6. Syntax3rror says:



  7. heena says:


    Here the solution posted for the show toolbar on the catalog view page , But what i want is to show toolbar on the 3column.phtml after the breadcrumbs , I have tried to create object of the product listing class and tried to implement this solution , but didn’t work for me .. So any one here have any suggestion to implement this.

  8. Luis says:

    I just want to thank you. I was scratching my head on this and you really helped me.

  9. Mick says:

    Thanks for that, you saved me a lot of pain in what I was starting to realise wasn’t a straightforward task

  10. Josh says:

    Your awesome, thank you. I need to duplicate the toolbar at the bottom of the page, so there are 2 places to navigate from. One at the top of the page and one at the bottom of the page.

    Worked perfect!

  11. Thanks for this man! We have had the same problem!

  12. Matthew Ray says:

    I have a problem that I think is similar to this issue. I want to move just one section of the toolbar to the view.phtml file. The design I am creating for a client requires the pager element in a different section of the page. I have tried many different things to achieve this effect, to no avail. You have any thoughts?

  13. Awesome, was having a heck of a time moving around layout code and phtml code. Works great in

  14. Andrew Long says:

    Tried this on on magento and it didn’t work just came up with an error message saying that i was declairing sort by price twice. I deleted the line form the list page aswell so its not that. Any ideas?

    Any help would be appreciated

  15. voltrone says:

    it help me a lot , thanks

  16. Patrix says:

    it works perfecty!!!
    thank you!!!!!

  17. Twisted Rodriguez says:

    Oh, where the code?

    reference name=””
    block type=”catalog/category_view” name=”” template=”catalog/category/some-my-block.phtml”
    block type=”catalog/product_list” name=”product_list” template=”catalog/product/list.phtml”
    block type=”catalog/product_list_toolbar” name=”product_list_toolbar” template=”catalog/product/list/toolbar.phtml” /
    action method=”setToolbarBlockName”

  18. Twisted Rodriguez says:

    U save my ass and time, thx :)

    For fellows, who want toolbar

    1. Create some-my-block.phtml;
    2. Add there code from “STEP TWO”;
    3. Catalog.xml:


  19. Paaaaa says:

    Thank You very much. It helped me alot when i tried to display category image after top toolbar.

  20. thanks for this infos. it helped me very much after i tried a fucking lot of hours to reposition the toolbar.
    if anyone, who read this, are interested in frenchy’s problem: you have to go done from the block, where you are and where you wnat go go.
    in my case, i had to extract the toolbar form catalog/product/list.phtml to a main page template.
    so, after i tried to reposition it over the layout xml (catalog.xml) and this ends up with me smahing my head against a wall, i take the suggestion of this guy here and put the following code in my page template:

    $categoryProducts = $content->getChild(‘category.products’);
    $productList = $categoryProducts->getChild(‘product_list’);
    $toolbar = $productList->getToolbarBlock();
    echo $toolbar->toHtml();

    it’s not the best solution .. but it is one working. and thinking that i have a lot more days to do to implement a simple template into magento commerce, i will work with it ;).

  21. frenchy says:

    Thx for this important information, i try it and all is ok, great!

    But i have a question, how i can use the toolbar in a top level lick “root”

    I want to move the toolbar directly in column.html?