Woocommerce tables not responsive mobile

WordPress Development Asked by RickMorty on October 8, 2020

Ive begun to realize that woocommerce tables are the worst for mobile responsive tables. Has anyone had any success with a proper css file where tables are not stacked? I want to just squish the tables. The most plagued tables are in the My Orders page and the cart/checkout… thanks in advance for any help!

One Answer

Below Css add your css file
/* START Make the WooCommerce Cart Table Responsive for Mobile */

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

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


/* END Make the WooCommerce Cart Table Responsive  for Mobile */

Answered by Dharmishtha Patel on October 8, 2020

Add your own answers!

Related Questions

Adding microdata using Structured Data Markup Helper HTML

1  Asked on December 6, 2020 by desislava-angelova


Server timeout error on every weekend

0  Asked on December 6, 2020 by dhaval-joshi


How do I make a shortcode to display the shop name on Dokan?

1  Asked on December 5, 2020 by sean-taylor


Excess dependencies

1  Asked on December 5, 2020 by lovor


A conditional button

1  Asked on December 3, 2020 by aashish-tripathi


Visual editor not saving data

0  Asked on December 2, 2020 by jasierok


WordPress Register Form

0  Asked on November 30, 2020


New post status for custom post type

3  Asked on November 30, 2020 by dclawson


Showing related post for custom taxonomy

1  Asked on November 28, 2020 by luca


How to hide “Change role to” dropdown on Users admin menu

0  Asked on November 27, 2020 by rijal-islami


Colliding custom permalink rules

0  Asked on November 26, 2020 by laurent


how to redirect the link to a category in the website

1  Asked on November 26, 2020 by jeline


Custom payment gateway issue

1  Asked on November 26, 2020 by klevis-miho


Ask a Question

Get help from others!

© 2022 All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir