2 products per row in the shop

[12ga]

I’m building a webshop in Pro, and i have some layout issue i can’t solve on the mobile.
For standing and laying down mobile devices, i want to webshop page to show 2 products per row, but i cant find anywhere to change this.

At the moment it looks like this:

I want it to look like this:

Where can i change this?

[tristup]

Hi @12ga,

Thanks for reaching out.
You can set the Columns from the Theme Options > WooCommerce > Columns as shown in the given screenshot.

Hope it helps.
Thanks

[12ga]

That changes for all devices…
I want it to show 4 on tablets and computers, but 2 instead of 1 on mobile.

[tristup]

Hi @12ga,

In that case, you need to add some custom CSS code as explained in the following thread on a similar topic.

Two columns on woocommerce product page not working anymore

I have this code on my theme options css, and also in Appearence - Themes - Customise - Additional CSS. However it isn’t working anymore, and now it shows only one column in mobile view when it used two show two columns. It previously worked fine so just wondering what is the issue. Site in question https://www.gopala.com/ @media screen and (max-width: 480px) { .woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, …

Please remember that the code provided in the reference thread will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks