This is an example of what the grid view looks like in Storefront 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 thoughts on “How to convert WooCommerce Storefront list view to grid view on mobile

  1. 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

  2. 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?

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

  4. 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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.