12-05-2016, 08:08 AM
|
 |
Ecwid Team
|
|
Join Date: Feb 2015
Posts: 452
|
|
Quote:
Originally Posted by ADHD
Hi
I want to change the logo payments under my 3 different payment methods.
I really tried everything, read every thread about it, but I just can't get it fixed.
So I really need help!
There are 3 different payment methods
1) iDeal
This is most important one, it shows 3 creditcard logo's, but it's a method for Dutch banks, so you will use your debitcard from your bank.
I only want the iDeal logo underneath the radio button and no other logo's.
2) Creditcard by 2checkout. This one is fine by itself, with the 3 creditcard logo's
3) Paypal
So I tried some stuff, and now it shows 4 logo's. Paypal logo en 3 creditcards.
I only want the Paypal logo to show. no creditcards.
Because now underneath every radio button payment method it shows the same 3 creditcards, this might confuse the customer.
Please help
|
Hello,
Ecwid Customer Care team here. Thanks for the question.
It's possible to change absolutely any element in an Ecwid store by means of CSS.
This particular task is not as simple as most customizations you might need, however it's also totally doable with CSS child selectors and pseudo-elements.
As far as I understand from your description of what needs to be done, you need it to look like this:
Here's the code you need to add to the currently active custom CSS theme in Ecwid Control Panel ➞ Settings ➞ Design to make that happen:
Code:
.ecwid-PaymentMethodsBlock-PaymentOption:nth-child(3) img:nth-child(2),
.ecwid-PaymentMethodsBlock-PaymentOption:nth-child(3) img:nth-child(3),
.ecwid-PaymentMethodsBlock-PaymentOption:nth-child(3) img:nth-child(4) {
display: none
}
.ecwid-PaymentMethodsBlock-PaymentOption:nth-child(1) img:nth-child(1),
.ecwid-PaymentMethodsBlock-PaymentOption:nth-child(1) img:nth-child(2),
.ecwid-PaymentMethodsBlock-PaymentOption:nth-child(1) img:nth-child(3) {
display: none
}
.ecwid-PaymentMethodsBlock-PaymentOption:nth-child(1):after {
content: "Custom image";
background: url('http://www.spijkgoods.com/spijkgoods.com/wp-content/uploads/2015/10/Ideal.png') no-repeat;
background-size: 50px;
font-size: 40px;
margin-left: 20px;
color: transparent;
}
Just add the codes below all the other rules you have in the custom theme and save changes. Make sure to reload the page with your store to see the updated layout.
Hope this helps. Feel free to ask if any more questions appear.
__________________
Roman I.
Ecwid Customer Care Team
More tips and hints on Ecwid use in our  Help Center
⬇ Please click Thanks if my reply helped you.
|
Linear Mode
