Saifudheen is a young Entrepreneur from Kerala, India who founded MakTal™. This blog aims at helping individuals and businesses with the knowledge he gained throughout his career. Like his facebook page to stay updated.
  • Home
  • /
  • Wordpress
  • /
  • How to Optimize WooCommerce Checkout pages for Mobiles

How to Optimize WooCommerce Checkout pages for Mobiles

WooCommerce is the best eCommerce plugin for wordpress. It comes with a lot of features to run an online shop without much efforts. Some wordpress themes are not wooCommerce friendly or simply not responsive. If you are using a wordpress theme that is not wooCommerce friendly, you may experience issues in layouts. wooCommerce Cart and Checkout pages may look weird on mobiles. Following code can be used to optimize wooCommerce pages for mobiles so that they will be responsive.

@media screen and (max-width: 600px) {

/* Force table to not be like tables anymore */
.woocommerce-page table.shop_table,
.woocommerce-page table.shop_table thead,
.woocommerce-page table.shop_table tbody,
.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td,
.woocommerce-page table.shop_table tr {
    display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
.woocommerce-page table.shop_table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.woocommerce-page table.shop_table tr {
    /*border: 1px solid #d2d3d3; */
}

.woocommerce-page table.shop_table td {
    /* Behave like a "row" */
    border: 1px solid #d2d3d3;
    position: relative;
    padding-left: 30% !important;
}

.woocommerce-page table.shop_table {
    border: none;
}

.woocommerce-page table.shop_table td.product-spacer {
    border-color: #FFF;
    height: 10px;
}

.woocommerce-page table.shop_table td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 25%;
    padding-right: 10px;
    white-space: nowrap;
}

/*
Label the data
*/
.woocommerce-page table.shop_table td.product-remove:before {
    content: "DELETE";
}

.woocommerce-page table.shop_table td.product-thumbnail:before {
    content: "IMAGE";
}

.woocommerce-page table.shop_table td.product-name:before {
    content: "PRODUCT";
}

.woocommerce-page table.shop_table td.product-price:before {
    content: "PRICE";
}

.woocommerce-page table.shop_table td.product-quantity:before {
    content: "QUANTITY";
}

.woocommerce-page table.shop_table td.product-subtotal:before {
    content: "SUBTOTAL";
}

.woocommerce-page table.shop_table td.product-total:before {
    content: "TOTAL";
}

.woocommerce .quantity,
.woocommerce #content .quantity,
.woocommerce-page .quantity,
.woocommerce-page #content .quantity {
    margin: 0;
}

.woocommerce-page table.cart td.actions,
.woocommerce-page #content table.cart td.actions {
    text-align: left;
    border:0;
    padding-left: 6px !important;
}

.woocommerce-page table.cart td.actions .button.alt,
.woocommerce-page #content table.cart td.actions .button.alt {
    float: left;
    margin-top: 10px;
}

.woocommerce-page table.cart td.actions div,
.woocommerce-page #content table.cart td.actions div,
.woocommerce-page table.cart td.actions input,
.woocommerce-page #content table.cart td.actions input {
    margin-bottom: 10px;
}

.woocommerce-page .cart-collaterals .cart_totals {
    float: left;
    width: 100%;
    text-align: left;
}

.woocommerce-page .cart-collaterals .cart_totals th,
.woocommerce-page .cart-collaterals .cart_totals td {
    border:0 !important;
}

.woocommerce-page .cart-collaterals .cart_totals table tr.cart-subtotal td,
.woocommerce-page .cart-collaterals .cart_totals table tr.shipping td,
.woocommerce-page .cart-collaterals .cart_totals table tr.total td {
    padding-left: 6px !important;
}

.woocommerce-page table.shop_table tr.cart-subtotal td,
.woocommerce-page table.shop_table tr.shipping td,
.woocommerce-page table.shop_table tr.total td,
.woocommerce-page table.shop_table.order_details tfoot th,
.woocommerce-page table.shop_table.order_details tfoot td {
    padding-left: 6px !important;
    border:0 !important;
}

.woocommerce-page table.shop_table tbody {
    padding-top: 10px;
}

.woocommerce .col2-set .col-1,
.woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-2,
.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
    float: none;
    width: 100%;
}

.woocommerce .order_details ul,
.woocommerce-page .order_details ul,
.woocommerce .order_details,
.woocommerce-page .order_details {
    padding:0;
}

.woocommerce .order_details li,
.woocommerce-page .order_details li {
    clear: left;
    margin-bottom: 10px;
    border:0;
}

/* make buttons full width, text wide anyway, improves effectiveness */
#content table.cart td.actions .button,
.woocommerce #content table.cart td.actions .input-text,
.woocommerce #content table.cart td.actions input,
.woocommerce table.cart td.actions .button,
.woocommerce table.cart td.actions .input-text,
.woocommerce table.cart td.actions input,
.woocommerce-page #content table.cart td.actions .button,
.woocommerce-page #content table.cart td.actions .input-text,
.woocommerce-page #content table.cart td.actions input,
.woocommerce-page table.cart td.actions .button,
.woocommerce-page table.cart td.actions .input-text,
.woocommerce-page table.cart td.actions input {
    width: 100%;
}

/* keep coupon at 50% */
#content table.cart td.actions .coupon .button,
.woocommerce #content table.cart td.actions .coupon .input-text,
.woocommerce #content table.cart td.actions .coupon input,
.woocommerce table.cart td.actions .coupon .button,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce table.cart td.actions .coupon input,
.woocommerce-page #content table.cart td.actions .coupon .button,
.woocommerce-page #content table.cart td.actions .coupon .input-text,
.woocommerce-page #content table.cart td.actions .coupon input,
.woocommerce-page table.cart td.actions .coupon .button,
.woocommerce-page table.cart td.actions .coupon .input-text,
.woocommerce-page table.cart td.actions .coupon input {
    width: 48%;
}

/* clean up how coupon inputs display */
#content table.cart td.actions .coupon,
.woocommerce table.cart td.actions .coupon,
.woocommerce-page #content table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon {
    margin-top: 1.5em;
}

#content table.cart td.actions .coupon .input-text,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce-page #content table.cart td.actions .coupon .input-text,
.woocommerce-page table.cart td.actions .coupon .input-text {
    margin-bottom: 1em;
}

/* remove cross sells, 
they interfere with flow between cart and 
cart totals + shipping calculator */
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .cross-sells {
    display: none;
}

}

It is suggested to add these codes in your child theme’s stylesheet or using a custom css plugin. In the CSS codes, you will see words like DELETE, IMAGE, PRODUCT, PRICE etc. If you are using a language other than English, you should use translated words here.

Saifudheen is a young entrepreneur from the great India who founded MakTal™. He is a passionate designer, color lover, coder and knowledge giver ;)