Mobile Cart Not showing items

[Matt]

Desktop cart view shows my product images but in mobile view I don’t see them?

View post on imgur.com

Also is there anything besides shrinking my logo and changing the indexing of the logo and menu I can do to fix the small screen squishing my menu items under my logo issue for the small screens? Some mobile screens are so large in portrait mode it almost makes the stuff look too far to the right like it does on a large desktop monitor as well. Then you have some older mobile phones that have small screens that it hides everything. How should I fix this? https://imgur.com/a/EeRb2E9

[Leo]

Hi there,

Just checked your site on my phone and didn’t notice the issue:
https://www.screencast.com/t/l6kwhfsF66q

Have you fixed this?

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

[Matt]

Yes it is still broke. I checked on my Samsung Galaxy 9+ I opened firefox and the /cart page doesn’t show my product pictures in the cart either. I was using the build in mobile view on wordpress/customize the first time I noticed it and took a screen shot because they weren’t showing up on it either. I downloaded responsive viewer plugin for chrome and took screen shots of what each phone sees. https://imgur.com/a/HW3rIeo

[Leo]

Just tested again using Chrome simulator and still not getting the issue.

Are you still referring to the product title here?

The product image doesn’t show by default on mobile.

None of your screenshots are showing the cart on mobile?

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

[Matt]

No the problem was I thought mobile was suppose to show an image of the product you’re ordering on the cart page. You say it doesn’t show by default. Is there a reason why? Is there a way to show the cart content images on cart page on mobile?

[David]

Hi there,

Woocommerce hides them by default on mobile.
You can unhide them and change their size using this CSS:

@media(max-width: 768px) {

    .woocommerce #content table.cart .product-thumbnail,
    .woocommerce table.cart .product-thumbnail,
    .woocommerce-page #content table.cart .product-thumbnail,
    .woocommerce-page table.cart .product-thumbnail {
        display: block !important;
        text-align: center !important;
    }

    #add_payment_method table.cart img,
    .woocommerce-cart table.cart img,
    .woocommerce-checkout table.cart img {
        width: 50px !important;
    }
}

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

[Matt]

Well it works kinda… https://imgur.com/a/itCf3Xr
Any way to make those images align center or left?

[Leo]

Edited David’s CSS to align center:
https://generatepress.com/forums/topic/mobile-cart-not-showing-items/#post-1309852

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

[Matt]

Fixed thank you!

[Leo]

No problem 🙂

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

[Author]

Posts