Cart images got huge

Hey there, after some recent Pro update, when customer adds a product to the cart, the image is not a thumbnail any longer. So it gets huge, takes the screen and it’s not really working as it was before. Please click on the Info icon for any product, then add it to the shopping cart, and then look the cart icon on the right-top menu.

Thank you very much, I hope we can nail this one. Cheers!

Hey @fabiofava,

I checked your cart page and the image is small. Please clear your browser’s cache and test again. Also, try testing in the browser’s private or incognito mode.

image

Thanks.

Hey @christian thank you for your reply. Unfortunately not: these images are 4x the size they used to be. Please check it out:

And it gets ridiculous on mobile screen:

Before those images were cropped to a small sized ones, was classy. Now it’s not.

Hi @fabiofava,

Thank you for the clarification, yes the mini cart element does not look like that by default. There could be a CSS syntax error somewhere on your site. Did you add a custom CSS somewhere recently?

Please provide us login credentials on a “Secure Note” so we can take a closer look.

Thanks,

Helly @friech thank you for your reply.

No CSS was added to the site. It was working perfectly (small pics on mini-cart) until some of the recent updates on Pro. This is impossible since no CSS has changed since 1 year.

Hi Fabio,

Thank you for the login, I’ve checked some of the Elements CSS on your header, and found a lot of those are missing a semicolon (couple example on the secure note). This may just a small thing but it could really break an elements on your site.

Please fix all of this missing semicolon, and clear all your caching plugins/features after.

Cheers,

Could you fix that please? I’m not good on coding and I may miss others…
Question is: how does this affect the mini-cart image size? That’s the issue…

I’m fixing all those missing ; at the end of lines (before closing brackets on the next lines). But I’m not sure this is what is causing the images to be huge. The CSS was this way before and everything was working just fine. Please let me know if you need further access so I reset password and send again. Thanks.

Hi Fabio,

All of this element CSS are combined on the frontend, so one mistake their could affect the other. Please provide us login credentials again so we can do another round of test.

Thanks,

Hey @friech thanks for your reply. I’ve fixed all semicolon on all parts of the site, this may cause no more headaches. Anyway the images on mini-cart are still huge as I’ve expected. I’ll send you the credentials on the Secure Note below. Thanks!

Hey @fabiofava,

You are having this issue because you are using the legacy Cart Dropdown element. Please edit your header and remove this legacy element. Use the new Cart Dropdown element instead.

Kindly let us know how it goes.

Hey @ruenel thank you for your reply. I don’t know how to replace that. It uses a WPML Custom String for the translation, and I don’t know how to replace the element. Could you please send me some instructions? There are so many settings on that element, and I cannot find a way to replace it for the “new” one… Thanks!

Hey @fabiofava,

You’ll first delete the OLD (Previous Version) Cart Dropdown element.

image

Then, in its place, add in the NEW (New Version) Cart Dropdown element.

After that, you just need to redesign the dropdown toggle to replicate the old toggle design.

Hope that helps.

Thanks @christian, but if I delete the old one, how will I be able to replicate its settings? I should first add the new one, then copy all settings, then delete the old one. But it seems that I can’t drag & drop the element to the space of the actual one… It opens the WP menu that sticks on the top of the window (and that I wasn’t able to remove even setting that on the theme options)… It should be possible to copy all settings from one element and paste them into another in some way… Some help would be higly appreciated, thanks.

Hello Favio,

You can insert the new Cart element next to old Cart Dropdown. Use the “+” button in the column or “Add element”. You can check out this demo video:

Best Regards.

Thanks @ruenel

As I could see you’ve used “cart dropdown”, are you sure my option isn’t “mini-cart”? I’m still very unsafe to do it, not sure how I’ll do to configure the new one exactly as the old one… I’m not a web designer and I feel unsure… First you did one thing then you’ve undone, then did another thing… Doesn’t make a lot of sense to me…

Hi @fabiofava,

I would suggest you duplicate the existing header and replace the Cart Dropdown and check if that works for you. If everything works fine, assign the new header.

Hope it helps.
Thanks

Hello @tristup thank you for your message. My mini-cart dropdown uses an WPML custom string for text. I have no idea how to apply that custom string to a new cart.

Hey there. I’ve duplicated the main header (Cabeçalho Novo), but there are so many different options that I cannot find the same results of the old cart. Could someone please find a way to have the same results on the new cart (the left) that I’ve had on the old one (the righ)? I’m not being able even to understand that many new options.

Hi Fabio,

Please look at each corresponding tab of the mini cart.

The toggles are now identical (old and new), the new dropdown looks better. What is left to do is to delete that old dropdown element.

Cheers,