How to Move Stripe Express Checkout Buttons on Your WooCommerce Checkout Page

Many WooCommerce store owners using the Stripe payment gateway want to customize their checkout page by repositioning the Express Checkout buttons (Google Pay, Apple Pay, Pay with Link). A common goal is to move these buttons from the top of the form, above the customer details, down into the payment methods section for a more intuitive flow. This article explains why this happens and provides the most reliable methods to achieve it.

Why Can't I Just Use a Setting to Move the Buttons?

The placement of the Express Checkout buttons is hardcoded into the Stripe payment gateway plugin by default. The WooCommerce Stripe Payment Gateway team has designed the checkout flow to position these buttons at the top (woocommerce_checkout_before_customer_details) to maximize their visibility and usage. There is no built-in setting within the WordPress admin or the plugin's configuration to change this position, which is why custom code is typically required.

The Standard Method for Moving Express Checkout Buttons

The traditional solution involves using WordPress actions to remove the buttons from their default hook and add them to a new one. The most common target is just before the standard payment methods, using the woocommerce_review_order_before_payment hook.

Here is the widely shared code snippet that has worked for many users:

if ( class_exists( 'WC_Stripe_Payment_Request' ) ) {
    remove_action( 'woocommerce_checkout_before_customer_details', array( WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_html' ), 1 );
    remove_action( 'woocommerce_checkout_before_customer_details', array( WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_separator_html' ), 2 );

    add_action( 'woocommerce_review_order_before_payment', array( WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_html' ), 1 );
    add_action( 'woocommerce_review_order_before_payment', array( WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_separator_html' ), 2 );
}

Important Note on Plugin Updates: As seen in the sample threads, the internal class and function names within the Stripe plugin can change between versions. Around version 9.5.1, the function was moved from the WC_Stripe_Payment_Request class to a new WC_Stripe_Express_Checkout_Element class. If the above code stops working after an update, you may need to adjust it to reference the new class. Always test code changes on a staging site first.

Why Might the Buttons Still Not Show Up?

If you've added the code but the buttons are still not appearing in their new location (or at all), here are the most common causes:

1. Order Pay Page: The standard code snippet often only affects the main checkout page (/checkout/). The "Order Pay" page (/checkout/order-pay/...), where customers pay for a manually created order, may require a separate, modified function to target its unique hooks.
2. Plugin or Theme Conflicts: Highly customized checkout pages built with page builders or multi-step checkout plugins can interfere with the standard WooCommerce hooks that the Stripe plugin relies on. This can prevent the buttons from rendering correctly in any position. The recommended troubleshooting step is to temporarily switch to a default theme like Storefront and disable all plugins except for WooCommerce and Stripe to see if the buttons appear.
3. Product or Tax Settings: Some users have reported specific scenarios, such as selling virtual products with taxes calculated based on the customer's address, which can prevent the buttons from loading on the checkout page due to the way the order total is calculated.
4. Conditional Logic: The buttons have their own set of conditions for when they should display (e.g., supported browser, HTTPS connection, product type). If these conditions aren't met, the buttons won't render.

Getting Further Help

Since this is a customization that falls outside the standard support scope for the WooCommerce Stripe Payment Gateway plugin, you may need to seek assistance from a developer if the standard code does not work for your setup. Communities like the WordPress.org support forums or StackExchange are great places to get help from other experienced users and developers who have tackled similar challenges.