Save to Pinterest button: not rendered within product image and blocking "sale" text in mobile view with storefront theme

[ecgan]

Describe the bug:

Please refer to the screenshot below, the "Save to Pinterest" button is rendered above the above the product image and blocking the "Sale!" text.

Note that this issue only happens when:

• The shopper is using a mobile view or mobile device (the screenshot above uses "iPhone X").
• The site uses Storefront, the official WooCommerce theme.

Steps to reproduce:

1. Enable "Save to Pinterest" feature in plugin settings: /wp-admin/admin.php?page=pinterest-for-woocommerce-setup-guide&tab=setup-guide
2. Install and activate Storefront theme in your site: /wp-admin/themes.php
3. Visit your product page in mobile view: https://example.com/product/beanie/
4. Notice the placement of the "Save to Pinterest" button. It would show up like the screenshot above.

Expected behavior

The "Save to Pinterest" button should be rendered within the product image consistently at the top left corner across all views (mobile view, and desktop view on mouse hover).

Actual behavior

The "Save to Pinterest" button is rendered above the above the product image and blocking the "Sale!" text on mobile view.

Additional details:

Note that this issue is pretty much dependent on the site theme. I have tried out the following official WordPress themes and they have their own quirks.

• Twenty Nineteen
• Twenty Twenty
• Twenty Twenty-One

[ecgan]

Note that the Pinterest "Save" button could appear outside of the product image in the shop gallery page too. Please refer to the video capture below: (https://d.pr/v/REkXbt)

https://user-images.githubusercontent.com/417342/124486631-601f2a00-dde0-11eb-9893-3f41224b67b1.mov

[ksere]

To discuss this a bit: The original issue as mentioned is theme specific. Other themes usually overlay the "sale" badge onto the images, so that requires different handling.

Imho it would be ideal if WC core would add a hook outside the opening <figure> here as it would allow a clean fix that would work on most case simply with positioning relative to the wrapper.

As is, a fix would either require repositioning of the button via JS, or alternatively hard coding the top offset of the button when the product is on sale. Both solutions not ideal/clean/robust.

This I can reproduce as well, but its a matter of the image size being too narrow on that default state of WC demo images. In other words, that shop if properly configured should have a width image >= to the width of the breakpoint that stacks the images. The button is injected in the proper place in that view.

cc @haszari

[haszari]

Thanks for investigating further @ksere - I agree that there's no easy fix to issues like this, as themes all do things differently.

I don't think this issue's a high priority right now 👍

Imho it would be ideal if WC core would add a hook outside the opening

here as it would allow a clean fix that would work on most case simply with positioning relative to the wrapper.

If an additional hook in WooCommerce core might improve things, we could open a PR or an issue to get that started - no urgency on this though.