How To Change Icon Of Woocommerce Payment Gateway
If yous're using WooCommerce for your WordPress shopping cart, and then yous're already familiar with the payment icons that appear on the "checkout" screen next to each payment option.
With the WooCommerce plugin, you lot can use a variety of default payment gateways including PayPal®, COD, check, bank draft, credit carte du jour, etc. However, the icon that appears side by side to each choice is fixed by the default payment gateway or its plugin and there are no ACP settings for the Admin to remove or edit these icons. It's not so much an issue with PayPal® as it might exist with a credit card merchant account, where ane or more of the credit cards shown in the icon are not accustomed. In the case of my customer, they're using Authorize.cyberspace® with the WooCommerce Authorize.net DPM plugin/extension. My client does not have American Express® via this payment method. Yet, the default icon includes the American Express® logo with no plugin options available for its removal.
At that place are quite a few postings out there, like this one, that show you how to employ a WordPress filter hook to change the PayPal® Payment Gateway icon to anything you wish. There are even filter hooks for changing the icon of each 1 of the default WooCommerce payment gateways. Unfortunately, the "Authorize.net DPM" gateway is a purchased improver and there are no available WordPress filter hooks. After all, merchants that only accept Visa® & MasterCard® do not desire to display placards for Discover® and American Express® as it only confuses the paying customer. I've written to WooThemes to point out this serious shortcoming and, equally of this writing, am pending their answer.
Until WooThemes fixes their gateway plugin to modify the displayed placards, I am using the following code to supervene upon the plugin's PNG icon file with a PNG that I created.
This function is placed within the `functions.php` file for your theme…
add_action( 'init', 'turn_on_output_buffering', 10, 0 ); add_action( 'wp_footer', 'ob_end_flush', ten, 0 ); function turn_on_output_buffering() { ob_start( 'change_icon' ); } part change_icon( $buffer ) { $search_for = plugins_url() . "/woocommerce-gateway-authorize-net-dpm/images/cards.png"; $replace_with = get_bloginfo('stylesheet_directory') . "/images/woocommerce-icons/cards.png"; return str_replace( $search_for, $replace_with, $buffer ); }
Simply name the new PNG icon file `cards.png` and place it inside the `/images/woocommerce-icons/` directory located within your current theme's directory. Only create the directories `images` and `woocommerce-icons` if they don't already exist.
In other words, here…
`wp-content/themes/YOUR THEME Proper name/images/woocommerce-icons/cards.png`
At present, when your checkout page loads, you lot'll get your new `cards.png` icon in place of the plugin'southward default icon with no worries most new versions of the gateway plugin breaking anything.
Of course the solution I've posted tin can easily be contradistinct to work with any other payment gateway too. I'll update this posting with any news from WooThemes regarding the improver of a custom icon feature for their plugin.
Credits: Thank-you to the developer of the WooCommerce JetPack plugin (no amalgamation with WooThemes) for helping me come to this solution!
EDIT:
I received a response from WooThemes, which IMO, was somewhat feeble at first. They simply directed me to a filter hook called `woocommerce_gateway_icon`, where upon my first endeavor failed, equally this filter hook targeted all WooCommerce payment icons at one time.
Subsequently a scrap of back & along, nosotros came up with the following working solution. The new icon is located in the same place as to a higher place and this code would supersede the code from above.
function authorize_gateway_icon( $icon, $id ) { if ( $id === 'authorize_net_dpm' ) { render '<img src="' . get_bloginfo('stylesheet_directory') . '/images/woocommerce-icons/cards.png" alt="Authorize.net" />'; } else { return $icon; } } add_filter( 'woocommerce_gateway_icon', 'authorize_gateway_icon', 10, ii );
I never received whatsoever answer whatsoever from WooThemes about why the brunt falls upon the customer to come with a programming solution for their lack of forethought; such a basic feature should be facilitated through a built-in plugin selection, not a WordPress filter hook.
Source: http://www.johnkieken.com/change-woocommerce-payment-icon/
Posted by: pascodomesed.blogspot.com
0 Response to "How To Change Icon Of Woocommerce Payment Gateway"
Post a Comment