Docs

[ottobono]

Hi, I am using integrity and woocommerce and I want to show payment icons next to two of my payment methods because I cannot see any icon next to my payments methods. I have set up paypal and XPay. I want to show a credit card image named “paypal_payments.jpg” under “public_html/ottobono.it/wp-content/themes/x-child/images” on the right next to the payments. How to do it? I have already checked this post https://community.theme.co/forums/topic/how-to-show-paypal-icon-and-other-payment-icons-on-checkout-page/ but it did not help 🙁 Thank you!

[ottobono]

This reply has been marked as private.

[ottobono]

Hi I try to add this css I found in the topic I posted in my first post:

.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;
}

Problem is that the icons are too big for the text/all compressed. How to add some margin around them?

Xpay support other cards that are not the same there are displayed. I attached a pic to show you which cards should be displayed (I could create an image and substitute all images next to xpay with mine, but I do not know how to do it 🙁 ). Thx!

[ottobono]

p.s. the standard paypal icon is really ugly 😀 I would like to change it, how to do it?

Edit: was a caching error that showed me the icon is fine 🙂

I found this code to change paypal standard icon, but I need to add some margin around the icon, how to do it?

function replacePayPalIcon($iconUrl) {
	return get_bloginfo('stylesheet_directory') . '/images/acceptedCards.png';
}
 
add_filter('woocommerce_paypal_icon', 'replacePayPalIcon');

Second, how to add another pic instead of the 4 small pics that appears next to my xpay gateway? thanks!

[ottobono]

Hi for paypal I used this css

.woocommerce-account form .payment_methods label img, .woocommerce-checkout form .payment_methods label img {
margin-left:10px !important;
margin-right:10px !important;
}

Now I have to see how to do for xpay…

Edit: My xpay icons got margin too! I saw where the image is pointed in my ftp, I am gonna replace the images and see what happens!

[ottobono]

Hi, it worked! I used this code (for future reference):

CSS:

.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;
}
.woocommerce-account form .payment_methods label img, .woocommerce-checkout form .payment_methods label img {
margin-left:10px !important;
margin-right:10px !important;
}

Then I checked the path of my icon and I put a resized icon in the same path of the old one with the same name of the old one. Result seen in the pic attached. Enjoy! 🙂

[Paul R]

HI,

Thanks for sharing. Have a great day! 🙂

[Author]

Posts