add_action | Replace Default Apple Pay & Google Pay Button Location

Note

We’ve created a developer guide that shows how to change the position of the Apple Pay and Google Pay wallet buttons on the WooCommerce checkout page using a custom add_action.

This guide is intended for developers or designers with some working knowledge of PHP and WooCommerce hooks.

While we don’t provide customisation services as part of our support, we’ve included sample code to help you implement this change on your own site.

This snippet allows you to move the Apple Pay and Google Pay buttons from their default location (woocommerce_review_order_after_submit) to above the checkout form (woocommerce_before_checkout_form).

You can place this code in your theme’s functions.php file or within a custom plugin.

Warning

This will remove the default wallet buttons that appear after the “Place Order” button and instead display them above the checkout form. This can be useful for improving visibility and streamlining the customer experience.

PHP

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

<?php // Do not add this line

add_action( 'woocommerce_init', 'ag_remove_wallet_buttons_from_review_order' );

/**
 * Removes the default wallet buttons (Apple Pay / Google Pay)
 * from the "Place Order" section on the checkout page.
 */
function ag_remove_wallet_buttons_from_review_order() {
	$gateways = WC()->payment_gateways->payment_gateways();

	foreach ( $gateways as $gateway ) {
		if ( $gateway instanceof ag_Tyl_checkout ) {
			remove_action( 'woocommerce_review_order_after_submit', array( $gateway, 'ag_wallet_pay' ) );
		}
	}
}


// Add new wallet button location above the checkout form
add_action( 'woocommerce_before_checkout_form', 'ag_wallet_options' );

/**
 * Displays Apple Pay and Google Pay buttons above the checkout form
 * based on the plugin settings.
 */
function ag_wallet_options() {

	// Load plugin settings
	$tyl_settings = new ag_Tyl_checkout();

	// Only show divider if either Apple Pay or Google Pay is enabled
	if ( ( isset( $tyl_settings->apple ) && $tyl_settings->apple === 'yes' ) || ( isset( $tyl_settings->google ) && $tyl_settings->google === 'yes' ) ) {
		echo '<span class="ag-divider">- OR -</span>';
	}

	// Show Apple Pay button if enabled
	if ( isset( $tyl_settings->apple ) && $tyl_settings->apple === 'yes' ) {
		echo '<div id="tyl_applepay" class="apple-pay-button wallet-payment hide-apple-pay ' . esc_attr( $tyl_settings->apple_style ) . '">Apple Pay</div>';
	}

	// Show Google Pay button if enabled
	if ( isset( $tyl_settings->google ) && $tyl_settings->google === 'yes' ) {
		echo '<div id="tyl_googlepay" class="googlepay-button wallet-payment hide-google-pay">
				<img class="google-pay-btn" src="' . esc_url( ag_tyl_checkout_path . 'inc/assets/img/new-card/google-pay-button.svg' ) . '" />
			  </div>';
	}
}

Notes:

Make sure ag_tyl_checkout_path is defined and points to your plugin assets correctly.
Use esc_attr() and esc_url() for security when echoing HTML attributes and URLs.
You can also remove the default action hook where the wallet buttons were previously shown.

Was this helpful?

Documentation

add_action | Replace Default Apple Pay & Google Pay Button Location

Notes: