[Resolved] Bug WooCommerce Cart Toggle

[alexis]

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?

[David]

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?

[alexis]

Perfect David, if you have it I take with pleasure

[David]

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.

[alexis]

Perfect! thanks

[David]

You’re welcome

[Author]

Posts