-
-
Hello – I’m once again suddenly having issues with the “cart totals” table on the cart page. The right column (showing the shipping options, subtotal, etc.) is suddenly too small, and the options are not showing on a single line. For example, it looks like:
Priority Mail
Express – $7.50The left column of the table (with the “shipping” text) is clearly much larger than it needs to be, and if it were smaller the information in the right column would fit on one line. Is there a simple way to change the width of the right column so that it is responsive and always the correct size to fit items on a single line, eg. –
Priority Mail Express – $7.50
– and just push the left column over when necessary?
Thanks!
-
Please use this custom code to extend the right-column and font-sze:
.woocommerce .cart-collaterals .cart_totals tr td{ width:17%; font-size:20px; }
Thanks
-
Ludjon –
Thank you! That didn’t do it initially, but I adjusted it to width:70%; font-size:14px;
and that is now working for laptops/tablets.However, it’s still scrunched up for mobile devices, which makes the UX really unpleasant. Most of our customers are visiting us on their mobile devices, so it’s imperative that the checkout experience be simple and easy to read – which it isn’t right now. Is there any way to make the cart table responsive, so that the column widths and/or font size adjusts for mobile devices depending on the screen size? We need each line (shipping options, address, etc.) to appear on one line only.
We do have this other custom CSS already, in case that is causing conflict:
.woocommerce-cart .woocommerce form { width: 100% !important;}
.woocommerce-cart .woocommerce .cart-collaterals { width: 100% !important;}and
.woocommerce-cart .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
width : auto;
}.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table {
float: right;
padding: 6px 10px 0px 10px;
}Thanks!
Rebecca -
Are u talking about Cart Totals?
I checked it on the mobile and looks good. I can’t find for example an address row there. Please can you send me a screen image so I can better understand which section to fix?
Thanks
-
Ludjon –
Yes, I’m talking about the cart totals (specifically, the right column of the cart totals table). In the cart page if you click on “calculate shipping” to add an address, or if someone is visiting the site again after purchasing in the past and their address is automatically populated, then the shipping options and shipping address appear – and they don’t fit. It appears that there’s a wide margin to the left and right of the cart totals table – if that were reduced, I imagine that could help.
Rebecca
-
Please add this code:
@media (max-width:767px){ .shop_table_responsive td.shipping{ width: 100%; display: flex; padding-right: 0px !important; } .shop_table_responsive td.shipping form{ width:100% !important; } }
- This reply was modified 3 years, 10 months ago by Ludjon.
-
That didn’t work. Did I add it to the wrong spot?
-
I am trying to log-in to your website but credentials listed on your profile didn’t help me.
The code I have sent you works only on small devices. So, please make sure to check it on small devices.
Also, make sure you have cleared the cache or open page with incognito mode.
If this doesn’t help you, please add !important to all CSS lines.
If nothing helps, please update the credentials to check it for you.
Thank You
-
Ludjon – I’ve been testing this on my Pixel smartphone, so it’s’ definitely a small device. I definitely cleared the cache before testing. I tried adding !important and that didn’t help.
I’ve updated/refreshed the staging site so you should be able to login with the credentials now. Thank you!
-
-
Ludjon – I’ve cleared the cache and checked on two different devices (I’m checking the /wp-staging site, which is where I’m assuming you made the changes) and the lines are still broken up even when there’s not a lot of text. Can you send me a screenshot of what it looks like when you test it (and feel it looks great), so I can make sure I’m clearly communicating?
-
You must be logged in to reply to this topic.