Tag Archives: CSS

CSS Tip: Show Your WooCommerce Product Thumbnails In The Cart on Desktop and Mobile

For some reason WooCommerce has decided the default styles for the cart thumbnails should be very tiny or completely gone all together.  This leaves you with just text in the cart, which isn’t always what you want. To show the images, you can add some CSS to your WP settings or theme CSS file to always show the product images in cart.

example image source: 
https://MPFusa.org/custom-face-masks/

While I’m sure (re: hope) they have great data to back up the removal of images in the cart, some products need to be seen the full way through for a customer to feel good about what they have in their cart being the right stuff. If you agree, then this code snippet is for you. (copy/paste)

CSS Code:

/** MyStyle: Show thumbnail in cart larger than default 32px **/
.woocommerce-cart table.cart img {
width: auto;
min-width: 32px;

max-width: 100px;
}
@media(max-width:768px) {
/** Show thumbnail row in cart on mobile **/
.woocommerce-page table.cart .product-thumbnail {
display: inline-block !important;
}
/** hide colon above thumbnail for mobile **/
.woocommerce-page table.cart .product-thumbnail:before {
display: none;
}
}

How to Apply This Code

  1. Log into your WP Admin
  2. Go to the Theme Customizer > Added CSS (or similar place where your theme or system lets you put some custom CSS)
  3. Paste the code above & Publish
  4. Clear/Purge your site cache, if you have one

Conversion 101:
Custom Products Should Always Have a Thumbnail in the Cart

This is especially true with custom products, where you may have a few custom designs in your cart with the same product title, and the only recognizable difference is what each design looks like. For this reason, almost every MyStyle enabled site should override the default WooCommerce or theme CSS to show the thumbnail of the user’s creations in the shopping cart. You can do this very easily with a quick CSS tweak.