More responsiveness for WooCommerce 2.1 default stylesheet
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:
Tags: media queries, responsive, WooCommerce
Trackback from your site.
Comments (28)
A bit of responsiveness for WooCommerce 2.0 default stylesheet - Nomine Web Creations
| #
[…] : Updated version for WooCommerce 2.1 is here 05/10/2013 : Updated to stack address forms on checkout page 17/08/2013 : Updated the assets URLs […]
Reply
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
Alexis Nominé
| #
Hola Joana,
The problem is not related with your theme, but with the fact that woocommerce uses tables for the cart, which is not very flexible at small screen sizes.
You can have a look at this post for a workaround: http://www.jeremycarter.com.au/optimising-woocommerce-checkout-for-mobile/
Have a try and tell me if it works for you.
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
Alexis Nominé
| #
Sorry for the late answer. I’ve been really busy lately./woocommerce-layout.css )
What you have to do is:
1/ download this file : https://gist.githubusercontent.com/alexisnomine/9124124/raw/74e8df48ea11b3af97b64e7db59ca62c0bae1137/woocommerce-layout.css
2/ with a ftp client, copy it to your child theme folder ( /wp-content/themes/
3/ If you already have a file named “functions.php” in this folder, you can edit it and add this code at the end (except ‘https://gist.githubusercontent.com/alexisnomine/9124124/raw/functions.php
If there is no “functions.php” file, then you will have to create one and paste the code in it (including ‘
Reply
Claudio
| #
Hello Alexis, tried our code however cart page isn’t working as it should.
Please click this link and you’ll be redirected to cart so you can see what i mean.
http://www.s2w.net.br/follow/carrinho/?add-to-cart=953
Thanks.
Reply
Alexis Nominé
| #
You can have a look at the link I provided here to add responsiveness to the cart: https://alexis.nomine.fr/en/blog/2014/02/21/bit-responsiveness-woocommerce-2-1-default-stylesheet/#comment-3026
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 https://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