Removing List View fom OpenCart

Feb 19, 2014 code, OpenCart

How to remove list view or grid view from OpenCart

Having the ability to swap between a list view and grid view is pretty nice and makes a flexible accommodating user interface for the user. But personally I do not like the list view. You don’t really get much more information and it just makes you have to scroll more.

In this tutorial I am going to show you how to completely remove the list view from Open Cart. It is actually quite simple, and you just need to add one class and delete the javascript code that is doing the switch, and then remove the grid/list view text.

You need to edit all files that display list and grid view inside catalog>views>theme>YOUR THEME>product>files.tpl

After $content_bottom delete the javascript that handles the views. From the starting script tag to the ending script tag. You will not need the javascript anymore. Note that in search.tpl there is additional javascript code in the script tag, just delete the function display(view) part in that file.

<script>function display(view)...(whole bunch of code)....</script>

Next you need to add the grid class to the product div. Find the product-list div

<div class="product-list">

Add class product-grid

<div class="product-list product-grid"
That’s it you are done!
Now you just need to delete the text that displays list/grid view. Delete the whole div as you do not need it anymore. After <div class=”product-filter”> delete:
<div class="display"><b><?php echo $text_display; ?>
</b> <?php echo $text_list; ?> <b>/</b> 
<a onclick="display('grid');"><?php echo $text_grid; ?>

This method will also work with removing grid view in Opencart. You would just skip step 3, and not add the class product-grid. By default it is styled to list view.