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.

Improve this question
8
  • Jimit could you please check my solution and confirm whether or not it is working for you. Thanks!
    – Muckee
    May 29, 2019 at 12:07
  • @JoshuaFlood yes, it's working.
    – Jimit Bhavsar
    May 29, 2019 at 12:43
  • Excellent. Can you please accept my answer?
    – Muckee
    May 29, 2019 at 13:15
  • 1
    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.
    – Muckee
    May 29, 2019 at 13:24
  • 1
    Ok. I didn't mean this one specifically, I just meant in general. Though, if you answer your own problem, it would help the community even more if you could answer it here and then you can accept your own answer, I think after 48 hours.
    – Muckee
    May 29, 2019 at 15:02

2 Answers 2

Reset to default
4

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.

Improve this answer
2
  • 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, 2019 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.
    – Muckee
    Apr 20, 2019 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)

Improve this answer
10
  • I have check above code with two different magento 2 setup , but it's not working.
    – Jimit Bhavsar
    Apr 21, 2017 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, 2017 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, 2017 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, 2017 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, 2017 at 11:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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