Changing credit card logos under the payment method on checkout

Last updated

First off, here are the images of credit card logos:  





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) {
    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('') no-repeat; background-size: contain; height: 40px; width: 60px; /* The width should be adjusted depending on your logo */ display: block; }

In the code above should be replaced with actual URL to your image and X in :nth-child(X) is the number of the payment method on checkout.

Back to top
Has the article answered your question?

Awesome! Thanks for your feedback!

Please send us that question. We will be happy to help by email.

Send a message