Skip to content

Instantly share code, notes, and snippets.

@Dijkie

Dijkie/functions.php

Forked from alexisnomine/functions.php
Created December 2, 2015 09:26
Show Gist options
  • Save Dijkie/9e0d270f4fe8576fc302 to your computer and use it in GitHub Desktop.
Save Dijkie/9e0d270f4fe8576fc302 to your computer and use it in GitHub Desktop.
Download ZIP
WooCommerce 2.1 Mobile First Responsive Layout
Raw
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;
}
Raw
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}}
Raw
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+ */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment