Hi guys!
Sorry, it took me so long to publish the code.
This change turned to be really easy one and in order to show 4 products on product lists, you need to specify the following CSS code in the System settings > Look and feel > Custom CSS section in you admin area:
Code:
ul.products-grid.grid-list li.product-cell.box-product {
width: 25%;
}
ul.products-grid.grid-list li.product-cell:nth-child(2n) + li.product-cell{
clear: none;
}
ul.products-grid.grid-list li.product-cell:nth-child(3n) + li.product-cell{
clear: none;
}
ul.products-grid.grid-list li.product-cell:nth-child(4n) + li.product-cell{
clear: none;
}
If you need to show 5 products then you need to replace this piece of code:
Code:
ul.products-grid.grid-list li.product-cell.box-product {
width: 25%;
}
with the next one:
Code:
ul.products-grid.grid-list li.product-cell.box-product {
width: 20%;
}
Obviously, you are just changing the percentage that must belong to the product's box width.
Other lines:
Code:
ul.products-grid.grid-list li.product-cell:nth-child(2n) + li.product-cell{
clear: none;
}
ul.products-grid.grid-list li.product-cell:nth-child(3n) + li.product-cell{
clear: none;
}
ul.products-grid.grid-list li.product-cell:nth-child(4n) + li.product-cell{
clear: none;
}
are needed for disabling hard-coded rules that each 4th, 7th and so on product must start with new line.
If there is any questions, please let me know.
Tony.