Hi @msimplay
Thank you for explaining what you’d like to achieve here and sharing an example site. That helps us understand your needs a bit better.
The thing here is that there isn’t a built-in setting in WooCommerce to set a different number of product columns for mobile versus desktop on category pages. The column count comes from your theme or the block you’re using to display products, and most themes either keep the same column count across screen sizes or collapse to a single column on mobile.
Custom CSS can sometimes be used to force a 2-column layout on mobile. This isn’t something our support team can build or troubleshoot for you, since the right CSS depends heavily on your specific theme and how your category pages are set up, and results can vary or conflict with existing styles. If you’re comfortable experimenting, you’re welcome to try adding custom CSS through Appearance → Customize → Additional CSS (https://wordpress.org/support/article/custom-css/) to see if it gets you the layout you want.
If you’d like this built out properly and tested against your theme, a developer on Codeable (https://codeable.io) would be a good resource for that.
I hope that helps point you in the right direction. You’re welcome to reach out if you have further questions.
Hi this article doesn’t exist
https://wordpress.org/support/article/custom-css/
But I found a way around it with this css
@media only screen and (max-width: 767px) {
body.woocommerce ul.products {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
}
body.woocommerce ul.products li.product {
width: 48% !important;
margin-left: 0 !important;
margin-right: 0 !important;
clear: none !important;
}
}
Hi @msimplay!
Thanks for pointing that out, and we’re glad you found a CSS workaround that resolves the issue on your site.
We appreciate you sharing the CSS here as well, as it may be useful to other merchants experiencing the same layout issue. We’ll also keep in mind that the referenced WordPress article is no longer available.
Thanks again for sharing your solution with the community!
Thanks @shahzeenfarooq you have been very helpful
Hi @msimplay!
You’re very welcome! I’m glad I could help.
If you have any further questions or need assistance with anything else, please feel free to start a new support thread, and the team will be happy to help.
