How To Change The Display Of Stripe Payment Buttons In WooCommerce


Owners of WooCommerce websites now have the option to add the Stripe payment gateway thanks to a module developed by WooCommerce themselves, and what is even better is that is completely free of charge!

What makes this module even better is the additional methods it makes available alongside taking card details such as:

With very little work you can have a website offering the above payment methods within literally a matter of minutes!

In this article we are going to show you how to control where the buttons for the above payment methods are displayed using simple bits of code for you to implement into your website.

Displaying ‘Payment Request Buttons’

This particular plugin refers to the Apple Pay and Google Pay buttons as grouped ‘Payment Request Buttons’. By default these payment buttons are displayed on single product listings and on the cart page, but what if we don’t want them there? And what do we do if we want to display them on the checkout instead? Let’s take a look…

In recent updates of the plugin, you might have noticed that the default location of the payment buttons changed slightly, but thankfully the developers kept in mind that not everyone would approve of these changes and included some actions and filters to help us keep control in what is displayed where.

Hiding Stripe Payment Request Buttons on Single Product Pages

If you do not want to display your Apple Pay or Android Pay buttons on single product listings then all you need to do is add the following simple line of code to the functions.php file within your theme/child theme.


Hiding Stripe Payment Request Buttons On Cart / Basket Pages

I personally prefer to display these buttons on both the cart/basket pages and the checkout as it is likely to improve conversions where customers do not feel daunted by a potential lengthy checkout process. If however you would like to remove the buttons from your cart / basket pages then simply add the few lines of code below to your functions.php file and it will be not more!

remove_action('woocommerce_proceed_to_checkout', array(WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_html'),1);
remove_action('woocommerce_proceed_to_checkout', array( WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_separator_html'),2);

Displayed The Stripe Payment Request Buttons At Checkout

To me the most obvious place you would want to display your payment buttons such as Apple Pay and Google Pay is at the checkout, instead of filling out potentially lengthy forms and selections, the customer can simply rest their finger on Touch ID and, providing all is well with their payment method, they are taken directly to checkout success and the process is complete, simple!

For some reason in more recent updates of the Stripe plugin, the developers to decided to remove this by default, but thankfully made it easy enough for us to add it once again. Add the following line of code to your functions.php theme file and your customers lengthy checkout process shall be no more!

add_filter('wc_stripe_show_payment_request_on_checkout','__return_true' );

Final Words

We hope you have found the above tutorial handy! Stripe is a great payment gateway with very competitive rates, and with the added bonus of offering payment methods such as Apple Pay, which usually require a considerable amount of development work, it is certainly one to consider on your online e-commerce store.

If you have found the above snippets of code handy, or have any other questions, the please do not hesitate to leave a comment below and we will try our best to help!

Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *