• fr

A bit of responsiveness for WooCommerce 2.0 default stylesheet

Written by Alexis Nominé on . Posted in WordPress

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 :

Hey, that's not CSS!
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!

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 (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

  • 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

  • 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

  • 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

Leave a comment