Apple-Pay Button Misaligned & Oversized on Key Pages #10750
Comments
|
I'm not sure how to reproduce it - it appears to be a theme conflict, rather than a plugin issue. E.g. I checked with Storefront theme: And then with the block-based Twenty Twenty-Five: Nothing out of ordinary can be observed. In my case it was WooPayments 9.3.0 with WooCommerce 9.8.1 |
|
Hi @Everade We weren't able to reproduce the issue. Could you change your store's theme to Storefront and see if the problem still persists? If doing that fixes the button appearance, the problem might be with the theme you're using, not WooPayments. I will close this issue until then. |
|
@marcinbot This is how it looks like for me in the WooPayments - Apple Pay / Google Pay settings: |
|
Thanks for the update! I'll reopen then |
|
@Everade, I haven't noticed it at first, but this request is about Apple Pay on the non-Safari browser, and even on Windows. This is an experimental feature from Stripe, using new Apple APIs. I think it makes sense to close this one as a duplicate of #10751, which should stay open as a bug-report for that experimental feature. It was communicated to Stripe and is being looked into. But due to the experimental nature of it, I don't see much sense in trying to fix it from our end. |
Uh oh!
There was an error while loading. Please reload this page.
Describe the bug
All pages displaying the "Buy with Apple-Pay" and "Buy with Google-Pay" buttons have CSS issues, causing the Apple-Pay button to render incorrectly, especially with the "Outline" theme setting.
Only the top black outline is visible; the left, right, and bottom outlines extend beyond the visible area.
Known affected pages are: Checkout Page, Cart Page, and Product Page. You can also observe this in the preview section when setting up the button theme.
Additionally, the fonts are inconsistent. The Apple-Pay button uses a substantially larger font size.
To Reproduce
Or on a live website:
Actual behavior
The Apple-Pay button appears to use a different CSS setup than the Google-Pay button. As a result, they display inconsistently.
This includes the missing outlines caused by an oversized Apple-Pay button, as well as the larger font size used for the Apple-Pay button.
Screenshots
Product Page:
Cart Page:
Checkout Page:
Expected behavior
All payment buttons should display and behave consistently.
Desktop:
Additional context
Possibly related:
#10751
Recent bug report that may have attempted to address similar issues:
#10043
I use a custom theme called "MinimogWP." While this may contribute to the display issues, it's worth noting that the CSS setups for these two buttons still appear to be substantially different coming from this plugin.
It displays exactly the same directly within the WooCommerce Settings.
The text was updated successfully, but these errors were encountered: