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

At the time of writing this post, the WooCommerce Stripe plugin doesn’t provide an option in the settings to change the placement of the Google and Apple Pay options. Fortunately, you can easily adjust this by removing the actions related to this functionality from the WC_Stripe_Payment_Request class and replace it with a new action.

By default, these buttons are hooked to the following WooCommerce actions:

1. woocommerce_after_add_to_cart_form (single product page)
2. woocommerce_proceed_to_checkout (cart page)
3. woocommerce_checkout_before_customer_details (checkout page)

In the example below, I’m removing the button from the area above the billing address form to the top of the checkout page, you can find a visual representation of the checkout page hooks in this guide: WooCommerce Visual Hook Guide – Checkout Page.

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_Payment_Request::instance();
 
 // user remove_action on the hook you want to target

 remove_action( 'woocommerce_checkout_before_customer_details', array( $request_button_instance, 'display_payment_request_button_html' ), 1 );
 
 
 // add a new action
 
 add_action( 'woocommerce_before_checkout_form', array( $request_button_instance, 'display_payment_request_button_html' ), 1 );

}

add_action( 'init', 'change_woocommerce_stripe_payment_request_buttons', 1 );

The same approach can be applied to the hooks for the cart and single product page. Visual representations of the hooks for both pages can be found here:

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

Hope this helps!