Optimising WooCommerce Checkout for Mobile

For an online store to be effective – to maximise its sales – it must work well on smartphones. WooCommerce for WordPress is a common online store system, but the checkout process is poor on smartphones. Why doesn’t the checkout fit on a smartphone screen? Because it uses tables that aren’t optimized for the 320 pixel width of a smartphone.

Mobile Use in Australia

The checkout experience can’t be ignored – between 30-40% of internet traffic is now conducted on mobile devices (such as smartphones and tablets).

People are five times more likely to abandon a task they are trying to complete if the website isn’t optimized for mobile use. If this is your website you just lost a sale.

In mid-2013, 63% of Australians owned a smartphone.

31% of smartphone users – equating to 17% of adults – only access the internet on their smartphone.

Tables, considered evil by some, are perfect for laying out tabular data (their original purpose before being hijacked for page layout until the mid-2000s). But they need help to display well on smartphones. The solution is to make a table responsive. The trick lies in the CSS display property, making the td element (the table cell), behave as display:block, instead of it’s natural display: table-cell.

I originally posted this in a CyberChimps forum, in response to someone’s question as to how to optimise the WooCommerce page for mobile – principally that the cart and checkout didn’t fit on the mobile screen. A table, being naturally not responsive, simply breaks out of the page.

My solution is actually an adaption of Chris Coyier’s Responsive Data Tables article, http://css-tricks.com/responsive-data-tables/.

Using this method allows the font size to remain at full size, which is good for smartphone viewing.

Disclaimer: the CSS could be overwritten by your theme’s styles

Before and After

WooCommerce cart page, before and after smartphone optimisation with table responsive design

WooCommerce checkout page, before and after smartphone optimisation

The CSS Code

The CSS code below can be pasted at the bottom of your theme’s stylesheet. Visit WordPress Dashboard > Appearance > Editor (http://yourWebsite.com/wp-admin/theme-editor.php) and it is usually the file the loads automatically (otherwise it is at the bottom of the right hand side list, Styles > style.css).

The media query can be tweaked. In this case I’ve used 600px, any bigger than that and the table will fit as per normal. You could use 480px, a common landscape screen size, or 568px (an iPhone5 landscape). Using 320px (common portrait smartphone) would be an oversight, as it would ignore landscape smartphone use.

Download CSS file

/* START Make the cart table responsive */
/* http://css-tricks.com/responsive-data-tables/ */

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

}

/* END Make the cart table responsive */