By default, the desktop view of the Storefront theme shows a grid of products, where each row has 4 products in it.
The mobile view, on the other hand, is a list view where each row only has 1 product. The mobile view is a bit more airy as well, which looks great, but causes a lot of scrolling effort to view all of the products.
To make it quicker and easier for users to browse through products, you could consider changing the list view to a grid view on mobile.
Let’s look at the code
I was able to make this change with just a bit of CSS, and support back to IE10. Not too shabby. Especially considering my friend’s website has only had one IE9 order this entire year.
The first selector (.products) says that we’re going to use flex to handle the layout. The second selector (ul.products:before, ul.products:after) is to address a flex-wrap bug in Safari. And the last selector (ul.products li.product) is what makes each product 50% of the width.
@media only screen and ( min-width: 320px ) and ( max-width: 767px ) {.products {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}ul.products:before,ul.products:after {width: 0 !important;}ul.products li.product {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;width: 50%;padding: 0 .5em;}}
12 responses to “How to convert WooCommerce Storefront list view to grid view on mobile”
Wasn’t able to change mine.. I added the code u sent to my customize in add additional css
And it said.. Am not allowed to edit this site
Thank you very much it is working for me 🙂
Thank you…sir it’s work for me
I have been looking for something like this and found it after so many days….thank you very very much
Thanks for this, I have applied this and it works, unfortunately my storefront theme has 2 rows for related produts so the first rwo displays 2 columns but the second row a single product. How can I make also the second rwo with 2 columns?
I have the same comment as Samuel.
the last product in the list (if items are odd number) it takes full width. How can we make it 50%?
Thank you so much. It seems its the only code that is working right. I’m amazed.
Finally found a solution! Thanks so much. I too have the same issue as Samuel and Humaid. When there’s an odd number of products, the odd number remains 100%. I’m still happy though and will use this fix.
It worked for me. Big thanks sir.
That’s great it working for me.
You are such a great person
Thank you very much.
samuel and humaid, try changing the flex-grow of the ul.products li.product {} to 0.35, it worked for me…cheers
Worked like a charm. Thank you very much!