[Resolved] Show product images in cart page

[Pedro]

Hello!

I would like the cart page to show the image of the products that have been added to the cart.

How can I do it?

Thank you!

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

to display them on mobile try this:

.woocommerce-cart table.cart img {
    width: 60px; /* Change for desktop image size */
}

@media (max-width: 768px) {
    
    .woocommerce-page #content table.cart .product-thumbnail {
        display: block;
    }
    .woocommerce-page #content table.cart .product-thumbnail:before {
        content: '';
    }
   .woocommerce-page #content table.cart img {
       width: 80px; /* change for mobile image size */
   }
   .woocommerce-page #content table.cart .product-thumbnail {
    text-align: center !important;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello david! Thanks for the help.

I placed the CSS and the image is displayed in the mobile version.

However I would like to do the following:

– Enlarge a little more the image of the product in the desktop version.
– Reduce a little more the image of the product in the mobile version.
– Center the product image in the mobile version.

Thank you!!

[David]

I edited the CSS above, the two lines for changing the image size have comments beside them, just set the pixel size you want.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello david! You are the best, it worked perfect. Thank you!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

Hi, just so you know I just tried this and it works but you have to put !important at the end of each line.

Is that something that might have changed since this post?

Thanks.

[Elvin]

Hi Sam,

Hi, just so you know I just tried this and it works but you have to put !important at the end of each line.

Is that something that might have changed since this post?

Thanks.

The need for !important means the sequence of how your stylesheets are loaded is altered in a way where the custom CSS you’ve added loaded before the default WooCommerce CSS. This is not the case for everyone.

A wise man once said:
"Have you cleared your cache?"

[Sam]

Hi Elvin, could that be caused by the Autoptimzed minification plugin?

It is the only thing that could be doing that.

Thanks
Sam

[David]

Hi there,

combining / minifying CSS can mess with the order the CSS is printed. So it maybe a case that your custom CSS is being printed before the Mobile CSS Woo loads.

Woo is particularly painful as they use very long specific CSS selector strings, which makes overwriting them a pain. !important can be avoided if you can make the CSS more specific. But i wouldn’t be concerned about using !important in custom CSS that is overwriting a stylesheet.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

OK noted, thanks for the info.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts