How to change the placement of the express checkout options in the WooCommerce Stripe Payment Gateway plugin

This post is an updated version of my previous guide. Due to changes in the Stripe plugin’s codebase after version 9.5.1, the previous code snippet no longer functions as expected.

How Express Checkout Options Work

Express checkout buttons (e.g., Apple Pay, Google Pay) are loaded dynamically via the Stripe script. The script scans the DOM for a specific HTML comment and injects the buttons into that location when detected.

Customizing Button Location

To reposition the buttons, you simply need move the HTML markup that the Stripe script targets.

By default, the HTML is hooked via the following WooCommerce action hooks:

Cart Page: woocommerce_proceed_to_checkout

Checkout Page: woocommerce_checkout_before_customer_details

Single Product Page: woocommerce_after_add_to_cart_form

So all we need to do is remove the original action and add our own, depending on where we want to show the button.

Here’s an example with the single product page where the button is moved above the title.

function change_woocommerce_stripe_payment_request_buttons() {

  // check if the plugin is activated in the first place, if not don't run.

  if ( !is_plugin_active('woocommerce-gateway-stripe/woocommerce-gateway-stripe.php') ) {
  return;
  }
  
  // new instance 

 $request_button_instance = WC_Stripe_Express_Checkout_Element::instance();
 
 // remove_action on the hook you want to target

 remove_action( 'woocommerce_after_add_to_cart_form', array( $request_button_instance, 'display_express_checkout_button_html' ), 1 );
 
 
 // add a new action
 
 add_action( 'woocommerce_before_single_product_summary', array( $request_button_instance, 'display_express_checkout_button_html' ), 1 );

}

add_action( 'init', 'change_woocommerce_stripe_payment_request_buttons');

For the checkout page, for example:

 remove_action( 'woocommerce_checkout_before_customer_details', array( $request_button_instance, 'display_express_checkout_button_html' ), 1 );

Then:

add_action( 'woocommerce_before_checkout_form', array( $request_button_instance, 'display_payment_request_button_html' ), 1 );}

You can find visual representations of the default WooCommerce pages hooks here:

• WooCommerce Visual Hook Guide – Cart Page
• WooCommerce Visual Hook Guide – Single Product Page
• WooCommerce Visual Hook Guide – Checkout Product Page