How to Change the PayPal Icon On the Checkout Page

Looking for a way to customize the PayPal icon on your checkout page? This is a question asked by many WooCommerce store owners. The main aim of this article is to learn how you can change the PayPal icon on the checkout page.

Table of Contents

Default WooCommerce PayPal Checkout Icon

If you are running a WooCommerce store, then you must be familiar with the PayPal payment gateway and the that is displayed by default on the WooCommerce checkout page. The icon is located next to the payment option as shown below:

How to Change PayPal Woocommerce Payment Gateway Icon

By default, WooCommerce displays one of the many standard PayPal icons that they offer. This can be seen in the Storefront theme as shown earlier.

However, it is very common for anyone to want to change the image to something else. This is because some users might want to add an image that has a high resolution.

Moreover, if you do a quick search on the internet, there are many people who are looking for a way to change the default PayPal icon, but they do not know where they can do these changes.

However, there are some filters, which provide a solution to this problem. Nevertheless, before we have a look at them, you need to download a PayPal WooCommerce Payment Gateway icon from PayPal icons for your WooCommerce store or PayPal Icon . Here are some of the best icons that have a good design:

How to Add the PayPal WooCommerce Icons

If you have found the best PayPal icon to use on the checkout page, add the following code snippet at the bottom of your child theme functions.php file:

add_filter( 'woocommerce_paypal_icon', 'njengah_replace_paypal_icon' );

function njengah_replace_paypal_icon() {

return 'https://your_image_url';

}

Additionally, is you want to add custom CSS code to style the icon, you can add it in your child theme style.css file.

The second way to do this is to add the following PHP code snippet in your function.php file:

add_filter ( 'woocommerce_gateway_icon', 'htdat_change_gateway_icon', 10, 2 );

function htdat_change_gateway_icon( $icon, $gateway_id ) {

if ( 'ppec_paypal' == $gateway_id ) {

//Change the URL of your own icon here

$icon = 'my-own-icon.png';

}

return $icon;

}

Another way to do this is to add the following code into your theme’s functions.php file and change the URL in the quotes to match the image of your choice. This is very important because if you do not change the URL, this code will not work. Here is the code:

<?php

/* Change PayPal Icon */

function my_new_paypal_icon() {

return '/wp-content/uploads/2020/07/paypal-icon.png';

}

add_filter( 'woocommerce_paypal_icon', 'my_new_paypal_icon' );

The other way for doing this, is to put the following code into your active theme functions.php, at the end of file:

function tt_custom_paypal_icon($iconUrl) {

return 'https://Custom URL /logos/ paypal-icon.png '; // change this to your image url or uploaded WordPress image url.

}

add_filter('woocommerce_paypal_icon', 'tt_custom_paypal_icon');

In this test, I used the following image:

The result for the codes above will be as follows:

However, the result depends on the type of PayPal WooCommerce Payment Gateway icon that you choose.

How Can I Remove the PayPal icon and ‘What is PayPal’ Link in the Checkout page?

Additionally, some users may want to remove the PayPal Icon or they may want to remove the ‘What is PayPal’ link in the checkout page. This can be easily done by adding the following lines of code to the active theme custom CSS file:

li.payment_method_paypal img, a.about_paypal {

display: none !important;

}

Here is the result:

How can I Add custom WooCommerce Payment Gateway Icons?

Moreover, if you want to create your own PayPal button and host it on your own website, just make sure you load it over the https protocol if you are using SSL on your website. This is done to ensure that you will not receive any errors when proceeding to pay for the product or service in your WooCommerce store.

Editorial Staff

How to Change PayPal Icon On WooCommerce Checkout Page

Default WooCommerce PayPal Checkout Icon

How to Change PayPal Woocommerce Payment Gateway Icon

How to Add the PayPal WooCommerce Icons

How Can I Remove the PayPal icon and ‘What is PayPal’ Link in the Checkout page?

How can I Add custom WooCommerce Payment Gateway Icons?

Related Articles

Related