Responsive, Mobile Cart page for WooCommerce
This has been bugging me for a while. I've put together a quick gist for a mobile cart page on woocommerce. Now this currently works for WooCommerce 2.1.9, and no doubt it'll change as I develop it, but if you use this (written in scss) you'll find your mobile cart page working nicer when you view it on the go.
This file contains hidden or 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
| @media only screen and (max-width: 760px) { | |
| .woocommerce-cart #content .woocommerce table.shop_table td, | |
| .woocommerce-cart #content .woocommerce-page table.shop_table td, | |
| .woocommerce-checkout #content .woocommerce table.shop_table td, | |
| .woocommerce-checkout #content .woocommerce-page table.shop_table td { | |
| padding: 3px 0; | |
| border-top: 0; | |
| } | |
| .woocommerce-cart #content .woocommerce td.product-quantity, | |
| .woocommerce-cart #content .woocommerce-page td.product-quantity, | |
| .woocommerce-checkout #content .woocommerce td.product-quantity, | |
| .woocommerce-checkout #content .woocommerce-page td.product-quantity { | |
| min-width: 50px; | |
| } | |
| .shop_table { | |
| /* Force table to not be like tables anymore */ | |
| table, thead, tbody, th, td, tr { | |
| display: inline-block; | |
| width: 100%; | |
| } | |
| /* Hide table headers (but not display: none;, for accessibility) */ | |
| thead tr { | |
| position: absolute; | |
| top: -9999px; | |
| left: -9999px; | |
| } | |
| .cart_item{ | |
| float: left; | |
| clear: both; | |
| } | |
| // This is for specific customisation of the page | |
| .product-thumbnail { | |
| float: left; | |
| width: 25%; | |
| height: 80px; | |
| img{ | |
| width: 100% !important; | |
| height: auto; | |
| max-width: 60px; | |
| } | |
| } | |
| .product-remove{ | |
| width: 7%; | |
| float: right; | |
| } | |
| .product-name{ | |
| width: 68%; | |
| float: right; | |
| min-height: 35px; | |
| } | |
| .product-price{ | |
| float: left; | |
| width: 25%; | |
| &:after { | |
| content: " x "; | |
| float: right; | |
| margin-right: 10px; | |
| } | |
| } | |
| .product-quantity{ | |
| float: left; | |
| width: 25%; | |
| } | |
| .product-subtotal { | |
| float: left; | |
| width: 25%; | |
| } | |
| .cart_item { | |
| /* Label the data */ | |
| //td:nth-of-type(1):before { content: "Remove"; } | |
| //td:nth-of-type(2):before { content: "Image"; } | |
| //td:nth-of-type(3):before { content: "Product"; } | |
| //td:nth-of-type(4):before { content: "Price: "; } | |
| //td:nth-of-type(5):before { content: "Qty"; } | |
| td:nth-of-type(6):before { content: "= "; } | |
| td:nth-of-type(7):before { content: ""; vertical-align: baseline;} | |
| } | |
| td { | |
| /* Behave like a "row" */ | |
| border: none; | |
| position: relative; | |
| padding-left: 50%; | |
| a, .quantity { | |
| display: inline-block !important; | |
| } | |
| } | |
| .actions{ | |
| padding: 10px !important; | |
| } | |
| .woocommerce-cart #content .woocommerce table.shop_table th, | |
| .woocommerce-cart #content .woocommerce-page table.shop_table th, | |
| .woocommerce-checkout #content .woocommerce table.shop_table th, | |
| .woocommerce-checkout #content .woocommerce-page table.shop_table th { | |
| padding: 3px 10px !important; | |
| } | |
| // This separates the products from the total amount | |
| .cart-subtotal { | |
| border-top: 1px solid; | |
| margin-top: 10px; | |
| padding-top: 10px; | |
| } | |
| .cart-subtotal, .shipping, .order-total { | |
| th{ width: 58%; float: left; padding: 3px 0;} | |
| td{ width: 42%; float: right;} | |
| } | |
| .checkout-button{ | |
| width: 100% !important; | |
| text-align: center !important; | |
| display: inline-block !important; | |
| } | |
| .coupon{ | |
| width: 100%; | |
| display: block; | |
| & + .button{ | |
| display: inline-block !important; | |
| margin: 10px 0 !important; | |
| width: 100% !important; | |
| } | |
| .input-text { | |
| width: 120px !important; | |
| } | |
| } | |
| table.cart, #content table.cart { | |
| .product-thumbnail { | |
| min-width: 32px; | |
| } | |
| img { | |
| max-width: 40px; | |
| width: 100%; | |
| height:auto; | |
| } | |
| } | |
| } | |
| //This is in case you dont change your template: | |
| .woocommerce-cart #content .woocommerce .cart-collaterals .cart_totals, | |
| .woocommerce-cart #content .woocommerce-page .cart-collaterals .cart_totals, | |
| .woocommerce-checkout #content .woocommerce .cart-collaterals .cart_totals, | |
| .woocommerce-checkout #content .woocommerce-page .cart-collaterals .cart_totals, | |
| .woocommerce-cart #content .woocommerce .cart-collaterals .shipping_calculator, | |
| .woocommerce-cart #content .woocommerce-page .cart-collaterals .shipping_calculator, | |
| .woocommerce-checkout #content .woocommerce .cart-collaterals .shipping_calculator, | |
| .woocommerce-checkout #content .woocommerce-page .cart-collaterals .shipping_calculator { | |
| width: 100%; | |
| } | |
| // C H E C K O U T | |
| .woocommerce .col2-set .col-1, | |
| .woocommerce-page .col2-set .col-1, | |
| .woocommerce .col2-set .col-2, | |
| .woocommerce-page .col2-set .col-2{ | |
| width: 100%; | |
| } | |
| } |