Shopingcart not responsive

s.hendriks
16 Posts
s.hendriks posted this 06 January 2016

The shopping cart page is not responsive. How do I solve this?

http://nlverb-wiyondong.savviihq.com/winkelmand/

The shopping cart page is not responsive. How do I solve this? http://nlverb-wiyondong.savviihq.com/winkelmand/
Vote to pay developers attention to this features or issue.
10 Comments
Order By: Standard | Newest
s.hendriks
16 Posts
s.hendriks posted this 08 January 2016

Some help?

Some help?
s.hendriks
16 Posts
s.hendriks posted this 12 January 2016

Please help us...

Please help us...
len
140 Posts
len posted this 20 April 2016

On a mobile phone, portrait mode, the cart table is not responsive. In Themler Desktop, Phone mode, it has a horizontal scroll bar. Also the product images are not responsive in the table.
In Themler I have tried setting the Display to Block for the Cart Table and Table with buttons, but this setting does not change anything, for a table it would normally with CSS split up the table.
Most people use a phone in portrait mode, can this be fixed please.
Thanks
LenW

On a mobile phone, portrait mode, the cart table is not responsive. In Themler Desktop, Phone mode, it has a horizontal scroll bar. Also the product images are not responsive in the table. In Themler I have tried setting the Display to Block for the Cart Table and Table with buttons, but this setting does not change anything, for a table it would normally with CSS split up the table. Most people use a phone in portrait mode, can this be fixed please. Thanks LenW
Support Team
Support Team posted this 21 April 2016

Hi,

Please provide a link to your site and probably some screen shots showing the issue.

Sincerely,
Hella

Hi, Please provide a link to your site and probably some screen shots showing the issue. Sincerely, Hella
len
140 Posts
len posted this 21 April 2016

www.ultimatefabrics.co.uk
Two screenshots attached. Portrait and landscape on a Samsung Galaxy S2.
The table is not responsive, and cut off in portrait mode.
The buttons could be underneath each other, the image if made smaller in portrait mode might help.
LenW

www.ultimatefabrics.co.uk Two screenshots attached. Portrait and landscape on a Samsung Galaxy S2. The table is not responsive, and cut off in portrait mode. The buttons could be underneath each other, the image if made smaller in portrait mode might help. LenW
Support Team
Support Team posted this 26 April 2016

Hi,

Woocommerce outputs Shopping Cart as table. The table is not fully responsive by default. And it cannot be fully responsive. Theme only applies general table styles to the cart table and cart controls.
I can only suggest adding the following code to solve the issue with images:

.woocommerce img, .woocommerce-page img
{
max-width: 100%!important;
}

This code can be added to the Themler Settings >> Additional CSS.

Thank you,
Olivia

Hi, Woocommerce outputs Shopping Cart as table. The table is not fully responsive by default. And it cannot be fully responsive. Theme only applies general table styles to the cart table and cart controls. I can only suggest adding the following code to solve the issue with images: <pre> .woocommerce img, .woocommerce-page img { max-width: 100%!important; } </pre> This code can be added to the Themler Settings >> Additional CSS. Thank you, Olivia
joshpell
23 Posts
joshpell posted this 29 September 2016

Yes this no-responive is a real pain (and a common complaint with woo) and even in themler there is virtually no control over the table (because as Olivia said it is a general table) so I found that you spend time getting the general table to where you like it, then use the code below as a starting point to make it play nice with in responsive mode. BE WARNED and BE PREPARED to spend a few hours with the code inspector and developer tools to get to a point where its acceptable and readable for a website user. Who knows maybe down the track this will change and life for the cart and checkout pages will become more pleasant.

Code source: https://gist.github.com/catchthemes/eec48957fbd3ed724c98

One side note IE9 does not like this much (table display as block)

/* START Make the WooCommerce Cart Table Responsive  for Mobile */
/* CSS published in http://www.jeremycarter.com.au/optimising-woocommerce-checkout-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 */

Yes this no-responive is a real pain (and a common complaint with woo) and even in themler there is virtually no control over the table (because as Olivia said it is a general table) so I found that you spend time getting the general table to where you like it, then use the code below as a starting point to make it play nice with in responsive mode. BE WARNED and BE PREPARED to spend a few hours with the code inspector and developer tools to get to a point where its acceptable and readable for a website user. Who knows maybe down the track this will change and life for the cart and checkout pages will become more pleasant. Code source: https://gist.github.com/catchthemes/eec48957fbd3ed724c98 One side note IE9 does not like this much (table display as block) /* START Make the WooCommerce Cart Table Responsive for Mobile */ /* CSS published in http://www.jeremycarter.com.au/optimising-woocommerce-checkout-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 */

Last edited 29 September 2016 by joshpell

Support Team
Support Team posted this 04 October 2016

Thanks for the code, hope it will help other users.

Sincerely,
Hella

Thanks for the code, hope it will help other users. Sincerely, Hella
athanaso
11 Posts
athanaso posted this 17 July 2018

can you give me the same code for virtuemart please ???? i have the same problem

can you give me the same code for virtuemart please ???? i have the same problem
Support Team
Support Team posted this 31 July 2018

Hi,

Please provide a link to your site, attach the marked screen shots showing what you need to fix and also explain how to get to that page on your site.

Sincerely,
Hella

Hi, Please provide a link to your site, attach the marked screen shots showing what you need to fix and also explain how to get to that page on your site. Sincerely, Hella
You must log in or register to leave comments