Support » Plugin: WooCommerce » I have found a woocommerce responsive cart solution

  • Resolved Jods

    (@jods)


    Hi, I have been searching high and low for a fix on making woo commerce cart responsive on a mobile phone as it goes off the page to the right.
    On searching i found this CSS code that does fix the problem but i was just after a little help with tweaking it please. The products in my cart are all within the screen,

    but I would like to put a padding between each product in the cart if that is possible, can someone help me with how to do this please.

    This is the code i applied to get woo commerce cart responsive on mobiles from here: http://www.jeremycarter.com.au/optimising-woocommerce-checkout-for-mobile/

    /* 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 */

    Thank You

    https://wordpress.org/plugins/woocommerce/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi @jods, you may change this part

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

    Hope this help.

    Thanks Terrytsang but that moved everything closer, I also have this code as well:

    .woocommerce-page table.shop_table td {
    /* Behave like a “row” */
    border: 1px solid #d2d3d3;
    border-radius: 5px;
    background: #f3f3f3;
    margin-bottom:5px;
    position: relative;
    padding-left: 30% !important;
    }

    but what I want is to have just a little bit of a gap between items in the cart, just a little easier for older people to read what they have in there. if i adjust the margin-bottom it puts a padding around each section eg price, product, delete, subtotal rows, i only want padding in between each whole product, if that makes sense, thanks

    I worked out a fix for this and it works great this is the code I put in to create a space between each product in the cart:

    .woocommerce table.shop_table td.product-subtotal {
    margin-bottom: 20px;
    }

    Hope this helps someone

    Hi! Me too need help. My page http://mysite.com/cart/
    on my mobile device looks bad.

    .woocommerce table.shop_table.cart {
    }

    What do I need to write in styles?
    Thank you!

    http://www.jeremycarter.com.au/optimising-woocommerce-checkout-for-mobile/
    I am add this code:

    .woocommerce table.shop_table.cart {
        min-width: 250px;
    }
    /* 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 */

    Neeraj Kumar

    (@neeraj-jangir)

    I was also stuck in this page in mobile but now its look good.
    Thank you!

    I’m sure I’m a n00b and I used you gents solution to the problem with 320px with mobile screens, but this is the solution that worked for me. Chopping all the uneccessary stuff off the table as such:

    .woocommerce-page table.shop_table th.product-thumbnail {
    display: none !important;
    }

    .woocommerce-page table.shop_table td.product-thumbnail {
    display: none !important;
    }

    .woocommerce-page table.shop_table th.product-price {
    display: none !important;
    }

    .woocommerce-page table.shop_table td.product-price {
    display: none !important;
    }

    .woocommerce-page table.shop_table th.product-quantity {
    display: none !important;
    }

    .woocommerce-page table.shop_table td.product-quantity {
    display: none !important;
    }

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘I have found a woocommerce responsive cart solution’ is closed to new replies.