One of my premium course students had an apparently simple requirement. Her client didn’t want to show the “What is PayPal?” text (and link) on the checkout page. In fact, why sending users away from the checkout? And who doesn’t know what PayPal is nowadays? Well, let’s see how this is done via a simple “filter” – but this time I’d like to show you a step-by-step tutorial! Let me know what you think about this in the comments 🙂
1. WooCommerce Plugin File Search
First, we try to find where this “What is PayPal” is generated from, usually a PHP function. In fact, this is what shows in the woocommerce\includes\gateways\paypal\class-wc-gateway-paypal.php file:
/**
* Get gateway icon.
* @return string
*/
public function get_icon() {
$icon_html = '';
$icon = (array) $this->get_icon_image( WC()->countries->get_base_country() );
foreach ( $icon as $i ) {
$icon_html .= '<img src="' . esc_attr( $i ) . '" alt="' . esc_attr__( 'PayPal Acceptance Mark', 'woocommerce' ) . '" />';
}
$icon_html .= sprintf( '<a href="%1$s" class="about_paypal" onclick="javascript:window.open(\'%1$s\',\'WIPaypal\',\'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700\'); return false;" title="' . esc_attr__( 'What is PayPal?', 'woocommerce' ) . '">' . esc_attr__( 'What is PayPal?', 'woocommerce' ) . '</a>', esc_url( $this->get_icon_url( WC()->countries->get_base_country() ) ) );
return apply_filters( 'woocommerce_gateway_icon', $icon_html, $this->id );
}
2. Boom! The function is “filterable”
WooCommerce gives us this, so that we can “filter” or “edit” the behavior of such function without having to override WooCommerce core files:
return apply_filters( 'woocommerce_gateway_icon', $icon_html, $this->id );
3. Let’s find the HTML code that we need to filter
Now that we know the function is editable via a hook (filter), we find out that the “What is PayPal” link is added by the variable $icon_html.
$icon_html .= sprintf( '<a href="%1$s" class="about_paypal" onclick="javascript:window.open(\'%1$s\',\'WIPaypal\',\'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=1060, height=700\'); return false;" title="' . esc_attr__( 'What is PayPal?', 'woocommerce' ) . '">' . esc_attr__( 'What is PayPal?', 'woocommerce' ) . '</a>', esc_url( $this->get_icon_url( WC()->countries->get_base_country() ) ) );
Please note the “.=”: this means $icon_html is being concatenated to the previous $icon_html, which contains the PayPal image:
$icon_html .= '<img src="' . esc_attr( $i ) . '" alt="' . esc_attr__( 'PayPal Acceptance Mark', 'woocommerce' ) . '" />';
4. Let’s code the PHP snippet: How to Remove “What is PayPal?” @ Checkout
Now that we have all the information, let’s start coding. Take a look at the comments in the PHP snippet to see if you can follow me.
/**
* @snippet WooCommerce Remove "What is PayPal?" @ Checkout
* @how-to businessbloomer.com/woocommerce-customization
* @sourcecode https://businessbloomer.com/?p=21186
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 3.5.4
* @community https://businessbloomer.com/club/
*/
add_filter( 'woocommerce_gateway_icon', 'bbloomer_remove_what_is_paypal', 10, 2 );
function bbloomer_remove_what_is_paypal( $icon_html, $gateway_id ) {
if( 'paypal' == $gateway_id ) {
$icon_html = '<img src="/wp-content/plugins/woocommerce/includes/gateways/paypal/assets/images/paypal.png" alt="PayPal Acceptance Mark">';
}
return $icon_html;
}
5. Summary
To summarize:
1) I’m calling the filter with: add_filter( ‘woocommerce_gateway_icon’, …
2) I’m creating my custom override function ‘bbloomer_remove_what_is_paypal’
3) I’m passing to the function two variables: the HTML ($icon_html) and the gateway name ($gateway_id), as we need to make sure we override those through the filter
4) I make sure this is the PayPal gateway with the if > then
5) I edit the $icon_html variable, by just saying “trash the previous, use mine instead”
6) I return $icon_html to the system
Let me know in the comments if this “extended” tutorial helps 🙂
Thank you! The code What is my PayPal text was actually pushing the PayPal Credit card image over the text selection “PayPal” which looked really bad for new customers that want to put trust into a website. Happy to say that it worked like a charm. Nice work Rodolfo!
Thanks Andrew!
Great tip – though it still leaves the credit card image to the right, and the black box the “What is PayPal?” text used to be in.
Hey Ian, thanks so much for your comment! You’re right, but this snippet is not meant to hide the image, only the “What is PayPal”. In regard to the black box, that must be your theme or custom CSS, as this is not present in default WooCommerce – you might need to add some custom CSS line as well 🙂
Man… you’re a genious… big thanks !
Thanks a lot 🙂
Thank for this but just one question. How do I replace the whole “Paypal: What is Paypal” with something like: Credit, Debit cards and Paypal.
Unfortunately, some people still think you need a paypal account to pay. I want it to be made more clear that you don’t need one without clicking on the pay with paypal option (brings up the “you don’t need an account text”). Really wish paypal themselves would think about this and integrate it.
Dave, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R
This is not working with woo commerce 3.2.3. Can u please check . Thanks
Hey Kumar, thanks for your comment. Positive, it works on the latest WooCommerce version. Make sure you’re only using the code at paragraph 4, the previous code is only to demonstrate the snippet coding.
Or you could just add the css:
.about_paypal { display: none; }Matt, thanks so much for your comment! Using display: none is not a great idea if PHP can be used for that. Element will still be there despite you hide it, while with PHP it doesn’t even load 🙂
I disagree in this instance. What happens when Woocommerce release an update and the PayPal logo is updated (like it actually has been since this article)? You aren’t going to know that image has been replaced and will manually need to updated the PHP function.
For the sake of hiding a tiny link, i’d personally opt for hiding it with CSS & ensuring the payment logo is always valid & up to date.
Good point. Best would be to replace it with your own image, stored in your Media folder
genius!!! Would you also help with how we can add to this to remove the PayPal image via css as well?
Hi Xenia, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hey, does this work with Woocommerce 3.x?
Thanks!
krko
Krko, thanks for your comment! It should – have you tried yet?
Hi..! It worked me. Thank you.
🙂
Thanks . It worked for me.
Thank you Kumar 🙂
HI Rodolfo! Thanks a lot for your blog and all the free amazing resource you share for free – it’s been such a big help for me 🙂 However, there is one question I’ve not be able the find the answer to. Maybe you can help. I’d really like to remove the ‘slide effect’ from the product gallery on the product page in woocommerce. I find it really annoying that the product images rotate in an endless loop, even if I chose a specific product (images) it automatically move away from it. Can this somehow be fixed? Many thanks, Denice
Hello Denice, thanks so much for your comment & feedback. In regard to your issue, are you sure this is not a theme-related problem? Based on your description I don’t recall this behavior on the default WooCommerce – if yes maybe give me a link or send me a screenshot to being able to understand your point 🙂 Cheers!