More responsiveness for WooCommerce 2.1 default stylesheet

Written by Alexis Nominé on . Posted in WordPress

Following my article on how to add responsiveness to WooCommerce 2.0 default stylesheet, here is how to add more responsiveness to WooCommerce 2.1.

In this great new version, WooThemes developers decided to separate layout from the rest of the style. Which is good news because it's a lot easier to identify where css has to change to be responsive. What I like less is that responsive behavior they added is too limited: only one "breakpoint" around 768px, so it doesn't adapt that well to the available space on screen of the variety of devices (smartphones, phablets, tablets ...).

So let's update it with 4 breakpoints so the product grid grows from 1 to 4 products per line, with a bit of "mobile first" flavour.

If you want to get straight to the point, you can download the updated stylesheet here, upload it in your theme folder, and add this in your functions.php file:

After the break, the updated "woocommerce-layout.less" with some comments:

If you want IE8 to enjoy the power of media queries and not getting the "mobile" display, you can conditionnaly add Respond.js

Tags: , ,

Trackback from your site.

Comments (28)

  • Bruce

    |

    Real time saver! Thank you so much, it works perfectly:)

    Reply

  • Michael

    |

    The previous 2.1 fix you posted worked fine for my site. After upgrading to 2.1 of course, it broke. I attempted your updated fix and I am still having the lettering fall off the mobile page and running too far off screen.

    Is there something I am missing?

    Reply

    • Alexis Nominé

      |

      In which page is it happening? If you give me the url, I can have a look at it.
      It might just be a matter of font-size or margins related to the theme you’re using.

      Reply

      • Michael

        |

        Alexis, thanks for your response. I misplaced this thread. It happens on the cart page, you have to add a product first then proceed to check out, you will see the error there.

        http://www.nashvillepubcrawler.com/buy-tickets/

        Now, I removed all your coding so you can see the problem first hand.

        Reply

        • Alexis Nominé

          |

          This is not an issue with woocommerce, more with your theme.
          The font size is too big for small screens. You can add this kind of CSS to solve the problem:

          @media screen and (max-width:600px){
          .woocommerce table.shop_table th, .woocommerce-page table.shop_table th{
          font-size: 12px;
          }
          }

          Reply

  • Dario Zadro

    |

    Works beautifully! Thanks so much for saving me hours.

    Reply

  • Rob

    |

    Hi Alexis, have applied the functions changes and css/less, but still looks strange when shrunk to around 300px wide: http://themercerie.net/cart/

    Any ideas?
    Thanks

    Reply

    • Alexis Nominé

      |

      Hi Rob,

      It looks like there’s a rule in your css messing things up:
      If you remove this in style.css of your theme, line 923, it will start to look definitely better:

      /* Common Form Elements --------------------------------------------------*/
      input,
      textarea,

      Reply

  • Mark Thomson

    |

    Hi there,

    I’ve tried this code and it fixed my image issue, but I still cannot get the product descriptions to be under the product photos? It still pushes the page out to the right.
    I need it to display responsively for the product list as well as the individual product pages. Any fixes you could advise?

    Thanks.

    Reply

    • Alexis Nominé

      |

      Hi Mark,

      It looks like your theme is not “responsive” so it could be difficult to make it work properly on smartphones, even if woocommerce is responsive.

      a quick incomplete fix would be to add this to your style.css file:
      @media screen and(max-width: 950px){
      #content {
      width: auto;
      }
      ul.products.list li.product img {
      width: auto!important;
      float: none;
      }
      ul.products.list li.product h3, ul.products.list li.product div[itemprop="description"], ul.products.list li.product .price, ul.products.list li.product .gridlist-buttonwrap {
      width: auto;
      float: none;
      }
      }

      Hope it helps,
      Cheers

      Reply

  • Joana

    |

    Thanks Alexis! Awesome code!

    I still have problem with the cart page on this web: almidonresistente.com/carro

    I tried to add this:
    @media screen and (max-width:600px){
    .woocommerce table.shop_table th, .woocommerce-page table.shop_table th{
    font-size: 12px;
    }
    }

    But didn’t work. I’m using genesis framework with metro pro child theme and the only problem is that cart page don’t fit on mobile screens. Everything else is ok.

    Any suggestion?

    Thanks!

    Reply

      • Joana

        |

        Thank you very much Alexis! It’s just what I’m looking for. Works perfectly!
        Regards

        Reply

        • Alexis Nominé

          |

          Perfect !
          I’m going to use this solution as well for my clients.
          I just discovered it trying to answer your question 🙂

          Reply

  • Cassie

    |

    Thank you so much, woocommerce had gone weird on me and made everything huge. I had custom coded my page to make my single product page full width, coding sidebar display none & main content 100%. But unfortunately had to undo the custom to make your style sheet work. So I’m back to using a sidebar. Any recommendations how to make it full width & responsive?

    Otherwise I am very happy that it now works on mobiles. YAYYYY!!!

    Reply

    • Alexis Nominé

      |

      Hi Cassie,
      Happy to help 🙂
      Did you find a solution, I just had a look at you website and it seems to have no sidebar?
      Cheers,

      Reply

  • Hugo

    |

    .Alexis, I’am a beginner and I have a question. I copy the stylesheet CSS file into my child theme twenty-thirteen-child? And after that I copy the functions.php from twenty-thirteen tot my childtheme. The next step is that I copy your text from >php till } at the end of the file. The file then gives a syntaxisfault. What do I do wrong? Can you give me the solution. Thank you.

    Reply

  • Les

    |

    Hi,

    Everytime I download the stylesheet I keek getting a text file:

    woocommerce-layout.css.txt

    How do I use this? . . . Am I doing something wrong.

    Can anyone offer any advice . . . thanks.

    Les

    Reply

    • Alexis Nominé

      |

      You could rename the file once downloaded to remove “.txt” at the end and it should work.

      Reply

  • jap

    |

    The code is great on an Iphone. on a android the layout is not good.

    http://www.danpajo.com/speciaal-voor-jou

    On the frontpage the products are listed in one row vertical when i look on a desktop. Thus I tried to add the following code to my style.css and even tried the woocommerce-layout.css

    .woocommerce .products ul, .woocommerce ul.products, .woocommerce-page .products ul, .woocommerce-page ul.products {width:100%;}
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {width:21.5%;clear:none;}

    Then my frontpage is looking good on a desktop but looks very strange on an iphone..

    Can you please give me an advice how to solve this?

    jap

    Reply

    • Alexis Nominé

      |

      Which version of android are you using?

      Reply

  • Miguel

    |

    Hi Alexis, thank you for your work sincerely!

    Can I ask you for help? I was just wondering if the 2.1 stylesheet has been already updated for the 2.3.1 version…mainly because not all button images appears once the process is done

    Reply

    • Alexis Nominé

      |

      Hi Miguel,
      Thanks for your interest.
      I didn’t have time yet to update it. I’ll do it soon and keep you updated.

      Reply

  • Customizing Theme for WooCommerce – klmcw.com

    |

    […] a css/woocommerce-layout.css file from http://alexis.nomine.fr/en/blog/2014/02/21/bit-responsiveness-woocommerce-2-1-default-stylesheet/ (thanks to Nomine for their work!) – to add responsiveness to the WooCommerce design. Note […]

    Reply

Leave a comment