Archived topic
Bug WooCommerce Cart Toggle
5 replies · Started by alexis on March 13, 2023
Hello I have a display bug on the woocommerce cart? Do you have a solution ?
The images are not displayed correctly + title shifted
Another question: is it normal that on mobile the images of the shopping cart page is a remove class?
Hi there,
1. Woocoomerce doesn't like non square images :)
try adding this CSS:
.menu-bar-items .woocommerce.widget_shopping_cart .cart_list li img {
height: 70px;
object-fit: contain ;
}
2. Yeah, woos smallscreen.css removes the thumbnail image from the cart on mobile.
You need some CSS to put it bacK?
Perfect David, if you have it I take with pleasure
Try this CSS:
.woocommerce-page #content table.cart .product-thumbnail {
display: block;
order: -1;
flex: 1;
text-align: left !important;
}
.woocommerce-page #content table.cart td:not(.product-thumbnail):not(.product-remove) {
flex: 1 0 100%;
}
.woocommerce-page #content table.cart .product-thumbnail:before {
display: none;
}
@media(max-width: 768px) {
.woocommerce-cart-form .woocommerce-cart-form__contents .woocommerce-cart-form__cart-item {
display: flex;
flex-wrap: wrap;
}
}
I had a bit of a tidy up and repositioned the remove icon too.
Perfect! thanks
You're welcome