How do I override the icons used in checkout?

This page explains how to modify the icons used in the checkout.

For any of the customizations below, download a plugin like Simple Custom CSS and JS, and add a Custom CSS snippet.

WooCommerce Alipay Icon

/* Override Alipay Icon */
.wc_payment_methods.payment_methods .wc_payment_method.payment_method_china_payments_stripe_alipay label > img {
    /* Update the url below with the location of your custom icon */
    content: url('https://your-domain.com/wp-content/uploads/custom-alipay-icon.svg') !important; 
    width: 100px; /* Set the width of the icon as needed */
    height: auto; /* Maintain aspect ratio */
}

WooCommerce WeChat Pay Icon

/* Override WeChat Pay Icon */
.wc_payment_methods.payment_methods .wc_payment_method.payment_method_china_payments_stripe_wechat label > img {
    /* Update the url below with the location of your custom icon */
    content: url('https://your-domain.com/wp-content/uploads/custom-wechat-pay-icon.svg') !important; /* URL to the new icon */
    width: 100px; /* Set the width of the icon as needed */
    height: auto; /* Maintain aspect ratio */
}