Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #16716

    I apologize if this has been covered before, but I’d like to change the number of columns in the product grid to 2 instead of 1 when viewing on a smaller screen.

    It should be the layout as the “related products” section on the single product view.



    The related products are already shown in 2 columns when viewing on iphone or any other mobile devices with less than 468px screen width. This can be accomplished using Media Queries.




    Yes that’s why I was using the Related Products section as an example of how we’d like it to look.

    We want the products in the store view to also appear in two columns.

    I understand that this is done using Media Queries, but I was hoping for more specific instruction since I’m new to the concept.


    To clarify what I’m asking – I don’t know where, or how to make the change.

    I understand it conceptually but I’m looking for specifics.


    Does my question make sense? I’m surprised that this hasn’t been asked before, looking forward to your response!


    So in woocommerce-mod.css after:

    @media only screen and (max-width: 767px) {

    I deleted:

    #top .products .product {

    margin: 0 0 20px 0;

    width: 100%;


    And added:

    #top .products .product {

    margin: 0 4% 20px 0;

    width: 48%;


    #top .products .product:nth-child(even) {

    margin: 0 !important;


    #top .products .product:nth-child(odd) {

    margin: 0 4% 0 0 !important;


    Not quote there yet though, and can’t find what I’m missing. Little help?


    Ok, found it, needed to add:

    .products .product.first {

    clear: none;




    Glad that you solved the problem. Thread closed.



Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘changing product view on smaller screens from 1 to 2 columns’ is closed to new replies.