Wishlist icon/button not showing on mobile

Sorry, forgot the link to the shop: https://erbacealab.it/shop/?woo-share=Y2DF3nvwQByOOoSF0pFFbB1H75Y70rXY (it’s still in coming soon mode)

Hi,

Thank you so much for choosing our plugin and for taking the time to reach out.

Rest assured, we will investigate this matter as a priority and work on a solution as quickly as possible.

We will keep you updated on the progress and notify you as soon as we’ve resolved the issue. Your satisfaction is our top priority, and we won’t stop until everything is running smoothly again.

Thank you for your patience, and please don’t hesitate to reach out if you have any further questions in the meantime.????

Hi,

Thank you for your patience!

We’ve thoroughly reviewed your website and tested it across multiple resolutions, devices, and browsers, but we weren’t able to replicate the issue you mentioned. Everything appears to be functioning correctly on our end.

Could you kindly check again from your side and confirm if the issue persists? If you’re still facing the problem, we’d love to gather more details to assist you further.

Looking forward to your update!

Hello,
the problem persists, maybe I didn’t explain myself well.
I’m sending a screenshot of the correct functioning on the desktop version of the site:

https://www.imghippo.com/i/wwRQv1727687872.png
https://www.imghippo.com/i/CaJQ51727687896.png

Below I’m sending a screenshot of the mobile version of the site, where as you can see the settings for adding products to the wishlist are not displayed:

https://www.imghippo.com/i/Is74U1727687958.png
https://www.imghippo.com/i/Bqc5w1727687977.png

Thanks

Hi,

Thank you for sharing the screenshots and further clarifying the issue.

We’ve tested the wishlist functionality on multiple devices, and it appears that the problem might be related to your website’s cache. Additionally, please note that you’ve configured your wishlist to be displayed only to logged-in users. If you’re not logged into your account while testing on mobile, the wishlist won’t be visible.

To resolve this, we recommend clearing both your website/server cache and the mobile browser cache, then testing again while logged in.

If the issue persists after these steps, please let us know and we’ll be happy to assist further.

Thanks,
actually the problem was only the setting to not show the wishlist to those who were not logged in, which I did not realize I had not activated.

But now I have a problem with the display of the heart, which is not at the top right of the image in the product gallery, but is positioned lower.

https://www.imghippo.com/i/JE17f1727953057.jpg

This problem is only in the mobile version, in the desktop version the position of the heart is correct.

How do I solve this?
Thanks

Hi,

I’m glad to hear that your previous issue is resolved!

To fix the heart icon positioning issue on mobile, you can add a simple CSS rule to adjust the position of the button for mobile screens. Here’s an example code you can use:

@media only screen and (max-width: 767px) {
  .wlfmc-add-to-wishlist .wlfmc-addtowishlist {
    position: relative;
    top: -52px; 
  }
}

(Please note that you might need to target the correct class based on your theme or customization, and adjust the top value until the button is positioned exactly where you want it on mobile.)

Let me know if you need further assistance!

Hello,
thanks for the directions.

I tried but by adding the suggested CSS it happens that on the page of all the products of the shop (archive) the hearts are moved higher than the images, and on the page of the single product the position changes only when the heart is not selected, while it returns to the center when it is selected as a favorite:

https://www.imghippo.com/i/jAwbN1728032449.png
https://www.imghippo.com/i/ySV4p1728032529.png
https://www.imghippo.com/i/mZ23e1728032550.png

Grazie,
Valentina

Hi Valentina,

Thank you for the update.

It seems that the issue is due to targeting the wrong class. You should specifically target .wlfmc-add-to-wishlist.wlfmc-single-btn in your CSS:

@media only screen and (max-width: 767px) {
  .wlfmc-add-to-wishlist.wlfmc-single-btn {
    position: relative;
    top: -42px; 
  }
}

As mentioned before, for the positioning, you can adjust the top value incrementally until the button is positioned exactly where you want it on mobile screens.

(Additionally, regarding the @media only screen and (max-width: 767px), you might need to adjust the max-width value depending on how your site behaves across different devices. Feel free to modify this value to fit your needs.)

Please give that a try, and let me know if you need further assistance!

Hello,
thanks, I tried but unfortunately this solves the problem of the archive page, but on the single product the heart is moved to the bottom left:

https://www.imghippo.com/i/dAnpI1728135678.png

Thank you for your update.

To resolve this, all you need to do is remove the line position: relative; from the CSS. That should fix the issue with the heart being moved to the bottom left on the single product page.

Let me know if you need further assistance!

Now everything finally works properly as I wanted.
Thanks for all the help, I really appreciate it
Valentina