Remi's blog

Solve WooCommerce Payment Gateways SVG Icons Not Showing

—

by

Remi
in ,

In many payment gateways, WooThemes and SkyVerge decided to use SVG files instead of PNG files to display credit card icons. It’s a great move as SVG files can provide an equal quality on retina and no retina screen for the same file weight.

But from time to time, and depending on the server the install is hosted on when HTTPS is enabled you can experience the following issue: SVG files are listed as missing files (404 error).

Hopefully, there’s a quick workaround for that. There’s usually a filter that tells the plugin to load SVG or PNG files. By default, it’s set to SVG, but you can easily decide to use PNG instead. Let’s have an example with Moneris. Using the following snippet, and placing it in the file called functions.php will tell the Moneris payment gateway to use PNG files:

You can quickly check if the payment gateways that you use provide this filter by searching for _use_svg in the source code. If so, check for the plugin ID and replace gateway_moneris with the ID of your plugin and you’re done!

, , ,

One response to “Solve WooCommerce Payment Gateways SVG Icons Not Showing”

  1. Leon

    Hey Remi,

    I actually figured out that this filter was available for the Braintree payment gateway by looking through the source code, it uses the Skyverge WC Plugin Framework.

    However:

    `add_filter( ‘wc_payment_gateway_braintree_use_svg’, ‘__return_false’ );`

    did nothing.

    I printed out `’wc_payment_gateway_’ . $this->get_plugin()->get_id() . ‘_use_svg’` to be sure that `wc_payment_gateway_braintree_use_svg` was the correct hook, and tried to add a “9999” priority already.

    Do you have any thoughts on why it would’t work? I had to edit the plugin file for now leaving it un-updateable.

Leave a Reply