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.
example image source:
https://MPFusa.org/custom-face-masks/
While I’m sure (re: hope) they have great data to back this up, 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.
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.
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
- Log into your WP Admin
- Go to the Theme Customizer > Added CSS (or similar place where your theme or system lets you put some custom CSS)
- Paste the code above & Publish
- Clear/Purge your site cache, if you have one