Skip to content

Instantly share code, notes, and snippets.

@WPDevHQ
Forked from yratof/_base.scss
Created March 19, 2016 02:36
Show Gist options
  • Save WPDevHQ/e249b58dbd91c619b88e to your computer and use it in GitHub Desktop.
Save WPDevHQ/e249b58dbd91c619b88e to your computer and use it in GitHub Desktop.
WooCommerce Checkout for Mobile
@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%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment