Makers Byte
Published in

Makers Byte

How to make Woocommerce Shopping Cart responsive?

via unsplash.com

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:

Use the code below and include this in your stylesheet:

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

Concluding Notes:
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.
You can use WordPress customizer or similar browser-based developer tools to test through the responsive of your site.

--

--

--

Resource hub for Designers/Developers

Recommended from Medium

[LeetCode]#1572. Matrix Diagonal Sum

How to migrate from Magento 1 to Magento 2 with few steps?

Authenticate A Shopify App Using OAuth — The Ballerina Way

How To Write Pseudo-code

An introduction to Python Strings!

MXChip IoT DevKit (part 01)

IE Business School Workshop

Terraform: for vs for_each

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shahzaib Khan

Shahzaib Khan

Data Scientist, Developer, Tech Writer, Entrepreneur and Computer Science Enthusiast. Connect with me @ https://linkedin.com/in/shahzaibkhan/

More from Medium

How to add Custom Meta Field to User Listing at the Admin Panel WordPress?

How to Host, Build & Launch a Website/Webshop?

How To Create A Simple WordPress Plugin From Scratch

3 keys to successful web projects