How To Display Your Products In A Grid Using The List View

Last week I posted an article on how to display product descriptions on the category page using a simple change in your store settings. Today, I will take that further and show you how to display the products in a grid when using the list view. This allows you to fit the product descriptions and the quantity input fields in a smaller space. You can also use this modification to have some categories display products in a list format, and others in a grid format. Your choice. So, let's get to it!

Instructions

1. Login to your control panel and navigate to Design > Themes > Edit HTML & CSS then open the category.html file.

2. Add the following code right before the </body> element:

   
   <script type="text/javascript">
   $(document).ready(function(){
   
   var $productList = $("ul.ProductList");
   
   if($productList.hasClass("List")) {
       $productList.removeClass("List");
       $(".ListView .ProductDetails").css("margin-left", "");
       $(".ListView .ProductPrice").after("<br>");
       $(".ProductRightCol").css({"float":"none","display":"block"});
   }  
   
   });
   
   </script>
   
   
   

3. Press the Save button in the top left corner.

How Does It Work?

The code verifies that list view is enabled by looking for the List class. If the class is there it modifies the styles and elements to display the products in a grid. Alternatively, you can use CSS instead of Javascript since most of the changes are style-based.

Troubleshooting

I added the code, but the products are still displaying in a list. Why?

It is possible that you have made changes to the panel used in generating the category product list. In that case, the best option is to revert the changes to the Panels/CategoryContent.html file. Make a backup of the file before reverting it!