Optimising WooCommerce Checkout for Mobile

For an online store to be effective – to maximise its sales – it must work well on smartphones. WooCommerce for WordPress is a common online store system, but the checkout process is poor on smartphones. Why doesn’t the checkout fit on a smartphone screen? Because it uses tables that aren’t optimized for the 320 pixel width of a smartphone.

Mobile Use in Australia

The checkout experience can’t be ignored – between 30-40% of internet traffic is now conducted on mobile devices (such as smartphones and tablets).

People are five times more likely to abandon a task they are trying to complete if the website isn’t optimized for mobile use. If this is your website you just lost a sale.

In mid-2013, 63% of Australians owned a smartphone.

31% of smartphone users – equating to 17% of adults – only access the internet on their smartphone.

Tables, considered evil by some, are perfect for laying out tabular data (their original purpose before being hijacked for page layout until the mid-2000s). But they need help to display well on smartphones. The solution is to make a table responsive. The trick lies in the CSS display property, making the td element (the table cell), behave as display:block, instead of it’s natural display: table-cell.

I originally posted this in a CyberChimps forum, in response to someone’s question as to how to optimise the WooCommerce page for mobile – principally that the cart and checkout didn’t fit on the mobile screen. A table, being naturally not responsive, simply breaks out of the page.

My solution is actually an adaption of Chris Coyier’s Responsive Data Tables article, http://css-tricks.com/responsive-data-tables/.

Using this method allows the font size to remain at full size, which is good for smartphone viewing.

Disclaimer: the CSS could be overwritten by your theme’s styles

Before and After

WooCommerce cart page, before and after smartphone optimisation with table responsive design

WooCommerce checkout page, before and after smartphone optimisation

The CSS Code

