Latest Articles
So far this was never an issue, there were problems with uploading modules via the installer because of the ftp connection but you could allways install ocmods without any issue. However, some .. Read More
People had this issue so many times I thought I would write a bit about it. The  types of issues with opencart's 2.x modification system that I identified so far are: 1. Old Vqmod .. Read More
This small tutorial will show you how to manually add custom links to the default top menu in opencart. If you dont want to go trough all the hustle and would like to be able to completly customize.. Read More
To enable seo urls in opencart navigate in admin to system > settings , edit the store and on the server tab of the store settings you will find "Use SEO urls", set it to yes. So far e.. Read More
All Articles

Number of products per row in opencart 1.5.x

Many people ask about the setting on how many products are beeing displayed per row in opencart modules or category listings. Well there is no such setting, I mean there might be in some custom themes but now Im reffering strictly to the opencart default theme. The number of products displayed per row is influenced by the width of the individual product box which is set in the stylesheet.css of the default theme (catalog/view/theme/default/stylesheet/stylesheet.css).

Change the number of products per row for modules display (Like latest, Featured, Bestsellers): 

In stylesheet.css of the theme search for the block of code:

.box-product > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}
 
as you can see the width of the product block is 130px so if you want more or less products per row you have to increase or decrease the width in the above block.
However when the page you are displaying the products on has both left and right columns there is another block of code that determines the width of the product block, in that case you will have to edit the block width from the code:
 
#column-left + #column-right + #content .box-product > div {
width: 119px;
}

Change the number of products per row for category display grid (also applies to search, manufacturer and special pages): 

 
For this instance you will have to find in stylesheet.css the following block:
 
.product-grid > div {
width: 130px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 15px;
}
 
and change the width property as you want it to be. If there are both columns on the page (left and right) the width will be taken from the following block of code:
 
#column-left + #column-right + #content .product-grid > div {
width: 125px;
}
 
Posted by Flo

Related Articles

By default the opencart search only works for product name and if selected, it also searches in the product description. If you want the search to also work for the product code (model), here are the modifications you need to make in order for it to work. Edit the file catalog/model/catalog/product.php and 2 times you will find this code: foreach ($words as $word) { if (!empty($data['filter_description'])) { $implode[] = "LCASE(pd.name) LIKE '%" . $this->db->escape(utf8_strtolower($word)) . "%' OR LCASE(pd.description) LIKE '%"..
15 comments on this article - view comments
Even if this issue has been fixed for a while in opencart, some people stil seem to have problems with disabling the product count next to the category name in the opencart left category menu, on the top menu's dropdown and on the subcategories from within a category's page. In the most recent versions of opencart there is one simple setting to disable the product count in all those instaces, the setting can be found in admin > system > settings. Edit the main store, go to the option tab and the first setting below the products heading is category product count, set it to ..
2 comments on this article - view comments

6 Comments To "Number of products per row in opencart 1.5.x"

Larry On 26 Feb 2015
If there's an opportunity, can you update this for Opencart 2.x? Reply to this comment
Tissy On 07 Jul 2015
No, it is not. I checked. If someone could help how to do this in Ver 2.X, it would be wonderful! Thanks
Ian On 21 Jul 2014
Very good explain. Thanks a lot. Now , how to calculate the width and div if I wang to set 4 items per row and my image size is 130. Please give a hints. Reply to this comment
Flo On 21 Jul 2014
I dont really know the theme your using so youll just have to try different dimensions till you get the right one
Ian On 21 Jul 2014
Thanks again. And after i change the width, my site take 4,5 hours to response this changes, can you please tell me why? Reply to this comment
Flo On 21 Jul 2014
Im guessing you have cloudflare activated or a service like it that caches your site.

Write a comment

Your Name:


Enter the code in the box below:

Your Comment:
Note: HTML is not translated!