WooCommerce 2.1 Mobile First Responsive Layout

functions.php

<?php
add_filter( 'woocommerce_enqueue_styles', 'my_woocommerce_styles' );
function my_woocommerce_styles($styles){
	unset($styles['woocommerce-layout']);
	unset($styles['woocommerce-smallscreen']);
	$styles['woocommerce-layout'] = array(
		'src'     => get_stylesheet_directory_uri() . '/woocommerce-layout.css',
		'deps'    => '',
		'version' => '1.0.0',
		'media'   => 'all'
	);
	return $styles;
}

woocommerce-layout.css

.woocommerce img,.woocommerce-page img{height:auto;max-width:100%}.woocommerce div.product div.thumbnails:after,.woocommerce-page div.product div.thumbnails:after,.woocommerce #content div.product div.thumbnails:after,.woocommerce-page #content div.product div.thumbnails:after{content:"";display:table;clear:both}.woocommerce div.product div.thumbnails a,.woocommerce-page div.product div.thumbnails a,.woocommerce #content div.product div.thumbnails a,.woocommerce-page #content div.product div.thumbnails a{float:left;width:30.75%;margin-right:3.8%}.woocommerce div.product div.thumbnails a.last,.woocommerce-page div.product div.thumbnails a.last,.woocommerce #content div.product div.thumbnails a.last,.woocommerce-page #content div.product div.thumbnails a.last{margin-right:0}.woocommerce div.product div.thumbnails a.first,.woocommerce-page div.product div.thumbnails a.first,.woocommerce #content div.product div.thumbnails a.first,.woocommerce-page #content div.product div.thumbnails a.first{clear:both}.woocommerce div.product .woocommerce-tabs,.woocommerce-page div.product .woocommerce-tabs,.woocommerce #content div.product .woocommerce-tabs,.woocommerce-page #content div.product .woocommerce-tabs{clear:both}.woocommerce div.product .woocommerce-tabs ul.tabs:after,.woocommerce-page div.product .woocommerce-tabs ul.tabs:after,.woocommerce #content div.product .woocommerce-tabs ul.tabs:after,.woocommerce-page #content div.product .woocommerce-tabs ul.tabs:after{content:"";display:table;clear:both}.woocommerce div.product .woocommerce-tabs ul.tabs li,.woocommerce-page div.product .woocommerce-tabs ul.tabs li,.woocommerce #content div.product .woocommerce-tabs ul.tabs li,.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li{display:inline}.woocommerce div.product #reviews .comment:after,.woocommerce-page div.product #reviews .comment:after,.woocommerce #content div.product #reviews .comment:after,.woocommerce-page #content div.product #reviews .comment:after{content:"";display:table;clear:both}.woocommerce div.product #reviews .comment img,.woocommerce-page div.product #reviews .comment img,.woocommerce #content div.product #reviews .comment img,.woocommerce-page #content div.product #reviews .comment img{float:right;height:auto}.woocommerce #quantity input::-webkit-outer-spin-button,.woocommerce-page #quantity input::-webkit-outer-spin-button,.woocommerce #content .quantity input::-webkit-outer-spin-button,.woocommerce-page #content .quantity input::-webkit-outer-spin-button,.woocommerce #quantity input::-webkit-inner-spin-button,.woocommerce-page #quantity input::-webkit-inner-spin-button,.woocommerce #content .quantity input::-webkit-inner-spin-button,.woocommerce-page #content .quantity input::-webkit-inner-spin-button{display:none}.woocommerce ul.products,.woocommerce-page ul.products{clear:both}.woocommerce ul.products:after,.woocommerce-page ul.products:after{content:"";display:table;clear:both}.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{margin:0 0 2.992em 0;padding:0;position:relative;margin-left:0}.woocommerce .woocommerce-result-count,.woocommerce-page .woocommerce-result-count{float:left}.woocommerce .woocommerce-ordering,.woocommerce-page .woocommerce-ordering{float:right}.woocommerce .woocommerce-pagination ul.page-numbers:after,.woocommerce-page .woocommerce-pagination ul.page-numbers:after{content:"";display:table;clear:both}.woocommerce .woocommerce-pagination ul.page-numbers li,.woocommerce-page .woocommerce-pagination ul.page-numbers li{display:inline}.woocommerce table.cart .product-thumbnail,.woocommerce-page table.cart .product-thumbnail,.woocommerce #content table.cart .product-thumbnail,.woocommerce-page #content table.cart .product-thumbnail{display:none}.woocommerce table.cart img,.woocommerce-page table.cart img,.woocommerce #content table.cart img,.woocommerce-page #content table.cart img{height:auto}.woocommerce table.cart td.actions .coupon,.woocommerce-page table.cart td.actions .coupon,.woocommerce #content table.cart td.actions .coupon,.woocommerce-page #content table.cart td.actions .coupon{padding-bottom:.5em}.woocommerce table.cart td.actions input,.woocommerce-page table.cart td.actions input,.woocommerce #content table.cart td.actions input,.woocommerce-page #content table.cart td.actions input,.woocommerce table.cart td.actions .button,.woocommerce-page table.cart td.actions .button,.woocommerce #content table.cart td.actions .button,.woocommerce-page #content table.cart td.actions .button,.woocommerce table.cart td.actions .input-text,.woocommerce-page table.cart td.actions .input-text,.woocommerce #content table.cart td.actions .input-text,.woocommerce-page #content table.cart td.actions .input-text{width:48%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.woocommerce table.cart td.actions .input-text+.button,.woocommerce-page table.cart td.actions .input-text+.button,.woocommerce #content table.cart td.actions .input-text+.button,.woocommerce-page #content table.cart td.actions .input-text+.button,.woocommerce table.cart td.actions .button.alt,.woocommerce-page table.cart td.actions .button.alt,.woocommerce #content table.cart td.actions .button.alt,.woocommerce-page #content table.cart td.actions .button.alt{float:right}.woocommerce .cart-collaterals,.woocommerce-page .cart-collaterals{width:100%}.woocommerce .cart-collaterals:after,.woocommerce-page .cart-collaterals:after{content:"";display:table;clear:both}.woocommerce .cart-collaterals .related,.woocommerce-page .cart-collaterals .related{width:30.75%;float:left}.woocommerce .cart-collaterals .cross-sells ul.products,.woocommerce-page .cart-collaterals .cross-sells ul.products{float:none}.woocommerce .cart-collaterals .cross-sells ul.products li,.woocommerce-page .cart-collaterals .cross-sells ul.products li{width:48%}.woocommerce .cart-collaterals .shipping_calculator .col2-set .col-1,.woocommerce-page .cart-collaterals .shipping_calculator .col2-set .col-1,.woocommerce .cart-collaterals .shipping_calculator .col2-set .col-2,.woocommerce-page .cart-collaterals .shipping_calculator .col2-set .col-2{width:47%}.woocommerce ul.cart_list li:after,.woocommerce-page ul.cart_list li:after,.woocommerce ul.product_list_widget li:after,.woocommerce-page ul.product_list_widget li:after{content:"";display:table;clear:both}.woocommerce ul.cart_list li img,.woocommerce-page ul.cart_list li img,.woocommerce ul.product_list_widget li img,.woocommerce-page ul.product_list_widget li img{float:right;height:auto}.woocommerce form .form-row:after,.woocommerce-page form .form-row:after{content:"";display:table;clear:both}.woocommerce form .form-row label,.woocommerce-page form .form-row label{display:block}.woocommerce form .form-row label.checkbox,.woocommerce-page form .form-row label.checkbox{display:inline}.woocommerce form .form-row select,.woocommerce-page form .form-row select{width:100%}.woocommerce form .form-row .input-text,.woocommerce-page form .form-row .input-text{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%}.woocommerce form .form-row-first,.woocommerce-page form .form-row-first,.woocommerce form .form-row-last,.woocommerce-page form .form-row-last{float:left;width:47%;overflow:visible}.woocommerce form .form-row-last,.woocommerce-page form .form-row-last{float:right}.woocommerce form .form-row-wide,.woocommerce-page form .form-row-wide{clear:both}.woocommerce.woocommerce-checkout form.login .form-row,.woocommerce-page.woocommerce-checkout form.login .form-row{width:100%;float:none}.woocommerce #payment .form-row select,.woocommerce-page #payment .form-row select{width:auto}.woocommerce #payment #place_order,.woocommerce-page #payment #place_order{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-bottom:1em}@media only screen and (min-width:30em){.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{width:48%;float:left}.woocommerce ul.products li.product:nth-child(2n),.woocommerce-page ul.products li.product:nth-child(2n){float:right}.woocommerce ul.products li.product:nth-child(2n+1),.woocommerce-page ul.products li.product:nth-child(2n+1){clear:both}}@media only screen and (min-width:37.5em){.woocommerce .col2-set,.woocommerce-page .col2-set{width:100%}.woocommerce .col2-set:after,.woocommerce-page .col2-set:after{content:"";display:table;clear:both}.woocommerce .col2-set .col-1,.woocommerce-page .col2-set .col-1{float:left;width:48%}.woocommerce .col2-set .col-2,.woocommerce-page .col2-set .col-2{float:right;width:48%}.woocommerce div.product div.images,.woocommerce-page div.product div.images,.woocommerce #content div.product div.images,.woocommerce-page #content div.product div.images{float:left;width:48%}.woocommerce div.product div.summary,.woocommerce-page div.product div.summary,.woocommerce #content div.product div.summary,.woocommerce-page #content div.product div.summary{float:right;width:48%}.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{margin-right:1.8%;width:32.05%}.woocommerce ul.products li.product:nth-child(2n),.woocommerce-page ul.products li.product:nth-child(2n){float:left}.woocommerce ul.products li.product:nth-child(2n+1),.woocommerce-page ul.products li.product:nth-child(2n+1){clear:none}.woocommerce ul.products li.product:nth-child(3n),.woocommerce-page ul.products li.product:nth-child(3n){margin-right:0}.woocommerce ul.products li.product:nth-child(3n+1),.woocommerce-page ul.products li.product:nth-child(3n+1){clear:both}.woocommerce table.cart .product-thumbnail,.woocommerce-page table.cart .product-thumbnail,.woocommerce #content table.cart .product-thumbnail,.woocommerce-page #content table.cart .product-thumbnail{display:block}.woocommerce table.cart td.actions,.woocommerce-page table.cart td.actions,.woocommerce #content table.cart td.actions,.woocommerce-page #content table.cart td.actions{text-align:right}.woocommerce table.cart td.actions input,.woocommerce-page table.cart td.actions input,.woocommerce #content table.cart td.actions input,.woocommerce-page #content table.cart td.actions input,.woocommerce table.cart td.actions .button,.woocommerce-page table.cart td.actions .button,.woocommerce #content table.cart td.actions .button,.woocommerce-page #content table.cart td.actions .button{width:auto}.woocommerce table.cart td.actions .input-text,.woocommerce-page table.cart td.actions .input-text,.woocommerce #content table.cart td.actions .input-text,.woocommerce-page #content table.cart td.actions .input-text{width:80px}.woocommerce table.cart td.actions .input-text+.button,.woocommerce-page table.cart td.actions .input-text+.button,.woocommerce #content table.cart td.actions .input-text+.button,.woocommerce-page #content table.cart td.actions .input-text+.button,.woocommerce table.cart td.actions .button.alt,.woocommerce-page table.cart td.actions .button.alt,.woocommerce #content table.cart td.actions .button.alt,.woocommerce-page #content table.cart td.actions .button.alt{float:none}.woocommerce table.cart td.actions .coupon,.woocommerce-page table.cart td.actions .coupon,.woocommerce #content table.cart td.actions .coupon,.woocommerce-page #content table.cart td.actions .coupon{padding-bottom:0;float:left}.woocommerce table.cart td.actions .coupon label,.woocommerce-page table.cart td.actions .coupon label,.woocommerce #content table.cart td.actions .coupon label,.woocommerce-page #content table.cart td.actions .coupon label{display:none}.woocommerce .cart-collaterals .cross-sells,.woocommerce-page .cart-collaterals .cross-sells{width:48%;float:left;clear:right}.woocommerce .cart-collaterals .cross-sells:after,.woocommerce-page .cart-collaterals .cross-sells:after{content:"";display:table;clear:both}.woocommerce .cart-collaterals .shipping_calculator,.woocommerce-page .cart-collaterals .shipping_calculator{width:48%;float:right;clear:right}.woocommerce .cart-collaterals .shipping_calculator:after,.woocommerce-page .cart-collaterals .shipping_calculator:after{content:"";display:table;clear:both}.woocommerce .cart-collaterals .cart_totals,.woocommerce-page .cart-collaterals .cart_totals{width:48%;float:right;text-align:right}.woocommerce.woocommerce-checkout form.login .form-row-first,.woocommerce-page.woocommerce-checkout form.login .form-row-first,.woocommerce.woocommerce-checkout form.login .form-row-last,.woocommerce-page.woocommerce-checkout form.login .form-row-last{float:left;width:47%;overflow:visible}.woocommerce.woocommerce-checkout form.login .form-row-last,.woocommerce-page.woocommerce-checkout form.login .form-row-last{float:right}.woocommerce #payment .terms,.woocommerce-page #payment .terms{text-align:right;padding:0 1em 0}.woocommerce #payment #place_order,.woocommerce-page #payment #place_order{float:right;width:auto;margin-bottom:0}}@media only screen and (min-width:60em){.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{margin-right:3.8%;width:22.05%}.woocommerce ul.products li.product:nth-child(3n),.woocommerce-page ul.products li.product:nth-child(3n){margin-right:3.8%}.woocommerce ul.products li.product:nth-child(3n+1),.woocommerce-page ul.products li.product:nth-child(3n+1){clear:none}.woocommerce ul.products li.product.first,.woocommerce-page ul.products li.product.first{clear:both}.woocommerce ul.products li.product.last,.woocommerce-page ul.products li.product.last{margin-right:0}}

