Category pages: Change 3-column product grid layout to 2 columns

Hello there,
Ruby from Ecwid by Lightspeed Support Team is here. Thanks for reaching out to us!

If I get it right, you’d like to show your products in 2 columns. Below I provide you with guides on how to do it.

If you are using the Gutenberg editor in WordPress:

1. Open the store page in your WordPress editor, here’s a screenshot of what it should look like: https://ecwid.d.pr/cosm1H

2. Switch from the Visual Editor to the Code Editor. You will see a shortcode similar to this one, a screenshot: https://ecwid.d.pr/zMF7MZ

3. After the product browser value, add the following one to the shortcode:
grid=”30,2″.

30 here means 30 products per page, 2 – two columns.

4. Switch from the Code Editor back to the Visual Editor. You may get an error This block contains unexpected or invalid content. Ignore it.

5. Convert the block from Gutenberg format to classic. In the error message click three dots and select Convert to Classic Block, a screenshot: https://ecwid.d.pr/kIqUFw

6. The shop block will now have a classic appearance. Make sure to save the changes.

If you are using the Classic editor in WordPress:

1. Open the store page in your WordPress editor, here’s a screenshot: https://ecwid.d.pr/SAio8S

2. Switch from the Visual Editor to the Code Editor. You will see a code similar to this one on the following screenshot: https://ecwid.d.pr/gvJSyC

3. Change the grid=”30,2″ parameter.

30 here means 30 products per page, 2 – two columns.

4. Check the page preview and save the changes if they are ok.

Hope this info helps! Feel free to get back to us with any other questions.

Hello,

thanks for the detailed reply.

I made the changes as shown but there is no change in the display of the product thumbnails.

My Category tree looks like
[Root]
– [category 1]
– [sub-category 1]

I am in [sub-category 1] were the product grid displays in 3 columns – and which I like to change to a 2-column grid layout.

Looking at the code with Chrome Inspector if I change the data-cols parameter in:

<div class=”grid__products grid__products–classic grid__products–layout-center grid__products–small-items grid__products–aspect-ratio-1333″ data-items=”6″ data-cols=”3″ style=”max-width: 10000px;”>

from:
data-cols=”3″
to:
data-cols=”2″

the columns change to a 2-column layout as intended so it looks like the data-cols parameter controls the number of columns in the grid.

I could also change to a 2-column display via CSS by setting:

.grid__products .grid-product {
width: 50% !important;
}

But I would prefer a programmatical approach via shortcode, etc… since I am not sure if my CSS workaround causes issues with responsive display or pagination down the road.

Any help would be greatly appreciated – thanks in advance!

Hello,

Thank you for your reply.

What is the Editor you are using? Can you please send a screenshot of the code where you tried to change the grid as per our instructions?

If possible, it will be great if you send us a screencast of how you try to apply the changes. This will help a lot to understand what could be the issue and how to resolve it. Thanks!

Hi Ruby,

thank you very much for your message and following up.

Well, I entered the shortcode exactly as instructed [screenshot store page] but the product grid does not change and still displays in 3 columns. [screenshot frontend – product grid].

Could you let me know where the issue might be?
Thanks in advance and I am looking forward to hearing from you.

Hi there,
Sorry we kept you waiting so long for our reply.

Can you please specify, if you’ve added the code on your screenshot manually? As I can see, you’re using Classic WP editor, which means that the code should look like this, a screenshot: https://ecwid.d.pr/gvJSyC

The thing is, that changing data coals in the code alone won’t help, as it should also contain other information, such as category view, number of items on the pagem, etc.

Hello,

thanks for the reply – this solution works on your store demo but not for my store with a subscription.

Any ideas what might be the cause?

Hi there,
Sorry we kept you waiting so long for our reply.

After consulting with our developers, it appears that the grid parameter in shortcode identifies the number of products per page rather than the number of products in rows and columns. In fact, Ecwid fits the products in one row as many as possible, and the number of columns depends on it. Sorry for not letting you know in the first place.

Taking those facts into account, you can change the number of products per row with the CSS code you mentioned yourself above:

.grid__products .grid-product {
width: 50% !important;
}

The code will work correctly on all screen sizes and won’t affect the store responsiveness or pagination.

Hope this info helps! Feel free to get back to us with any other questions.

Hello,

thanks for the reply – glad to hear I was on the right track with my solution.

Also, thanks for the reliable support – it is always good to know questions are followed up and answered no matter how long it takes!

Thanks again…