How can I change the icon of Paypal and Stripe

Support
#1

I added the below code to show the credit card and paypal icon in checkout page as mention in this link https://theme.co/apex/forums/topic/how-to-show-paypal-icon-and-other-payment-icons-on-checkout-page/

.woocommerce-account .checkout .payment_methods label img, .woocommerce-account .form-edit-address .payment_methods label img, .woocommerce-checkout .checkout .payment_methods label img, .woocommerce-checkout .form-edit-address .payment_methods label img {
display: inline !important;
}

But what shows up are old icons. Paypal has a more latest icon which shows the credit cards. I tried all different approaches like addding this on functions.php

function isa_extended_paypal_icon() {
// picture of accepted credit card icons for PayPal payments
return get_stylesheet_directory_uri() . ‘/images/paypal-payments.jpg’;
}
add_filter( ‘woocommerce_paypal_icon’, ‘isa_extended_paypal_icon’ );

Second option
li.payment_method_gestpay-starter
label:before {
content: url(“http://site url/wp-content/plugins/woocommerce/includes/gateways/simplify-commerce/assets/images/cards.png”);
vertical-align: middle;
}

And a few more options but nothing seems to work. I want to also add the new credit card icons.

Thanks

#2

Hello There,

Thanks for writing in! Please make sure that your WooCommerce is up to date. You should be able to use the latest icons present in the latest versions. If you already have updated it and have installed a caching plugin, please clear your plugin cache first before testing your site. If still nothing happens, would you mind providing us the url of your site so that we can take a closer look?

Best Regards.

#3

Hi,

I do not have a caching plugin but I cleared the cache, transients etc from Woocommerce Tools. Also cleared the cache and everything from the browser but can’t see the change.

Just wondering if the css I added from this link is correct. The forum is from 2015.

Thanks

#4

Hello There,

Thanks for getting back to us. Your code will not because it the Paypal icon is coming from another plugin and other than WooCommerce. It is coming from WC Vendors plugins.

/wc-vendors/classes/gateways/PayPal_AdvPayments/PayPal_AP/assets/icons/paypalap.png

Please contact the creators of the plugin for more assistance. They can surely provide you a way much easier because they are the ones who coded the paypal image into their plugin.

Thank you for understanding.

#5

You are right RueNel, it was coming from the Paypal plugin by WC Vendors.
I have enabled the Paypal chekout which comes with WooCommerce and I can see the latest Paypal icon in the checkout page but the icon shows very big. Please see attached. When I switch to a different theme, the size is small. I would appreciate a suggestion from you.

Thank you

#6

Hi there,

Would you mind providing your login credentials in a secure note? I’ll check where is the image being pickup when another theme is active.

Thanks!

#7

Added in secure note. I have attached an image of the Paypal icons with Storefront active.

#8

Hello There,

Thanks for updating in! To resolve your issue and make the image smaller, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce-checkout .checkout .payment_methods label img {
    max-width: 140px;
}

.woocommerce-checkout .checkout .payment_methods label a{
    display: block;
    font-size: 12px;
}

.payment_box.payment_method_paypal {
    padding-left: 20px;
}

Hope this helps.

#9

Thank you ReuNel.

#10

You’re welcome.