AnswerBun.com

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

}

/* 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 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir