First off, here are the images of credit card logos:
Discover: https://sassme.ecwid.com/static/v1/icons/discover.svg
Mastercard: https://sassme.ecwid.com/static/v1/icons/mastercard.svg
Amex: https://sassme.ecwid.com/static/v1/icons/amex.svg
Visa: https://sassme.ecwid.com/static/v1/icons/visa.svg
Next step is to add it to Ecwid. Upload the image to your site. Then add the following custom CSS rules:
/* Hide current logos of the payment method */
.ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X)
div.ec-cart-accept__icons {
display: none;
}
/* Add custom logo for the payment method */
.ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X)
.ec-radiogroup__info:after {
content: '';
background: url('https://example.com/your_image.jpg') no-repeat;
background-size: contain;
height: 40px;
width: 60px; /* The width should be adjusted depending on your logo */
display: block;
}
In the code above https://example.com/your_image.jpg should be replaced with actual URL to your image and X in :nth-child(X) is the number of the payment method on checkout.