The CSS code below can be pasted at the bottom of your theme’s stylesheet. Visit WordPress Dashboard > Appearance > Editor (http://yourWebsite.com/wp-admin/theme-editor.php) and it is usually the file the loads automatically (otherwise it is at the bottom of the right hand side list, Styles > style.css).

The media query can be tweaked. In this case I’ve used 600px, any bigger than that and the table will fit as per normal. You could use 480px, a common landscape screen size, or 568px (an iPhone5 landscape). Using 320px (common portrait smartphone) would be an oversight, as it would ignore landscape smartphone use.

Download CSS file

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

94 thoughts on “Optimising WooCommerce Checkout for Mobile

  1. Brilliant and simple solution, Jeremy. Just what I needed at 10:30 at night when I really didn’t feel like sorting out and creating the code on my own. Thanks you for sharing!

    Side question: it seems like more and more resources are discouraging the use of “!important” in CSS. Is it necessary to use it as you have, or could you rather append “body” to the beginning of the rule and eliminate your need to use “!important”? Example:

    body.woocommerce-page .cart-collaterals .cart_totals th,
    body.woocommerce-page .cart-collaterals .cart_totals td {
    border:0;
    }

  2. Hey Derek, yeah in general using !important is pretty lazy,and can be a cumbersome to work with when you start using multiple occurrences.

    Prepending with ‘body.” would work, and is an elegant alternative, and it works.

  3. Great solution indeed, however. The option to delete a product from the shoppingcart doesnt function anymore when you make the screen size smaller. I haven’t found a solution yet.

    • ah yes indeed. Above code is fixed now. The pseudo before element was sitting in front of the delete button, rendering it ineffective.

      Line #25
      .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;
      }

      Change width: 45%; to width: 25%;
      At 45% it blocks button. At 25% it does not.

  4. Hi Jeremy,

    Thanks for the code, it works quite well for me except there are some minors problems here.

    1) When view PORTRAIT on my mobile, the “update cart” tab seems to overlap with the “proceed to checkout” tab. For Landscape view, it works beautiful. I have tried to tweak around with the media screen, but the problem persists.

    2) Also, like Bart had mentioned as above, the option to delete a product from the shoppingcart doesnt function anymore when you make the screen size smaller.

    Please advise.

    Cheers,
    Melvin

    • Thanks. Buttons have been improved, yes the text in them was too long.

      Above code has been updated.

      /* 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%;
      }

  5. Have made some amendments to code:
    – fix delete button being inoperative
    – improve UPdate Cart and Proceed to Checkout buttons
    – remove cross sells, they interfere with flow between cart and cart totals + shipping calculator. Better solution would be to remove in php but css is easy. Even better solution would be to put cross sells beneath cart totals and shipping calculator.

    Above code on page and download file have been updated.
    If you have already used the code and made changes to it, just:

    1. amend line #25
    Line #25
    .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;
    }

    Change width: 45%; to width: 25%;

    2. Add new lines #168 to #219

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

  6. Hi Jeremy,

    I just want to thank you so much for this code, it’s exactly what I was looking for and it works flawlessly! Very much appreciated.

  7. Awesome Jeremy! It works great! Very nice solution.
    Isn’t better to add this code to the child theme stylesheet?
    I mean, if you update woocommerce plugin, doesn`t lost the changes on woocommerce stylesheet?
    Thanks!

  8. Hi Guys,

    Exactly what file is the code supposed to go in? There are so many woocommerce stylesheets. Anyone have any idea the exact file path?

    Thanks in advance for your help!

    Matt

  9. Thanks Jeremy!

    Does having a CDN in place effect this and if so how would you go about implementing the above so that it displays correctly with a content delivery network in place?

    Matt

    • Using CDN with WordPress should have no effect. (It won’t make any difference).

      The only issue would be if you have manually put your CSS files onto a CDN, in which case you would need to do so again. But since you asked I very much doubt you did that, so copying your CSS file should be automatic.

    • Looks like an issue with this already existing woocommerce css (specifically the overflow setting):

      What’s your url? Although maybe not avail so hence the screenshot. You could try putting this at the bottom of your theme css file:
      table.cart th,
      .woocommerce table.cart td,
      .woocommerce #content table.cart th,
      .woocommerce #content table.cart td,
      .woocommerce-page table.cart th,
      .woocommerce-page table.cart td,
      .woocommerce-page #content table.cart th,
      .woocommerce-page #content table.cart td {
      overflow: hidden;
      }

      (you may not need the ‘ !important’)

    • Sorry. Ignore my last CSS suggestion. This should work:

      table.cart th,
      .woocommerce table.cart td,
      .woocommerce #content table.cart th,
      .woocommerce #content table.cart td,
      .woocommerce-page table.cart th,
      .woocommerce-page table.cart td,
      .woocommerce-page #content table.cart th,
      .woocommerce-page #content table.cart td {
      overflow: hidden;
      }

  10. Hi Jeremy

    Yes that worked! Thanks a lot!

    Though there is some text Like the last charachter “Y” in the “Quantity” is overlapped little bit by the right side of content if you notice: http://screencast.com/t/2fVilM6b1HiN

    Also is there any way to make the calculate shipping button like the Proceed to checkout and other buttons?

    • Option 1 (easy, but less then ideal):

      You can remove the last CSS instruction. It sets it to not display. It’s not ideal though, as it interferes with the flow (people probably won’t see the Cart totals lower down anymore)

      Remove this:
      /* 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;
      }

      Option 2, more difficult but better end result:

      The better option is to move the cross sells beneath all cart elements.

      To do this (thanks to @mattmikulla at http://wordpress.org/support/topic/most-basic-customisation-seems-impossible):

      1. Create a woocommerce directory in your theme at the root if you haven’t already.

      2. Go to the woocommerce plugin folder (/plugins/woocommerce/) and locate a folder called templates

      3. Navigate to the cart directory within the templates directory and find the cart.php template file (/plugins/woocommerce/cart/cart.php)

      4. Copy that file to your woocommerce directory within you theme using the same directory path (/woocommerce/cart/cart.php) – Meaning you have to have a folder of cart within the woocommerce folder

      Remember that this copy of cart.php now overrides the file in the plugin directory.

      5. Look at the bottom of the cart.php file that you are now editing. At the very bottom is the following code:

      <div class="cart-collaterals">

      <?php woocommerce_cart_totals(); ?>

      <?php woocommerce_shipping_calculator(); ?>

      <?php do_action( 'woocommerce_cart_collaterals' ); ?>

      </div>

      The part that says woocommerce_shipping_calculater can be moved around.

      Do this instead:

      <div class="cart-collaterals">

      <?php woocommerce_shipping_calculator(); ?>

      <?php do_action('woocommerce_cart_collaterals'); ?>

      <?php woocommerce_cart_totals(); ?>

      </div>

      Make sure you also do option 1, otherwise the cross sells still won’t appear.

      • A slightly more complex approach, to optimise the desktop & tablet versions AND the mobile version, duplicate the ‘do_action( ‘woocommerce_cart_collaterals’ );’, like this:

        <div class="cart-collaterals">

        <div class="hide-on-mobile">
        <?php do_action( 'woocommerce_cart_collaterals' ); ?>
        </div>

        <?php woocommerce_cart_totals(); ?>

        <?php woocommerce_shipping_calculator(); ?>

        < <div class="hide-on-desktop hide-on-tablet"> <?php do_action( 'woocommerce_cart_collaterals' ); ?> </div> </div>

        Then add this to your theme's stylesheet:

        @media screen and (max-width: 767px) {
        .hide-on-mobile {
        display: none !important;
        }
        }

        @media screen and (max-width: 1024px) and (min-width: 768px) {
        .hide-on-tablet {
        display: none !important;
        }
        }

        @media screen and (min-width: 1025px) {
        .hide-on-desktop {
        display: none !important;
        }
        }

  11. Awesome!!!!! Thank you.

    Is there are way to move the delete row and make another column in the Quantity row? Or have the delete row at the bottom?

    When there are multiple products in the cart its hard to see what product the delete button is for.

    Or perhaps have a separate table for each product so there is a space between products.

    What do you think?

  12. This is amazing, I am a very new at coding and still managed to be able to do this. Thank you so much for all your hard work, you have definitely saved me a lot of time.

  13. Hi,

    First of all thank you so much for the wonderful feedback. I still seem to be having issues though. I added the CSS to the appropriate place, however, when on mobile view the initial cart screen (where it gives totals and I can delete products etc…) is way messed up. The tables seem to be almost stacked on top of one another. When I hit proceed and I get to the billing info it looks perfect, but the main cart is still giving me trouble on mobile. Help! Any wisdom you can give me would be 1000 times appreciated!

    -Jordan

  14. Thank you. You saved my butt. Ran into the issue late at night with the site needing to go live the next day. Worked like a charm.

  15. Dear Jeremy,
    Thank you very much for sharing this, you may have saved me from going bald and pulling my hair out – not to mention the hours of frustration you save me too. – it works great!!!

    Thank you kindly,
    Carl, Dublin Ireland.

  16. Hello.

    Thank you for this. Im using the latest woocommerce/WP and cant get the css to work. Any one else with same issue?

  17. @Robert — working fine for me, you could try using Jeremy’s tip above of adding ‘body’ in front , so this:

    .woocommerce table.cart td,

    Becomes this:

    body.woocommerce table.cart td,

  18. Error in previous comment, fixed below:

    @Robert — working fine for me, you could try using Jeremy’s tip above of adding ‘body’ in front , so this:

    .woocommerce table.cart td,

    Becomes this:

    body.woocommerce table.cart td,

  19. Thanks so much for this, it’s saved me!
    Just a few tiny layout issue I’m having…
    1. The Titles “DELETE”, “PRODUCT”, “PRICE” etc are not displaying with left alignment, it looks like they are centring which makes is look messy.
    2. Where more than one item is in the cart, there is no space between the items, making it confusing where the info from one item finishes and the next item begins. I see on your example you have a gap.

    Thanks again, really appreciate your code!

    • Emily I put this code in and it put a padding or a space between products in my cart and such making it easier to read, the space i put in was after sub total and before the delete

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

      hope that helps

  20. hi ,

    this is not working anymore for the new version of woocommerce … can you please try to updates… really not working when i applied it ..

  21. I’m with Ruth – this was a HUGE LIFESAVER !!! Thank you Jeremy – this made ALL THE DIFFERENCE to my project. I tweaked things out a little bit but this gave me a huge huge huge headstart. Thank you beyond words!!!!

  22. Can This be updated for Woocommerce 2.3.7

    The provided CSS is not fully compatible with the newest version of Woocommerce.

    SIDE NOTE: Why the F&#* doesn’t WooCommerce ship with a responsive cart , INSANE ! Not your fault. Just wanted to vent.

    Richard

    • Updated some of the classes and added one or two new ones for personal use – should work with current version of wooCommerce now. Try it out. Thanks again to the author for this code. Saved a lot of time, cheers.


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

  23. This is awesome, thanks!

    If you want to make the design look slightly better (rounded corners on the table rows and space out the rows a bit) use this piece of code instead:

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

  24. Woothemes ought to pay you for this awesome css so they can integrate it into their core files!

    I removed 1 of your declarations because its display:block in this line was breaking my Subtotal, Shipping, Tax, and Total into 2 blocks (1 for the field name, 1 for its value), and I wanted them to be on the same row.

    Is there a better way I could have done this?

    this is the declaration I removed:

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

  25. HI !
    Tx jeremy for your awsome post !!
    Help us a lot

    We just still have an issue on android brower
    When a field is selected on the checkout
    we lose your css
    It goes back to the original theme css (with the tables not resized..)

    Nobody has encountered this issue ??

    Tx for your help !!

  26. You are a legend, and I agree with someone above, WooCommerce should have this included in their code or as an extension and pay you a commission! You saved my Friday night! 😀

  27. Very cool. Thanks for this. Saved Me tons of time. A couple of suggestions. I used less to include .clearfix to the same block that defines the table items as blocks. If you have floating elements, this would be a great addition. Secondly, if you are using bootstrap’s bordered table styles, you might need to make first child elements and last child elements include a border for either left or right.

    Something like

    “`
    .table-responsive>.table-bordered>tbody>tr>td:first-child, .table-responsive>.table-bordered>tbody>tr>th:first-child, .table-responsive>.table-bordered>tfoot>tr>td:first-child, .table-responsive>.table-bordered>tfoot>tr>th:first-child, .table-responsive>.table-bordered>thead>tr>td:first-child, .table-responsive>.table-bordered>thead>tr>th:first-child, {
    border-left: @brand-border;
    }

    .table-responsive>.table-bordered>tbody>tr>td:last-child, .table-responsive>.table-bordered>tbody>tr>th:last-child, .table-responsive>.table-bordered>tfoot>tr>td:last-child, .table-responsive>.table-bordered>tfoot>tr>th:last-child, .table-responsive>.table-bordered>thead>tr>td:last-child, .table-responsive>.table-bordered>thead>tr>th:last-child {
    border-right: @brand-border;
    }
    “`

    Otherwise. Spot on.

  28. any one using responsive-mobile theme here by cyberchimps?
    my checkout and account does not show on mobile devices even after using this trick, but I have seen the effects on cart page in mobile. Is it my theme?

  29. Thanks for this help :D, but as a result i couldnt get it onto either the style.css file on my theme or woocoormerce, i placed it directly onto the and it worked perfectly. Will find a better way to make it work without that . Thanks again guy , U r a life saver

  30. Fantastic work!
    I just got one problem. I don’t want my_account_order table to be affected.
    How to do it?
    Thank you in advance 🙂

  31. Hi Jeremy,

    we are using the theme the7.2 in combination with woocommerce. We want our products to be full width on the smartphone, so that we have just one product per row. We tried your code but unfortunately it hasn’t solved that problem. Hope you can help us.

    Website: http://www.test.citywhispers.de is still pasword protected with cw2015test. Take a look at category: Neu_kategorie, there we have woocommerce in use.

    Best regards
    Tobias

  32. Hi Jeremy,
    we are using the theme the7.2 in combination with woocommerce. We want our products to be full width on the smartphone, so that we have just one product per row. We tried your code but unfortunately it hasn’t solved that problem. Hope you can help us.
    Website: http://www.test.citywhispers.de is still pasword protected with cw2015test. Take a look at category: Neu_kategorie, there we have woocommerce in use.

    Best regards
    Tobias

  33. i used this code to put a space between products in the cart, it puts a space after the sub-total and before the delete button, makes it easier to read.

    .woocommerce table.shop_table td.product-subtotal {
    margin-bottom: 20px;
    }
    hope that helps someone 🙂

  34. HI
    great work !
    anybody having issue with the shipping fields ??
    the cart is ok but when the user has to fill in the shipping fields the table fields expands making it very difficult to fill the form..
    Someone help !!!
    TX !

  35. Hi,

    I have a multilingual site, tell how to translate into other languages of these lines

    DELETE” , “IMAGE” , “PRODUCT” etc.

  36. “Button “Delete” does not work . It is not active. What could it be?”

    The updated code – solved the problem!!!

    Help me plz “translate into other languages of these lines

    DELETE” , “IMAGE” , “PRODUCT” etc.”

  37. @Maxim

    If you just don’t label the data. Omit the labels below:

    /*
    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”;
    }

    It should be okay.

    I am using WPML and have English and Chinese. Without these labels the boxes populate with the original labels in the correct languages.

    This code has been saving people’s asses for years now. It’s incredulous that woocommerce still has such a terrible mobile cart experience. In China, if it can’t be viewed on mobile, it may as well not exist.

    Kudos Jeremy

  38. Everything worked minus a few sizing issues, which I believe I got to work. My only issues with the woocommerce cart page is the checkout button partially covering both the subtotal and total (more the subtotal). Is there a code to lower the checkout button, so it’s not in the way? I’m using 320 because on my mobile, it looks good for both portrait and landscape. Also another issue is the ‘apply coupon’ button is missing the “n” in ‘coupon’ for portrait, but not landscape.

    This is what my css looks like currently.

    /* START Make the cart table responsive */
    /* http://css-tricks.com/responsive-data-tables/ */
    @media screen and (max-width: 320px) {

    /* 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: 100%;
    }
    }

    /* 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.0em;

    }

    #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: 1.0em;
    }

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

  39. Hi Folks – firstly a large THANK YOU to Jeremy for getting this thing started and to all of you who have added tweaks to the code. I am using the Divi theme with a slide-out panel for mobile users and this code has helped get the panel to look better than the rubbish layout that comes with WooCommerce. Only one teeny issue now – I want to remove both the entire line for the coupon entry from the cart page because it’s duplicated on the checkout page. Anyone know how I would do that? Any help gratefully accepted.

  40. Hello and thank you so much for the code! It works perfectly!!

    I would love to add the label “Order Summary” at the top of the cart page if possible? Could you tell me how to accomplish that?

    Also, is there a way to align the product image to the left of the product description?
    Thanks so much..

  41. This post created on 2013 and I don’t know if Jeremy still check the comments. But I hope Jeremy/somebody can help me about this…

    The CSS Code works perfectly for Store Theme however the desktop version still looks messed up. I know the above code is customized for smartphone display. So, is there any way to tidy up the desktop version as well?

    Thank you

  42. Thank your for your code, I have a minor sugesstion to improve it:
    replace the parts with the before-stuff from like content: “IMAGE”; to content: attr(data-title);
    This way also also other languages than english are supported.
    This way the content is removed from the CSS and not static anymore.

  43. I did it and nothing happens. I embed the code into my custom css files also and even overriding woocommerce-smallscreen.css

    Help please, thanks !

  44. You’re an absolute legend for sharing this!

    It looks like in the latest version of WooCommerce, the css rules have changed, so in order to unhide the thumbnail, product price and quantity you also have to add this rule:

    @media only screen and (max-width: 767px) {
    table.cart .product-thumbnail, table.cart .product-price, table.cart .product-quantity {
    left: inherit !important;
    position: inherit;
    }
    }

    There might be a better way to unhide this but it worked for me.

  45. Hiya. Hey….I want the layout of this cart to ALWAYS be ‘stacked’ — like you would see when it’s on mobile — all the time. On desktop, I want the Woo Commerce checkout page to have a stacked layout. No matter what you are using to view the checkout page. Whether you are on mobile, tablet, or desktop. I only want the stacked layout for the cart page for my woo commerce storefont plugin. Responsive of course…it has to be responsive. I just never ever ever want the “two column layout” to ever be used. Not ever. 😀 What do I have to do to get it to always show the stacked layout with checkout for Woo Commerce Storefront? I’m soooo not a coder, lol. So any ‘tweaks’ to this would be great. I’ve just pasted it into the stylesheet for Storefront itself. At the bottom. It renders fine on mobile with the latest edition (from what I can tell so far…that may change! LOL)….now, all I need is to know how to keep it ‘stacked’ no matter the screen size. Can anyone help me? Post a full version of the code perhaps? I HAVE NO IDEA where I’d make the change (what line, etc.) so….if someone responds with, ‘just change the ___’ please just be as specific as possible…please tell me where to make changes specifically, the sequence in the code, and how often that change should be placed (like…ALL ___ lines, or some of them, or etc…). Sorry for the noobishness. 🙂 Thanks in advance for any assistance!

  46. Many thanks to the author of style! As someone here said, it’s saved a lot of time.

    Here I did some little changes is style may be some will like it.

    /* 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: 45%;
    padding-right: 10px;
    white-space: nowrap;
    }

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

    td.product-quantity {
    text-align: -webkit-left!important;
    }

    td.product-subtotal {
    text-align: -webkit-left!important;
    }

    /* 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 cart table responsive */

Leave a Reply

Your email address will not be published. Required fields are marked *