Solve WooCommerce Payment Gateways SVG Icons Not Showing

Remi | March 3, 2016 | in Tips

In many payment gateways WooThemes and SkyVerge decided to use SVG files instead of PNG files to display credit cards 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 ion the server the install is hosted on, when HTTPS is enable 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 easily check if the payment gateways that you use provide this filter by search for _use_svg in the source code. If so, then check for the plugin ID and replace gateway_moneris by the ID of your plugin and you’re done!

The author

About the author Remi: Hey! My name is RĂ©mi Corson, i'm a WordPress Expert Developer, i create high level themes and plugins, and i provide free stuff every week on this website!

One comment

  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.


    `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