Changing credit card logos under the payment method on checkout

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.

Was this article helpful?

Awesome! Thanks for your feedback!

Sorry about that! We are here to assist you by email or chat.

Contact support