A bit of responsiveness for WooCommerce 2.0 default stylesheet
WooTheme folks are making one of the best eCommerce plugins for WordPress: WooCommerce. Their last themes - like SuperStore - are using their own responsive stylesheet for WooCommerce. However, the default stylesheet applied when using another theme (say TwentyTwelve) could use some improvement to be fully responsive.
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:
add_action( 'wp_enqueue_scripts', 'change_woo_styles', 99 );
function change_woo_styles() {
wp_dequeue_style( 'woocommerce_frontend_styles' );
wp_enqueue_style( 'woocommerce_responsive_frontend_styles', get_stylesheet_directory_uri()."/woocommerce.css" );
}
More details explaining the changes I made after the break.
Let's edit the default stylesheet in /woocommerce/assets/css/woocommerce.less :
No, they use a CSS preprocessor called LESS, that makes life of web developers a lot easier, but needs to be compiled into plain CSS before being sent to your browser. I will not enter in the details of using it, because there are already a lot of great tutorials covering this.
We want the product image to be on top of the product summary on small screens, so let's remove a few bits:
/* =Product Page
-------------------------------------------------------------- */
div.product, #content div.product {
[...]
/* Product image and thumbnail */
div.images {
- float:left;
- width: 48%;
margin-bottom: 2em;
[...]
/* Summary div (contains title, price etc) */
div.summary {
- float: right;
- width: 48%;
margin-bottom: 2em;
}Then, we also want the lists of products to be stacked on small screens:
/* Product loops */
[...]
ul.products {
li.product {
- float:left;
- margin: 0 3.8% 2.992em 0;
+ margin: 0 0 2.992em 0;
padding: 0;
position: relative;
- width: 22.05%;
margin-left: 0;
[...]
}
- li.first {
- clear:both;
- }
- li.last {
- margin-right: 0;
- }
}Related and upsells products (on a single product page) will inherit this behavior by removing this entire block:
/* Product loops */
[...]
- .related, .upsells.products {
- .clearfix();
- ul.products, ul {
- float:none;
- li.product {
- width: 48%;
- img {
- width: 100%;
- height:auto;
- }
- }
- }
- }
We also want the shipping address and billing address forms to stack on the checkout page:
- .col2-set {
- .clearfix;
- width: 100%;
- .col-1 {
- float:left;
- width: 48%;
- }
- .col-2 {
- float: right;
- width: 48%;
- }
- }Now, let's display two products per row when the screen becomes bigger:
+@media only screen and (min-width: 480px) {
+ .woocommerce, .woocommerce-page {
+ // 2 products/row
+ ul.products {
+ li.product {
+ width:48%;
+ float: left;
+ &:nth-child(2n) { // last element of the line
+ float: right;
+ }
+ &:nth-child(2n+1) { // first element of the line
+ clear: both;
+ }
+ }
+ }
+ }
+}Now we have room enough to display the product description and image side by side, same thing for the address forms on checkout page. And we can also display 3 products per row on listings:
+@media only screen and (min-width: 600px) {
+ .woocommerce, .woocommerce-page {
+ // side by side
+ .col2-set {
+ .clearfix;
+ width: 100%;
+ .col-1 {
+ float:left;
+ width: 48%;
+ }
+ .col-2 {
+ float: right;
+ width: 48%;
+ }
+ }
+ div.product, #content div.product {
+ div.images {
+ float:left;
+ width: 48%;
+ }
+ div.summary {
+ float: right;
+ width: 48%;
+ }
+ }
+ // 3 products/row
+ ul.products {
+ li.product {
+ margin-right: 1.8%;
+ width: 32.05%;
+ &:nth-child(2n) { // reset float
+ float: left;
+ }
+ &:nth-child(2n+1) { //reset clear
+ clear: none;
+ }
+ &:nth-child(3n) { // last element of the line
+ margin-right: 0;
+ }
+ &:nth-child(3n+1) { // first element of the line
+ clear: both;
+ }
+ }
+ }
+ }
+}And finally, on even bigger screens, we can display 4 products per row by adding the rules we stripped at the beginning:
+@media only screen and (min-width: 960px) {
+ .woocommerce, .woocommerce-page {
+ // 4 products/row
+ ul.products {
+ li.product {
+ margin-right: 3.8%;
+ width: 22.05%;
+ &:nth-child(3n) { // reset margin
+ margin-right: 3.8%;
+ }
+ &:nth-child(3n+1) { // reset clear
+ clear: none;
+ }
+ &.first {
+ clear: both;
+ }
+ &.last {
+ margin-right:0;
+ }
+ }
+ }
+ }
+ }After compiling (online or with your preferred software) and enqueuing this new stylesheet, our WooCommerce is now truly responsive!
Tags: responsive, WooCommerce
Trackback from your site.
Comments (43)
Nich
| #
Hello there, your trick solved my problem. Thank you.
But one hurdle I’m still trying to solve is the number of products per colom for the mobile view (600px); you stated that the styling will produce a 3 items / column. It works.
But the next item is shown as a fourth product, not as the next 1-of-3 for the next row.
(it looks like this)
[product 1] [product 2] [product 3]
[product 4]
[product 5] [product 6] [product 7]
[product 8]
I check the styling, and I don’t know why the fourth item ended up with child(2n) attributes.
Can you point me to the right direction, here?
Thank you in advance.
Reply
Alexis Nominé
| #
You’re absolutely right. Thanks for pointing it out.
I’ll post an update soon to fix that 🙂
Cheers
Reply
Alexis Nominé
| #
OK, I got messed with nth-child css selectors.
Should be fixed now 🙂
Reply
Nich
| #
Thank you, you solved my problem.
It works!
Reply
Tushar
| #
Thanks a ton Alexis.
It was very helpful indeed.
Cheers 🙂
Reply
Alan
| #
I am using the free woocommerce theme wootique. I have done everything as you described and there is no change to my site. I have checked on an Android phone, an iPad 2 and tried resizing my desktop browser. Is it because my theme is not responsive that it’s not working? What can I do to make my site responsive?
Reply
Alexis Nominé
| #
Hi Alan,
From what I see, Wootique was developed in 2011 and is not “responsive” because of its age.
It’s not an easy job to make it responsive and can cost a lot of time/money.
The best solution, if you want to stay on a free wootheme theme, is to use Mystile, which already include a responsive stylesheet for woocommerce as well, so you won’t even need my custom one 🙂
Cheers,
Reply
Alan
| #
Thanks Alexis. I’ll be sure to check out Mystile. 🙂
Reply
Cornelius S
| #
Hello, great! But problem when I use your css download and function, all rating stars display ‘SSSSS’… can’t figure out why… any thoughts? (all else is fine, responsive is great!). thank you!
Reply
Alexis Nominé
| #
Hello Cornelius,
Thanks for pointing out the problem. I forgot to update the links to the assets (fonts, images).
Please download the file again and re-upload it to your theme folder. It should work better now.
Cheers
Reply
Cornelius S
| #
Yes it is fixed! Ok Great help and thank you again.
Reply
James
| #
Just wanted to say thanks for providing the fix to make woocommerce more responsive. It’s worked really well for me. It’s also a shame that on the checkout page the two columns (shipping address & billing address) don’t also display better on smaller screens. Do you think something like this is also possible in your new stylesheet? Thanks!
Reply
Alexis Nominé
| #
Hi James,
Thanks for pointing this out. I updated the stylesheet so the forms should stack now on the checkout page.
You can download it and tell me if it works 🙂
Cheers
Reply
James Wilson
| #
Thanks ever so much Alexis, that’s certainly better. It’s really useful to use the stylesheet so thanks very much for your help with this. There’s also a small issue with the ‘Cart’ and ‘Checkout’ pages because the tables don’t reformat on mobile devices but you have obviously done enough already.
Once again thanks very much for you help. Also, apologies on the delayed response as I didn’t know you had replied. I will certainly check back more often 🙂
Thanks, James
Reply
Patrick Allmond
| #
Has this been tested with a Genesis or any of their child themes?
Reply
Alexis Nominé
| #
No, but it should work. Are you having troubles with it?
Reply
Kelly
| #
You ROCK! Thanks for sharing. 😉
Reply
Larry
| #
I second that Kelly. I havent even tried it yet but I’m looking forward to giving it a go. Thanks so much 🙂
Reply
Alexis Nominé
| #
Luckily, my work here will be useless soon as WooCommerce 2.1 will be responsive! See announcement from WooThemes: WooCommerce-2.1-Peppy-Penguin
Reply
thashi
| #
I’m using Mystile responsive them. i want to remove the responsivenes from my site. How to achieve it?
Reply
Alexis Nominé
| #
You’d probably have to edit the file named header.php in your theme directory and remove the line saying
But I’d advise you not to remove responsiveness because a lot of people is browsing the web with mobile and tablet and it’s actually a good point to have this feature in your theme. Is there a particular issue you’re having that makes you want to do that?
Reply
Djoey
| #
Thank you for the great stylesheet.
Is there a way to use colors I’ve declared in the configuration section?
After using your stylesheet I’ve got other colors.
Thanks in advance!
Reply
Alexis Nominé
| #
Hi Djoey,
Give me a link to your site so I can have a look and see what’s wrong with the css.
Anyway, a new version of woocommerce with a responsive stylesheet already integrated is due in 12 days, so have a look when it’s out 🙂
Reply
scot
| #
I’m running into an issue where the cart is not model responsive for small screen. I have spent hours looking for a cure.
If you can help me, please!!
http://bohebirdie.com
-Scot
Reply
Alexis Nominé
| #
I’m aware of this “bug” but have very little time to fix it for now.
If you can wait, WooCommerce 2.1 should be out on the 20th of january, taking care of all the responsive stuff 🙂
Reply
Scot
| #
That’s fine. I’m in development mode right now for the best plugins for a commerce site.
-Scot
Reply
Brian
| #
add this to @media screen
It removes, the thumbnail of the picture, the product subtotal on the end (it says it below so you don’t need it on the same line ) and centers everything for the most part.
th.product-thumbnail, td.product-thumbnail {display: none;}
th.product-subtotal, td.product-subtotal {display: none;}
.cart_totals {margin: 0 auto !important; width: 100%!important; margin-right: -3%!important;}
.woocommerce {margin-left: -2%!important;}
Reply
Patrick
| #
Je savais que la prochaine version de WooCommerce serait “responsive” mais j’ignorais la date de sortie. Merci pour l’information, je vais utiliser votre solution pour le moment!
Reply
Ronald
| #
OMG thank you for this, it has help me tremendously!
Reply
368 Durham WooCommerce - Responsive Stylesheet Example » 368 Durham
| #
[…] spent hours coming up with a good solution. Eventually I found a blogpost from Nomine Web Creations. I built upon the example he provided. Below is the stylesheet I used to make woocommerce fully […]
Reply
Kelly
| #
Hey! I realize that 2.1 came out today, but I did like some of the things you did better! LOL Woo has 3 products across on the iphone, whereas you had one, which looks better. Is there a quick code I can add for this?
Reply
Alexis Nominé
| #
Here it is: More responsiveness for WooCommerce 2.1 default stylesheet
Reply
Kelly
| #
I meant 2 products across. 🙂
Reply
Alexis Nominé
| #
I’m having a look right now at their code. I’ll post some updates here soon…
Reply
Edward McConville
| #
Brilliant work. Thank you so much for this it saved me a lot of grief! : )
Reply
More responsiveness for WooCommerce 2.1 default stylesheet - Nomine Web Creations
| #
[…] my article on how to add responsiveness to WooCommerce 2.0 default stylesheet, here is how to add more responsiveness to WooCommerce […]
Reply
Wiepkje
| #
Dear Alexis,
Thanks for your code. It solved almost my issues with mobile devices. The one thing I cannot get right are the plus and minus buttons wich now align horizontal instead of vertical. See my website. What did I do wrong?
Thanks in advance, Wiepkje
Reply
Wiepkje
| #
Hi Alexis,
I fixed the problem. I went back to the original stylesheet from WooCommerce and restyled some parts in the stylesheet of my childtheme.
Reply
Abes
| #
Hi Alexis, thanks so much for the solution. Works perfect (or near perfect if you exclude IE)
With the exception of Internet Explorer, all browsers work fine and my site is perfect on mobile devices.
When you go to my product list page (http://www.mynunu.co.za/product-category/nunu_baby/) it shows my products stacked.
Any idea on how to fix this?
Thanks again.
Reply
Alexis Nominé
| #
Hi Abes,
Internet Explorer doesn’t support “responsive” media queries before version 9. If you want it to work on older versions, you could add this to the head of your current theme:
Reply
signature links
| #
If some one desires expert view about blogging and site-building afterward i advise him/her to visit this blog, Keep up the fastidious work.
Reply
James Savino
| #
I am having trouble getting the related products to become responsive on iphones….can anyone help? Please email me at james@savinodesignsutdio.com.
Thanks!
Reply
James Savino
| #
Page example here: http://barkingmaddogwear.com/product/ap104-01/
Reply