[Solution] GeneratePress GP Premium Plugin Breaks Apple Pay Button on WooCommerce Single Product Page

Problem: The Apple Pay button is missing/broken/hidden on the WooCommerce Single Product Page (but it is displaying properly on WooCommerce Cart and Checkout pages). After deactivating all of the WordPress site’s plugins, I narrowed down the problem to GeneratePress’s GP Premium plugin (which is awesome, by the way!).

Note: This post is specifically geared toward WooCommerce Variable Product (like t-shirt size & color).

Solution – Part 1

As GeneratePress tech support points out: “The Stripe button is inheriting the full width from the woo cart styling, which doesn’t work when it has variations. Use this CSS to fix it.” Source

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

Unfortunately, this CSS is for a Stripe for WooCommerce plugin. But I’m using the WooCommerce Payments plugin, which uses different CSS styling.

Solution – Part 2

After fiddling around with browser Inspect, this is the CSS styling for WooCommerce Payments that I added to my WordPress site via Code Snippets:

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

Caveat

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.

The WooCommerce Payments plugin is compatible with WooCommerce Variable Products.