Product Images Not Showing On Cart For iPads View

Support
#1

Hello,

After updating my theme the product image no longer shows on the iPad or mobile. I found the thread below and fix the mobile but the image is still not showing on the iPad.

Also, I would like the X moved to the left-hand side above the pic on mobile and ipad. The X that takes the product out of your cart. If we can not move it could we make it a little bigger and or bolder? It is easily missed right now.

#2

Hey @odsadmin,

Thanks for writing in!

With the latest release of WooCommerce, they have collapsed the table base structure in the cart page when viewed in smaller screen. If the X button is quite small for you, please edit your custom style sheet (custom-min.css) and add this code:

a.remove {
    font-size: 30px;
    text-align: left;
}

@media (max-width: 768px){
  .woocommerce table.shop_table_responsive tr td, 
  .woocommerce-page table.shop_table_responsive tr td {
    text-align: left !important;
  }
}

We would love to know if this has worked for you. Thank you.

#3

Hello,
This did not allow the pic to show on my ipad.

I’m not sure if the code was supposed to make the X bigger and move it or allow the pic to show on the ipad. But it does not seem to have done either.

#4

Hey @odsadmin,

The code posted by Ruenel will not show the pic on iPad. The first part though should make the X or close icon bigger.

Before I give you the correct code to show the image on iPad, please note that our theme does not override those parts of WooCommerce therefore this issue is coming from WooCommerce itself and not our theme. With that said, after I give you the sample code, you will need to hire a WooCommerce developer to customize those parts further.

Here’s the sample code that should be added in X > Theme Options > CSS.

a.remove {
    font-size: 120px;
}

@media only screen and (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;
    }
}

The code guaranteed to work provided that you don’t have syntax errors in all your current CSS.

If the code doesn’t work on your end, please consult with a third-party developer to check your site for syntax errors.

Hope that helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.