WooCommerce Checkout for Mobile

_base.scss

@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%;		
	}
}