Ajust 3 or 4 items per row

Hi Moraima,

To apply certain # of items per row, you would need to add custom CSS.

You can start by adding this code to the “Custom CSS” box on the Edit catalogue page:

.upcp-thumb-image-div,
.upcp-thumb-image-div a {
    width: 100%;
    height: auto;}

div.upcp-thumb-image-div img {
    max-width: 100%;}

Then, to target a specific category, add this code after:

#prod-cat-category-54 .upcp-thumb-item {
    margin: 0 1% 22px 1%!important;
    width: 23%;}

The ’54’ is the Category ID (which in this case belongs to ‘Camping’).
The width that is set here will arrange the Camping items as ‘4 per row’. To display 5 per row, just change the 23% to 18%.

Note: If you want to apply ‘4 per row’ to the WHOLE catalogue, then disregard the ‘#prod-cat-category-54…’ code and use this instead:

.upcp-thumb-item {
    margin: 0 1% 22px 1%!important;
    width: 23%;}