0

I'm using Magento 2 with a custom theme , and I'm trying to change the number of items per row in the catalog. Now I'm having 3 items per row , and I'm trying to get 4.. what's the right file to edit to change that , as I have already changed from the admin panel - configuration - catalog - Products per page on list allowed to 6,12,16,22,26 , but there are still 3..

5

You can find below css styles in [Magento Blank Theme directory]/Magento_Catalog/web/css/source/module/_listings.less line 290 - 295

.products-grid .product-item { width: 100%/3 }
.page-layout-1column .products-grid .product-item { width: 100%/3 }
.page-layout-3columns .products-grid .product-item { width: 100%/3 }
.page-products .products-grid .product-item { width: 100%/3 }
.page-products.page-layout-1column .products-grid .product-item { width: 100%/3 }
.page-products.page-layout-3columns .products-grid .product-item { width: 100%/3 }

So you can copy this file into your theme directory, then change those widths like below.

.products-grid .product-item { width: 100%/4 }
.page-layout-1column .products-grid .product-item { width: 100%/4 }
.page-layout-3columns .products-grid .product-item { width: 100%/4 }
.page-products .products-grid .product-item { width: 100%/4 }
.page-products.page-layout-1column .products-grid .product-item { width: 100%/4 }
.page-products.page-layout-3columns .products-grid .product-item { width: 100%/4 }
|improve this answer|||||
  • Hi @Dmitry , thank you for your time ! I just did so , cleared the cache and everything , but is still on 3 items per row.. any suggestion ? – alexcr May 28 '16 at 12:30
0

Changing the values in "Products per Page on Grid Allowed Values" does not change the number of products per row. It simply changes the options available in products per page drop down for pagination. Edit the CSS to change the number of products per row as was already stated in Dmitry's answer (Although he did not provide all the CSS that may need to be changed). If that didn't work there may be an issue with magento incorporating your CSS changes like not putting the custom CSS file in the correct folder or not clearing the pub/static and var/view_preprocessed folders.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.