search

woocommerce / pinterest-for-woocommerce

A native Pinterest integration for WooCommerce. Development is managed by Ventures.
https://woocommerce.com/products/pinterest-for-woocommerce/
GNU General Public License v3.0
22 stars 9 forks source link

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

Open ecgan opened 3 years ago

ecgan commented 3 years ago

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.

image

Note that this issue only happens when:

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.

ecgan commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.