UnionPay Payment Method Icon

  • Resolved handmadehome

    (@handmadehome)


    3 years ago

    Hi,
    Since of payment method icons are not displayed anymore you suggest to use the following code to fix it:

    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" class="stripe-visa-icon stripe-icon" alt="Visa" />';
		$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/mastercard.svg" class="stripe-mastercard-icon stripe-icon" alt="Mastercard" />';
		$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/amex.svg" class="stripe-amex-icon stripe-icon" alt="American Express" />';
		$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/discover.svg" class="stripe-discover-icon stripe-icon" alt="Discover" />';
		$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/diners.svg" class="stripe-diners-icon stripe-icon" alt="Diners" />';
		$icon_string .= '<img src="' . WC_STRIPE_PLUGIN_URL . '/assets/images/jcb.svg" class="stripe-jcb-icon stripe-icon" alt="JCB" />';
	}
	return $icon_string;
}

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

    But it doesn’t contain the icon for UnionPay payment method. Please, how can we add it?

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Margaret S. woo-hc

    (@margaretwporg)

    Hi @handmadehome

    The icon for UnionPay can be put in the same folder as the other icons e.g. visa.svg, mastercard.svg, etc. are, i.e. in the relative path "' . WC_STRIPE_PLUGIN_URL . '/assets/images/unionpay.svg" , and it should work the same way.

    The .svg version of the unionpay icon can be found here:
    https://www.iconfinder.com/icons/1468976/card_payment_unionpay_icon

    I hope this helps!

    Thread Starter handmadehome

    (@handmadehome)

    Thank you!
    May I also ask, is this icon not going to be removed from assets/images folder during plugin updates? Will it work independently from updates?

    Plugin Support Paulo P – a11n

    (@paulostp)

    Hello,

    Thanks for writing back!

    is this icon not going to be removed from assets/images folder during plugin updates? Will it work independently from updates?

    When updating a WordPress plugin, the whole file/folder structure is updated. So, to make sure it is kept between updates, you could place that image in your /wp-content/uploads folder instead.

    This would be the updated code if you place the image in the uploads folder:

    "' . get_bloginfo('url') . '/wp-content/uploads/unionpay.svg"

    Please let us know if we can be of any further assistance.

    Thread Starter handmadehome

    (@handmadehome)

    Thank you! I can see UnionPay icon now. Just one more question if you don’t mind.
    What should I add to “class”? Looks like this icon smaller than rest.

    $icon_string .= '<img src="' . get_bloginfo('url') . '/wp-content/uploads/unionpay.svg" class="" alt="UnionPay" />';

    2022-03-10-13-53-44

    Igor H

    (@ihereira)

    Hello,

    A class is a set of attributes that you can add to your element (in this case the image), for example, you can add a background color, margin, padding, etc. More info about it is available in this example.

    If the icon is smaller than the rest you definitely edit it using an image editing application like Gimp, Photoshop, or any other available. Once it has the size or dimensions you want, you can permanently add it to your site.

    I hope this provides clarity.

    Thread Starter handmadehome

    (@handmadehome)

    Thank you!

    Abiola Ogodo

    (@oaoyadeyi)

    @handmadehome

    Thanks for letting us know the issue has been resolved.

    If you have any further questions, I recommend creating a new thread.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘UnionPay Payment Method Icon’ is closed to new replies.