5

I'm trying to change number of items per row in product listing page.

I want to set different items per row for differant categories from: "admin panel > category > design > layout update xml"

Magento 1, Like this : < action method="setColumnCount"> < count> 4 < /count>< /action>

Above code I want to use in magento 2.

  • Jimit could you please check my solution and confirm whether or not it is working for you. Thanks! – Joshua Flood May 29 at 12:07
  • @JoshuaFlood yes, it's working. – Jimit Bhavsar May 29 at 12:43
  • Excellent. Can you please accept my answer? – Joshua Flood May 29 at 13:15
  • i have accept ............... – Jimit Bhavsar May 29 at 13:20
  • Thanks! I noticed that most of your questions have answers but haven't been accepted. If any of them are working it'd be great if you could accept them. It helps the community to find solutions more easily.. and it also helps the reputation of the people who help you. – Joshua Flood May 29 at 13:24
3

I struggled with a similar problem. My aim was to display no more than 4 products per row, using a custom theme which inherits from the blank theme.

In order to edit columns for regular catalog pages, you must copy the following directory:

[install_dir]/vendor/magento/theme-frontend-blank/Magento_Catalog/web/css/source/module/_listings.less

to your theme directory:

[install_dir]/app/design/frontend/[vendor_name]/[theme_name]/Magento_Catalog/web/css/source/module/_listings.less

If you would like to edit the widget columns as well, then you copy the following:

[install_dir]/vendor/magento/theme-frontend-blank/Magento_Catalog/web/css/source/_widgets.less

to your theme directory:

[install_dir]/app/design/frontend/[vendor_name]/[theme_name]/Magento_Catalog/web/css/source/_widgets.less

and adjust styles accordingly.

Here is an example of the CSS I used to neatly display 4 columns per row:

.page-layout-1column .block.widget .products-grid .product-item {
    margin-left: calc(~'(100% - 5 * (100%/5)) / 4');
    width: 100%/4;

    &:nth-child(4n + 1) {
        margin-left: calc(~'(100% - 5 * (100%/5)) / 4');
    }

    &:nth-child(5n + 1) {
        margin-left: 0;
    }
}

I won't display the whole code, because you'll need to adjust it for your particular needs.

  • 2
    You suggestion is correct but not sure every them have same code or design so do according to your theme .less – Shiv Singh Apr 18 at 8:01
  • Yes I agree. Hence I specified that this is specific to the blank theme and should be adjusted to suit the person's individual needs. – Joshua Flood Apr 20 at 23:33
-3

You can show different number of item per category by using following code(make sure that you use reference block name correctly for list(setDefaultListPerPage) and grid view(setDefaultGridPerPage)):-

<referenceContainer name="content">
     <referenceBlock name="product_list_toolbar">
          <action method="setDefaultListPerPage">
                 <argument name="limit" xsi:type="string">4</argument>
          </action>
    </referenceBlock>
</referenceContainer>

Check the setting in admin panel "Products per Page on List Allowed Values" OR "Products per Page on Grid Allowed Values" on catalog configuration should that the limit value you are assigning to category.

Check out this url for more.(link)

  • I have check above code with two different magento 2 setup , but it's not working. – Jimit Bhavsar Apr 21 '17 at 10:38
  • Not sure why this is not working, i tried on Magento 2.1.5 and it works perfectly fine. Is it giving some error. or just not working – arushi Apr 21 '17 at 10:51
  • I'm try to update : <argument name="limit" xsi:type="string">2</argument>, it's not giving any error and showing default number of items per row. – Jimit Bhavsar Apr 21 '17 at 10:58
  • Also the limit value that you are adding should also be added in admin panel under configuration > catalog > catalog > storefront > Products per Page on List Allowed Values – arushi Apr 21 '17 at 10:59
  • I have update Products per Page on List Allowed Values = 2,4,6,8,10, but still not working. I think this setting will apply for all categories , i do not want to apply for all categories. – Jimit Bhavsar Apr 21 '17 at 11:13

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.