-
-
Save Dijkie/9e0d270f4fe8576fc302 to your computer and use it in GitHub Desktop.
WooCommerce 2.1 Mobile First Responsive Layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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