woocommerce-layout.less

.woocommerce, .woocommerce-page {

	/* =General Layout Styles
	-------------------------------------------------------------- */

	img {
		height:auto;
		max-width:100%;
	}

	/* =Product Page
	-------------------------------------------------------------- */

	div.product, #content div.product {
		div.thumbnails {
			.clearfix;
			a {
				float:left;
				width: 30.75%;
				margin-right: 3.8%;
			}
			a.last {
				margin-right: 0;
			}
			a.first {
				clear:both;
			}
		}
		/* Tabs on the product page */
		.woocommerce-tabs {
			clear:both;
			ul.tabs {
				.menu;
			}
		}
		#reviews {
			.comment {
				.mediaright;
			}
		}
	}
	#quantity, #content .quantity {
		/* Disable input[type=number] buttons until the world is ready */
		input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
			display:none;
		}
	}

	/* =Product Loops
	-------------------------------------------------------------- */

	/*.related, .upsells.products {
		.clearfix();
		ul.products, ul {
			float:none;
			li.product {
				width: 48%;
				img {
					width: 100%;
					height:auto;
				}
			}
		}
	}*/

	ul.products {
		clear:both;
		.clearfix;
		li.product {
			margin: 0 0 2.992em 0;
			padding: 0;
			position: relative;
			margin-left: 0;
		}
	}

	.woocommerce-result-count {
		float: left;
	}
	.woocommerce-ordering {
		float: right;
	}

	.woocommerce-pagination {
		ul.page-numbers {
			.menu;
		}
	}

	/* =Cart Page
	-------------------------------------------------------------- */

	table.cart, #content table.cart {
		.product-thumbnail {
			display: none;
		}
		img {
			height:auto;
		}
		td.actions {
			.coupon {
				padding-bottom:.5em;
			}
			input, .button, .input-text {
				width:48%;
				.borderbox;
			}
			.input-text + .button, .button.alt {
				float: right;
			}
		}
	}

	.cart-collaterals {
		.clearfix;
		width: 100%;
		.related {
			width: 30.75%;
			float:left;
		}

		.cross-sells {
			ul.products {
				float:none;

				li {
					width: 48%;
				}
			}
		}
		.shipping_calculator {
			.col2-set {
				.col-1, .col-2 {
					width: 47%;
				}
			}
		}
	}

	/* =Cart Sidebar
	-------------------------------------------------------------- */

	ul.cart_list, ul.product_list_widget {
		li {
			.mediaright;
		}
	}

	/* =Forms
	-------------------------------------------------------------- */

	form {
		.form-row {
			.clearfix;
			label {
				display:block;
				&.checkbox {
					display: inline;
				}
			}
			select {
				width: 100%;
			}
			.input-text {
				.borderbox;
				width:100%;
			}
		}
		.form-row-first, .form-row-last {
			float:left;
			width: 47%;
			overflow: visible;
		}
		.form-row-last {
			float: right;
		}
		.form-row-wide {
			clear: both;
		}
	}

	&.woocommerce-checkout {
		form.login {
			.form-row {
				width: 100%;
				float: none;
			}
		}
	}

	#payment {
		.form-row {
			select {
				width:auto;
			}
		}
		#place_order {
			width:100%;
			.borderbox;
			margin-bottom:1em;
		}
	}

}


@media only screen and (min-width: 30em) { //480px
	.woocommerce, .woocommerce-page {

		/* =Product Loops
		-------------------------------------------------------------- */
		// 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;
				}
			}
		}
	}
}

@media only screen and (min-width: 37.5em) { //600px
	.woocommerce, .woocommerce-page {
		
		/* =General Layout Styles
		-------------------------------------------------------------- */
		.col2-set {
			.clearfix;
			width: 100%;
			.col-1 {
				float:left;
				width: 48%;
			}
			.col-2 {
				float: right;
				width: 48%;
			}
		}

		/* =Product Page
		-------------------------------------------------------------- */
		div.product, #content div.product {
			div.images {
				float:left;
				width: 48%;
			}
			div.summary {
				float: right;
				width: 48%;
			}
		}

		/* =Product Loops
		-------------------------------------------------------------- */
		// 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;
				}
			}
		}

		/* =Cart Page
		-------------------------------------------------------------- */
		table.cart, #content table.cart {
			.product-thumbnail {
				display: block; // TODO: or inline block?
			}
			td.actions {
				text-align: right;
				input, .button{
					width:auto;
				}
				.input-text {
					width:80px;
				}
				.input-text + .button, .button.alt {
					float: none;
				}
				.coupon {
					padding-bottom:0;
					float:left;
					label {
						display:none;
					}
				}
			}
		}

		.cart-collaterals {
			.cross-sells {
				width:48%;
				float: left;
				.clearfix;
				clear: right;
			}
			.shipping_calculator {
				width:48%;
				float: right;
				.clearfix;
				clear: right;
			}
			.cart_totals {
				width:48%;
				float: right;
				text-align: right;
			}
		}

		/* =Forms
		-------------------------------------------------------------- */
		
		&.woocommerce-checkout {
			form.login {
				.form-row-first, .form-row-last {
					float:left;
					width: 47%;
					overflow: visible;
				}
				.form-row-last {
					float: right;
				}
			}
		}

		#payment {
			.terms {
				text-align: right;
				padding: 0 1em 0;
			}
			#place_order {
				float: right;
				width:auto;
				margin-bottom: 0;
			}
		}
	}
}

