Support » Plugin: WooCommerce » Product thumbnail not showing up in cart (Storefront Theme)

  • Resolved Zirngibism

    (@zirngibism)


    Hi,

    My product images are not showing up in the cart. When inspecting the source, it appears there isn’t even a place for the image (as opposed to it trying to load an image and not being able to find it).

    I this with the “Boutique” theme as well, and same issue. This makes it seem like it’s a Woocommerce issue and not a specific theme thing.

    I know my different thumbnail sizes are being generated. They’re in the appropriate directories as far as I can tell. I have uploaded a “featured image” for the product, as well as images for product variations. And yet, no image next to the product in the cart!

    Could this be an issue with SSL certificates? I have “force SSL in checkout” specified, but I don’t have SSL active in my actual “cart” page.

    I’ve tried going into the code to see where the image is generated in the cart, and have not found it. (I don’t really know Javascript or PHP so I’m over my head here.)

    I’ve tried deactivating plugins and it hasn’t helped.

    I thought this was supposed to be default for the free version of Storefront. It’s working fine in the demo. Or are cart images only available in the expansion?

    This is driving me crazy so any help would be much appreciated.

    https://wordpress.org/plugins/woocommerce/

Viewing 14 replies - 1 through 14 (of 14 total)
  • My cart images were fine in my normal theme until I switched to Storefront, then, as you say, they disappeared. I was able to get them to show with this custom css:

    table.cart .product-thumbnail {display:inline-block}

    I don’t think Storefront has a custom css settings, so you can use a plugin like this one to add the css:
    https://wordpress.org/plugins/simple-custom-css/

    I think the force ssl in checkout only applies to the checkout page, not the cart page. Anyway I enabled it and the above css still worked on the cart page.

    If you don’t get it going, please post the url for your site.

    Thread Starter Zirngibism

    (@zirngibism)

    Hi, thanks so much for the help, lorro– you’re awesome! This indeed worked… though with a minor issue.

    The thin line at the top of the cart table has been removed in the image’s cell. As in this screenshot: http://i.imgur.com/3SLsZKI.jpg
    (Alternatively, you can visit the site itself to see the cart. It’s still a WIP, but here goes: http://www.zirnworks.com/shop

    I’m wondering if I could just replace it in with CSS somehow. Alternatively, to just remove that little line from the table altogether. I am not sure how I’d go about doing it in in simple-custom-css.

    Thought it might’ve been the image size, which is larger than the default Woocommerce cart. I went into Settings-> media and changed the thumbnail size to 100px, but no apparent change. That said, I really like the larger cart image size. It suits my purposes.

    Again thanks. I wonder why this happened to us and not so many other people using Storefront. I couldn’t find much about this by googling. Hopefully this thread will help future people as stuck as I was.

    The missing bit of the thin line may be restored with this custom css:

    table.cart .product-thumbnail {display:table-cell}

    You may need to change the size of WooCommerce thumbnails at Admin page > WooCommerce > Settings > Products tab > Display, not at Admin page > Settings > Media. Either way, you will need to regenerate thumbnails after changing the setting so that new thumbnails are made.
    https://wordpress.org/plugins/regenerate-thumbnails/

    Thread Starter Zirngibism

    (@zirngibism)

    Hi Lorro,

    That works great, many thanks again, especially for the quick reply!

    I will play with the thumbnail images in the future, but I rather like the way it is now.

    Hi Lorro,
    I have the same issue on my site – http://studded.com.au/index.php/cart/.
    I can’t seem to get an image to display on the cart page. I’ve tried loading the custom code specified above however, it’s still not appearing.
    Any advice?
    Thanks 🙂

    You put the style at the bottom of storefront-child/style.css, but there is an unwanted ‘ in the third line for the bottom. This is causing a parse error, meaning the last line is not being read. You can validate your custom style sheets here:
    http://jigsaw.w3.org/css-validator/

    Its possible that correcting this issue won’t correct the problem, because the style may be overwritten by something in woocommerce.css which is loaded later in the page. If so, your options include:
    – use https://wordpress.org/plugins/simple-custom-css/ which usually loads last so takes precedence (my preference)
    – alter the style sheet loading sequence (may make other problems)
    – use !important
    – don’t alter woocommerce.css as edits will be overwritten by updates

    Hi Lorro,
    Thanks for the quick reply 🙂
    Good pick up! I didn’t notice this parse error so thanks for pointing that out. Seems like I have a few to work through.
    Using ‘!important’ worked a treat.
    Sending you a virtual high five for your help.
    Cheers again.

    Hi Lorro,

    I had the same problem with the thumbnail and table line and fixed it with your recommendation.
    But I have and additional problem, the titles of the table (product, price, quantity and total) doesn´t appear.
    I have the feeling that they are actually there but I can´t see them because they have the background color. Mi site is http://www.citysafe.cl
    Can you help me please?
    Thanks!!

    The first two columns don’t have headings. The other four can come into view with this custom css:

    table.cart th {text-indent:0}

    Hi Lorro,

    It works great on the desktop version but in the mobile site looks collapsed, is there any way to fix it?
    Thaks for the fast reply!

    That might be why they were hidden. It may be possible to reduce the font size, hide the overlowing word ends or break the words for narrower devices, but none of these would look good.

    Tables on mobiles are difficult and a solution needs to be designed-in. The designer may want to replace the table with a series of divs which would flow better on mobile. I think it would be too big a hack for a forum answer.

    I understand…then could you tell me how to deactivate the mobile version in order to only send to the desktop version even through phones?
    Thank you!!

    I don’t think there is a mobile version. What you have, as with most modern themes, is a series of media queries in your style sheets and these alter the styles for narrower devices. Deleting all the media queries is not a good idea. Seeing the desktop version in full on a mobile will be unusable.

    To deal with the column heading problem, you could turn them off for small screens only:

    @media screen and (max-width: 768px) {
    table.cart th {display:none}
    }

    or reduce the font size:

    @media screen and (max-width: 768px) {
    table.cart th {font-size:10px}
    }

    Lorro,

    I did the same with the thumbnail and now it works fine!
    Thank you very very much! 🙂

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Product thumbnail not showing up in cart (Storefront Theme)’ is closed to new replies.