No product images or titles in mobile cart

Ying,
Thank you so very much! I found the image CSS just a minute ago in here, so happy to have the title as well.

THANK YOU!!!! 🙂

Hi Ying,

Can I please bother you again, please?

Here are the 2 codes I am using. One from you and the other I found from David on this site. Put together, they don’t look nice on my iphone – but they do work, so thank you.

I am not a coder. Would it be possible for you to help me clean this code up so that the product image and title all fit on a single line in the cart and look nice?

I appreciate you so much,
Catherine

@media(max-width: 768px) {

.woocommerce #content table.cart .product-thumbnail,
.woocommerce table.cart .product-thumbnail,
.woocommerce-page #content table.cart .product-thumbnail,
.woocommerce-page table.cart .product-thumbnail {
display: block !important;
text-align: left !important;
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
width: 50px !important;
}
}

https://www.sportswreathshop.com/
Thank you so much, Ying! 🙂

Hi Ying,

This is not working. Can you please give me the complete code, please? The code directly above does not include a title. I need this to look professional, please. Customers need to see in the cart the title, image, quanity and price of what they are buying all on a SINGLE line. Just like on dekstop. My Customers order up to 50 different items and this is making the mobile cart page rigiculously long.

Can you please help me? I so appreciate it. Thank you, Catherine
:
This is what I am using now from the above that still does not work
@media(max-width: 768px) {
.woocommerce-cart tr.woocommerce-cart-form__cart-item.cart_item {
display: flex !important;
flex-wrap: wrap;
}
.woocommerce-cart td.product-thumbnail {
width: 30%;
}

.woocommerce-cart th.product-name {
width: 70%;
}
.woocommerce-cart td.product-remove {
width: 100%;
}
.woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before {
content: unset !important;
}
}

Ying,

This is what my cart page looks like for a product using the code:

Line 1 : product image, product title
Line 2: product price, product quantity
Line 3: total price for the product

Is there a way that these 3 lines can display in ONE SINGLE LINE?

My Customers order 25-50 diffent products at a time. The mobile cart is ridicuolous too long with each product needing 3 lines.

Is there code that can do this, please? I have searched the web and can’t find this. And if this can’t be coded, do you recommend a plugin that does this?

Thank you for your help,
Catherine

Here is the COMPLETE code I am using that produces 3 lines for 3 EACH product:

@media(max-width: 768px) {

.woocommerce #content table.cart .product-thumbnail,
.woocommerce table.cart .product-thumbnail,
.woocommerce-page #content table.cart .product-thumbnail,
.woocommerce-page table.cart .product-thumbnail {
display: block !important;
text-align: left !important;
}

#add_payment_method table.cart img,
.woocommerce-cart table.cart img,
.woocommerce-checkout table.cart img {
width: 100px !important;
}
}

@media(max-width: 768px){
.woocommerce table.shop_table_responsive tbody th, .woocommerce-page table.shop_table_responsive tbody th {
display: block !important;
}
}

@media(max-width: 768px) {
.woocommerce-cart tr.woocommerce-cart-form__cart-item.cart_item {
display: flex !important;
flex-wrap: wrap;
}
.woocommerce-cart td.product-thumbnail {
width: 30%;
}

@media(max-width: 768px) {
.woocommerce-cart tr.woocommerce-cart-form__cart-item.cart_item {
display: flex !important;
flex-wrap: wrap;
}
.woocommerce-cart td.product-thumbnail {
width: 30%;
}

.woocommerce-cart th.product-name {
width: 70%;
}
.woocommerce-cart td.product-remove {
width: 100%;
}
.woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before {
content: unset !important;
}
}