You can change the number of products per row in the Grid view of the Search Results Widget only using the Custom CSS feature. It is possible to set from 1 to 6 products per row.
The number of products depends on the width of the product block, which is set in the #snize-search-results-grid-mode li.snize-product CSS selector.
To change the number of products per row, follow these steps:
- Go to Searchanise control panel > Search results widget section > Custom CSS tab.
- Enable the Use custom CSS option if it is disabled.
- Copy one of the CSS rules below and paste it into the field.
- Apply the changes.
That's all. You can check out how it looks in the storefront.
CSS rules
1 product per row
div.snize:not(.snize-mobile-design) #snize-search-results-grid-mode li.snize-product { width: 100% !important; min-width: auto; }
2 products per row
div.snize:not(.snize-mobile-design) #snize-search-results-grid-mode li.snize-product { width: 48% !important; min-width: auto; }
3 products per row
div.snize:not(.snize-mobile-design) #snize-search-results-grid-mode li.snize-product { width: 31.33% !important; min-width: auto; }
4 products per row
div.snize:not(.snize-mobile-design) #snize-search-results-grid-mode li.snize-product { width: 23% !important; min-width: auto; }
5 products per row
div.snize:not(.snize-mobile-design) #snize-search-results-grid-mode li.snize-product { width: 18% !important; min-width: auto; }
6 products per row
div.snize:not(.snize-mobile-design) #snize-search-results-grid-mode li.snize-product { width: 14% !important; min-width: auto; }