How to convert WooCommerce Storefront list view to grid view on mobile

This is an example of what the grid view looks like in Storefront on mobile

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”

Curtis

May 2, 2017 at 8:14 pm

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

Reply
Mahesh Raj

November 1, 2017 at 10:32 am

Thank you very much it is working for me 🙂

Reply
Bikash sha

January 26, 2018 at 6:17 am

Thank you…sir it’s work for me

Reply
Vishal

April 25, 2018 at 11:20 pm

I have been looking for something like this and found it after so many days….thank you very very much

Reply
Samuel

May 25, 2018 at 6:58 am

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?

Reply
Humaid

October 24, 2018 at 1:36 pm

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%?

Reply
Hyginus Ofoke

December 11, 2018 at 3:44 am

Thank you so much. It seems its the only code that is working right. I’m amazed.

Reply
Deb

December 16, 2018 at 8:38 pm

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.

Reply
Enyinnaya Ani

February 8, 2019 at 4:05 pm

It worked for me. Big thanks sir.

Reply
Olives

February 25, 2019 at 9:10 am

That’s great it working for me.
You are such a great person
Thank you very much.

Reply
Obinna

March 14, 2019 at 3:16 pm

samuel and humaid, try changing the flex-grow of the ul.products li.product {} to 0.35, it worked for me…cheers

Reply
René

October 12, 2020 at 12:27 pm

Worked like a charm. Thank you very much!

Reply