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:

Continue Reading →

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.

Continue Reading →