Customise Cart Images for Web and Mobile

Support
#1

Hi! I’ve searched through the forums to try and find how to fix this, but ultimatley I need to;

  • Reduce the size of the thumbnail on web/computer
  • Make sure it’s not tiny to view on mobile
  • and add product titles to products on a mobile cart (they show on a computer fine)

I have found this code, but it conflicts with another code I’m trying to use to show titles (that I found on another post)

@media only screen and (max-width: 979px) {
.woocommerce .cart.shop_table .product-thumbnail img, .woocommerce-page .cart.shop_table .product-thumbnail img {
_ width: 50%;_
}
}

with this:

@media (max-width: 979px){
.woocommerce .cart.shop_table .product-name, .woocommerce-page .cart.shop_table .product-name {
_ display: block;_
}
}

For the moment I’ve just disregarded them both :slight_smile:

#2

Hi There,

I couldn’ find your shop or cart page? Could you please provide them?

Thank you.

#4

I’ve edited my post to include a link above.

#5

Hello There,

Please use this code:

@media (max-width: 979px){
  .woocommerce .cart.shoptable .product-name, .woocommerce-page .cart.shop_table .product-name {
    display: table-cell;
  }
}

This will only affect the the shop table in the cart page.

#6

It works - but I don’t want the images on a PC computer to be so big and the thumbnail images on a mobile are still little.

Any way I can increase the mobile thumbnail AND decrease the web/PC thumbnail?

#7

Hello There,

To make sure that the image is decent enough, please make use of this code:

.woocommerce .cart.shoptable .product-thumbnail img, 
.woocommerce-page .cart.shop_table .product-thumbnail img {
   min-width: 90px;
   max-width: 160px;
}

Feel free to adjust the minimum and maximum width of the image.

#8

Do I use them together or disregard the first code?

#9

Hey There,

Please remove this:

@media only screen and (max-width: 979px) {
 .woocommerce .cart.shoptable .product-thumbnail img, .woocommerce-page .cart.shop_table .product-thumbnail img{
  width: 50%;
 }
}

And use the code I gave.

#10

Thanks - works perfectly in making the thumbnails on mobile a good size. But it deletes the product titles in the cart (on mobile only, product titles are still there on PC)?

#11

Hello There,

I only mentioned to remove this:

@media only screen and (max-width: 979px) {
 .woocommerce .cart.shoptable .product-thumbnail img, .woocommerce-page .cart.shop_table .product-thumbnail img{
  width: 50%;
 }
}

And this code should still be added in your custom css.

@media (max-width: 979px){
  .woocommerce .cart.shoptable .product-name, .woocommerce-page .cart.shop_table .product-name {
    display: table-cell;
  }
}

Most likely, you will need something like this:

.woocommerce .cart.shoptable .product-thumbnail img, 
.woocommerce-page .cart.shop_table .product-thumbnail img {
   min-width: 90px;
   max-width: 160px;
}

@media (max-width: 979px){
  .woocommerce .cart.shoptable .product-name, .woocommerce-page .cart.shop_table .product-name {
    display: table-cell;
  }
}

Hope this is not confusing for you.

#12

Perfect!! Thank you, I’m trying to do it quickly which isn’t helping either of us.

All fixed, appreciate your support :slight_smile:

#13

We are delighted to assist you with this.

Cheers!

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.