Number of products per row in opencart 1.5.x

Posted by Flo on 21 Jun 2014

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;
}


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

 
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;
}