Why Aren't WooCommerce Payment Icons Displaying?
Why WooCommerce Payment Icons Break
Gateway plugins typically reference their payment method icons as plain image files, either bundled with the plugin or loaded from the gateway's own CDN. A broken icon is functionally no different from any other broken image on a webpage — a wrong file path, a plugin update that moved or renamed an asset, or a CDN outage on the gateway's side can all cause it. Separately, theme CSS often applies its own sizing or spacing rules to checkout elements, which can squash, misalign, or hide icons even when the underlying image loads fine.
How to Tell Which It Is
- Open the browser's developer console/network tab and look for a 404 or failed request on the icon's image URL — if present, it's a broken asset reference, not a styling issue.
- If the image loads but looks wrong (stretched, cropped, oddly positioned), that's almost always a CSS conflict from the active theme rather than anything gateway-related.
- A recent plugin or theme update is worth checking against the timing of when icons stopped displaying correctly, since either side could have changed something relevant.
- A CDN or caching layer serving a stale, broken version of the icon after a plugin update changed the actual file.
How to Restore the Icons
- Check the console for a broken image request first, to confirm whether it's an asset problem or a styling problem.
- If it's a broken asset, update the gateway plugin to the latest version, or clear any CDN/caching layer that might be serving a stale reference.
- If it's a CSS issue, add a small targeted fix in the theme's custom CSS to correct sizing or alignment for the specific icon elements.
- Clear all caches (page cache, CDN, browser) after any fix, since icon assets are commonly cached aggressively.
Need this fixed properly across the checkout page? See WooCommerce fixes.