Site logo

Archived topic

Apple Pay button getting broken on WooCommerce Single Product Page

3 replies · Started by Reid on April 1, 2023

Viewing posts 1–4 of 4

1. GP Premium is causing the Apple Pay button to get broken on WooCommerce Single Product Page.

2. Also tested with WordPress Twenty Twenty-Three theme (with GP Premium deactivated) and the Apple Pay button displays correctly.

Apple Pay button broken with GP Premium activated
Apple Pay button correct with GP Premium deactivated
Apple Pay button correct with WordPress Twenty Twenty-Three activated and GP Premium deactivated

3. The Apple Pay button is being generated via WooCommerce Payments.

Notes:
All other plugins deactivated, then turned on one-by-one. GP Premium is 100% the problem.
Browser cache cleared.
Caching plugins disabled.
Server cache disabled.
GeneratePress theme: 3.3.0
GP Premium: 2.3.1
WordPress: 6.2

Found a solution to display the Apple Pay button on WooCommerce Single Product Page. Yay!

#wcpay-payment-request-wrapper,
#wcpay-payment-request-button-separator {
	width: 100%;
}

Caveat: This is specifically for WooCommerce Variable Products using the WooCommerce Payments plugin to generate the Apple Pay button.

Note: The Apple Pay button might NOT work with WooCommerce Variable Products that are using payment plugins other than WooCommerce Payments. From what I've read, the Apple Pay button might not capture product variations (like size and color), but just the item name and price. Double-check that your non-WooCommerce Payments plugin is actually compatible with WooCommerce Variable Products.

Hi there,

i think the issue arises with the use of the Quantity Buttons option that GP Premium adds with the Woocommerce module which, can be disabled in Customizer > Layout > Woocommerce.

It makes the form a flex box, so those other elements need the width 100% applied to them.
Its a tricky thing to automatically fix as each site that has additional payment or variable product options will behave differently. We will take a look to see if we can improve this.

But it seems you have a working solution and thanks for sharing that.

This archived topic is closed to new replies.