Category

How to make Woocommerce Shopping Cart responsive?

Responsive layouts are very “big thing” in the web world right now. It’s an important parameter especially if you are looking for:

1. Improving the way how your site looks on devices with both large and small screens,
2. Want to increase the time spent by the user on your site when using mobile and tablet devices.
3. Improving your search engine ranking

They are all interlinked. Keeping these cases in mind, when you add up eCommerce to your site the responsiveness of the site is a must-have feature as you can lose a customer if your site won’t be responsive.

Woocommerce is a widely use eCommerce platform for the WordPress. Unfortunately, the existing theme of the WooCommerce is not very responsive especially the woocommerce responsive cart is completely out of structure so as the checkout. For anyone having the trouble with Woocommerce not being responsive, here is a quick fix for it:

1. Use the code below and include this in your stylesheet:

@media screen and (max-width: 766px) and (min-width: 300px) {

/ 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 table.shop_table,
.woocommerce table.shop_table thead,
.woocommerce table.shop_table tbody,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce table.shop_table tr {
display: block;
}

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

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

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

.woocommerce table.shop_table {
border: none;
}

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

.woocommerce 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 table.shop_table td.product-remove:before {
content: “DELETE”;
}

.woocommerce table.shop_table td.product-thumbnail:before {
content: “IMAGE”;
}

.woocommerce table.shop_table td.product-name:before {
content: “PRODUCT”;
}

.woocommerce table.shop_table td.product-price:before {
content: “PRICE”;
}

.woocommerce table.shop_table td.product-quantity:before {
content: “QUANTITY”;
}

.woocommerce table.shop_table td.product-subtotal:before {
content: “SUBTOTAL”;
}

.woocommerce table.shop_table td.product-total:before {
content: “TOTAL”;
}

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

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

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

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

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

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

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

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

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

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

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

.woocommerce .order_details li,
.woocommerce .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 #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 {
width: 100%;
font-size:12px !important;
}

.woocommerce tfoot{
display:block !important;
}
.woocommerce tfoot td{
width:100% !important;
display:block !important;
}
/ 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 #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 {
width: 48%;
font-size:12px !important;
}

/ clean up how coupon inputs display /
#content table.cart td.actions .coupon,
.woocommerce table.cart td.actions .coupon,
.woocommerce #content table.cart td.actions .coupon,
.woocommerce 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 #content table.cart td.actions .coupon .input-text,
.woocommerce 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 .cart-collaterals .cross-sells {
display: none;
}

}
/ END Make the cart table responsive /

}

Concluding Notes:
1. BE PREPARED to spend some time with the code inspector and developer tools to get to a point where you find your site to be acceptable.
2. You can use WordPress customizer or similar browser-based developer tools to test through the responsive of your site.

If you liked the article about “woocommerce responsive cart”, and wanting to explore more from WooCommerce, then follow us at: Twitter and Facebook.