Bank Card logos/images not displaying in WooCommerce checkout

[cgWerks]

I’m opening a thread here about an issue I’m seeing with WooCommerce and bank card logos/images payment gateways are supposed to put on the checkout page.

I’l contact the support for the payment gateways, but since I’ve now seen similar behavior with different payment gateways on different sites, I’m starting to think it is a theme issue. I’m hoping for some guidance in how to start investigating this.

Most payment gateways display images like credit card logos or the brand of the payment gateway/bank being used. However, on the X based sites I’ve done so far, they don’t get displayed.

The reason this has become important, is that for the current site I’m working on, the page has to display logos for Interac (a Canadian payment system) properly (along with particular language, links, etc.) that the payment gateway is supposed to put on the checkout page.

I’m still awaiting the code to enable Interac, but since other credit card logos aren’t displaying (nor something like this Enhanced Checkout Form cf. https://docs.woocommerce.com/document/advanced-payment-gateway-features/#enhanced-checkout ), I’m anticipating Interac artwork similarly won’t display.

Is this an X thing? Is there some work-around? While I generally like the way X styles things in a consistent way, I don’t want it getting in the way of this kind of thing.

I’ll try to attach an image of the current look.

[paul.r]

Hi,

To display the logos, you can try adding this in Theme Options > CSS

.woocommerce-account form .payment_methods label img, 
.woocommerce-checkout form .payment_methods label img {
    display: block;
}

Hope that helps.

[cgWerks]

Hi Paul,
It still doesn’t look all that similar, though I guess if the card logos were horizontal, it wouldn’t necessarily look bad.

So, the logos were previously purposely not being shown by default based on the theme? I’ll attach the sample here for comparison, as there are several other differences, too. While I wasn’t thinking it would be an exact match (i.e.: maybe the colors or button would be a bit different), I wasn’t expecting it to be that dramatic.

[paul.r]

Hi,

Can you provide us your site url so we can take a closer look.

Thanks

[cgWerks]

Hi Paul,

Sorry, I should have given you that earlier.

The site is at:
https://www.s100aonline.com

Go to take the exam, put it in your cart, checkout… which will get you to that page.

Thanks! -Steve

[paul.r]

Hi Steve,

Kindly change the code I provided above with this

.woocommerce-account form .payment_methods label img, 
.woocommerce-checkout form .payment_methods label img {
    display: inline-block;
}

Thanks

[cgWerks]

Thanks Paul, it still looks fairly different, but I don’t know what theme they are using for that example and how much of it is based on their theme vs X. Even though it’s different in X, it looks pretty good now.

Just FYI, some payment gateways (such as Interac) require those logos to be displayed. It might be nice if that were built into the theme, or maybe a checkbox in the WooCommerce customizer area.

[Alaa]

Hi @cgWerks
Thanks for your feedback, will pass this on to our team.