@media only screen and (min-width: 60em) { //960px
	.woocommerce, .woocommerce-page {

		/* =Product Loops
		-------------------------------------------------------------- */
		// 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;
				}
			}
		}

		/*&.columns-1 {
			ul.products {
				li.product {
					width:100%;
					margin-right:0;
				}
			}
		}

		&.columns-2 {
			ul.products {
				li.product {
					width:48%;
				}
			}
		}

		&.columns-3 {
			ul.products {
				li.product {
					width:30.75%;
				}
			}
		}

		&.columns-5 {
			ul.products {
				li.product {
					width:16.95%;
				}
			}
		}

		&.columns-6 {
			ul.products {
				li.product {
					width:13.5%;
				}
			}
		}*/
	}
}

/* =Mixins
-------------------------------------------------------------- */
.clearfix() {
	&:after {
		content: "";
		display: table;
  		clear: both;
	}
}
.menu() {
	.clearfix;
	li {
		display:inline;
	}
}
.mediaright() {
	.clearfix;
	img {
		float:right;
		height:auto;
	}
}
.medialeft() {
	.clearfix;
	img {
		float:right;
		height:auto;
	}
}
.borderbox() {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

Alex,
I left you an email message from your blog last Friday regarding the implementation of this code, and I did not receive a response yet. I'll try again here on Github. I am attemptng to use your code in my genesis child theme to make my marklovettphotography.com site show only one woocommerce product column at 480px and below. Right now it displays 2 cols. I tried using media queries in my child style.css but could not get woocommerce to recognize my code. I then stumbled on your awesome solution but got confused about how to implement your stylesheet code with woocommerce stylesheets.

The many woocommerce stylesheets, with the Less min and compiled code really got me turned around.

Is there any way you would be able to break the procedure down of merging your css above with woocommerce into very specific simple instructions?

I was also hoping, maybe as an added bonus, that you may have some comments on your awesome filter function explaining how it works. I would love to understand it better. I believe if I understood this function better I would be able to figure out the rest much easier.

Thanks so much in advance,
Mark
[email protected]