How to Hide PayPal Icon on WooCommerce Checkout Page

Hide PayPal Icon on WooCommerce Checkout PageLooking for a way to hide the PayPal icon on the Checkout page of your WooCommerce Store? Then this article will give you a solution to this. If you are running a WooCommerce store, then you must be familiar with the PayPal WooCommerce Payment Gateway.

It is available for all WooCommerce stores and its very easy to activate and used for receiving payment on your WooCommerce store.

WooCommerce PayPal Gateway Icon

One of the best WooCommerce Payment Gateways that you should include in your store is PayPal. Many users trust this gateway due to its return policies. Therefore, you need to add this payment method to your WooCommerce store, to increase your conversions.hide paypal icon in WooCommerce checkout page

One of the shortcomings of the WooCommerce PayPal gateway is the icon that is displayed on the frontend. Most users often want to get rid of it since it does not match their themes’ design.

Honestly, only a few articles on the internet try to show you how to hide the PayPal WooCommerce Payment Gateway icons using hooks and filters.

This article tries to help you change the icon of each one of the default WooCommerce payment gateways to anything you wish. The icon is located next to the payment option as shown below:

PayPal Default 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 or remove the icons.

Moreover, if you do a quick search on the internet, many WooCommerce users 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. The following is a filter hook that you can use to change the WooCommerce PayPal Icon on the checkout page:

/**
* Change PayPal Icon in WooCommerce Checkout
*/ 


add_filter( 'woocommerce_paypal_icon', 'njengah_change_the_paypal_icon' );

function njengah_change_the_paypal_icon() {
return 'icon_url';//Example : https://example.com/icon.png
}

You can change the filter to hide the Paypal icon by returning an empty string as shown in the code snippet below:

/**
 * Hide PayPal Icon Filter
*/ 

add_filter( 'woocommerce_paypal_icon', 'njengah_hide_the_paypal_icon' );
  
function njengah_hide_the_paypal_icon() {
   return '';
}

 

Are There Any Settings in the WooCommerce Storefront Theme to Customize or Remove Icons?

The storefront theme does not offer the option to remove or change the icons using their gateway plugin and the way to implement this is to use custom code to remove the icon or replace the plugin’s PNG icon file with a different PNG that you can create or install from the internet.

Moreover, this basic feature should be built-in in the WooCommerce plugin, to offer a non-programming solution for the changing of WooCommerce Payment Gateways, but it is not offered here.

How Can I remove the PayPal Icon and ‘What is PayPal’ Link in the Checkout Page?

If you want a clean checkout page that does not have the PayPal WooCommerce Payment Gateway icon, then you need to add the following lines of code in the Additional CSS section.

To access this, you first need to navigate to Customize in the top bar of your site. Then, click on the Additional CSS section and add the following code:

li.payment_method_paypal img, a.about_paypal {

  display: none !important;

}

However, you need to open the checkout page first so that you will be able to preview the changes that you will be making. This will be the outcome:

removing the PayPal icon completely

On a lighter note, I would not recommend anyone to remove the PayPal icon, as they are an element of trust and help users to know that your payment mode is secure.

adding a PayPal icon in the CheckoutAdditionally, you can change the icons and you can add a custom one for clarity purposes.

This is because the default PayPal payment gateway icon has low quality. On the image aside is an example of the Checkout page with a custom PayPal icon:

Conclusion

In this post, we have highlighted how to hide the PayPal icon on the WooCommerce checkout page. Additionally, you have learned that it is important to have the PayPal icon on the checkout, since it a good way to let your users pick the payment method easily and increase your store conversions.

See Also: How To Hide Checkout Fields in WooCommerce