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..
4
-
What is your custom theme's parent theme? luma or blank?– skynetchCommented May 27, 2016 at 16:38
-
My parent theme is Magento Blank !– alexcrCommented May 27, 2016 at 17:27
-
Above solution doesnt work in magento 2.3– Gaurav DawareCommented Jun 26, 2019 at 18:24
-
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review– Jarnail SCommented Jun 26, 2019 at 19:00
Add a comment
|
2 Answers
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 }
-
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 ?– alexcrCommented May 28, 2016 at 12:30
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.
