WordPress.org

Resolved

(@stefanolodola)

How to display in-line credit cards icon?

I was able to do that with the good old Stripe plugin and this snippet:

function add_credit_card_gateway_icons( $icon_string, $gateway_id ) {

if ( 'stripe' === $gateway_id ) {

$icon_string  = '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/visa.svg" alt="Visa" />';
$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/mastercard.svg" alt="mastercard" />';
$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/amex.svg" alt="amex" />';
$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/diners.svg" alt="diners" />';
$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/jcb.svg" alt="jcb" />';

}
	

	
	
return $icon_string;
}

add_filter( 'woocommerce_gateway_icon', 'add_credit_card_gateway_icons', 10, 2 );

Is there anything like this for Woocommerce Payments?

I tried this (yes, the gateway ID is long), but nothing happened:

if ( 'pre_install_woocommerce_payments_promotion' === $gateway_id ) {

$icon_string  = '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/visa.svg" alt="Visa" />';
$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/mastercard.svg" alt="mastercard" />';
$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/amex.svg" alt="amex" />';
$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/discover.svg" alt="Discover" />';
$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/diners.svg" alt="diners" />';
$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/jcb.svg" alt="jcb" />';

}

This topic was modified 2 years ago by stefanolodola.

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Support Thu P. a11n
(@thup90)

2 years ago

Hi there,

To enable the inline icons, you could enable the new Checkout experience in WooCommerce Payments settings:

https://woocommerce.com/document/payments/additional-payment-methods/#how-to-enable-it

Here’s how it looks like:

https://woocommerce.com/document/payments/additional-payment-methods/#the-new-checkout-experience

Feel free to get back to us in case you have any additional questions!

Thread Starter stefanolodola
(@stefanolodola)

2 years ago

I want to display the specific cards that I accept so that customers are not left wondering if I’ll take their cards.
Never mind, thanks.

Thread Starter stefanolodola
(@stefanolodola)

2 years ago

There’s an animated credit card icon that is distracting. Animations always convert worse.
You’ve been around forever and you haven’t created a decent payment plugin yet.

Mirko P.
(@rainfallnixfig)

2 years ago

Hi @stefanolodola,

This is a fairly complex development topic. I’m going to leave the thread open for a bit to see if anyone is able to chime in to help you out.

We can also recommend visiting the WooCommerce Facebook Community group or the #developers channel of the WooCommerce Community Slack. We’re lucky to have a great community of open-source developers for WooCommerce, and many of our developers hang out there, as well.

Cheers.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Display in-line credit card icons’ is closed to new replies.