Return to previous page

How to change payment gateway logo or icons

This topic has 14 replies, 4 voices, and was last updated 9 years, 1 months ago ago by Jack Richardson

groubee

Participant

September 13, 2015 at 01:29

Hi

Do you know if og how we can change the payment gateway logo or icons? I know where via ftp, but I need to show a large/longer image then now, so I can show all the creditcards they take. Is it possible to style or do you know where I can change the height and width?

See https://www.dropbox.com/s/t0l1024gt1sncry/change-gateway-icon.jpg?dl=0

I hope you can help me 🙂

best regards
Tonny

#86440 Copied

13 Answers
Eva Kemp

Support staff

September 14, 2015 at 10:23
Hello,

You can use this code in custom.css:
```
.payment_methods li label img {
    max-width: 340px;
    width: 200px;
    height: 50px;
}
```
Regards,
Eva Kemp.
#86570 Copied
groubee

Participant

September 14, 2015 at 16:38

Hi Eva,

Thanks a lot!! is it possible to make it bigger than 200×50? I have tried but no cigar 🙁

Best regards
Tonny

#86708 Copied

Eva Kemp

Support staff

September 14, 2015 at 18:09

Hello,

You need also increase max-width: 340px; value in the code. Please try it.

Regards,
Eva Kemp.

#86752 Copied

groubee

Participant

September 14, 2015 at 18:49

Sorry I dont understand – I have added

.payment_methods li label img {
max-width: 340px;
width: 200px;
height: 50px;
}

…to the custom.css file, where else do I have to added it?

#86770 Copied
Eva Kemp

Support staff

September 14, 2015 at 20:22
Hello,

If you want to make image bigger than 200x50px, for example 400×200, then you need use this code:
```
.payment_methods li label img {
    max-width: 400px;
    width: 400px;
    height: 200px;
}
```
Add values to your needs.

Regards,
Eva Kemp.
#86801 Copied
groubee

Participant

September 14, 2015 at 21:13

Ok – now it works great!!

is it possible to keep the text align with the radiobutton on mobile? with a w990px the “Betal med” text moves down and is now align with anything?

see: http://www.smooff.net/kassen/

Best regards
Tonny

#86820 Copied
Robert Hall

Support staff

September 14, 2015 at 21:41
Hello,

Try to use this code in custom css for desktop.
```
.payment_methods input[type="radio"]{
    top: 22px;
}
```
Regards,
Robert Hall.
#86825 Copied
groubee

Participant

September 14, 2015 at 21:47

Nope, it didn work, it changes the normal view and moves the button down 22px, but it does look good in w990px, but not in bigger size… that is not a solution 🙁

#86827 Copied

Robert Hall

Support staff

September 14, 2015 at 21:52

Hello,

Please provide us with wp-admin access in Private Content.

Regards,
Robert Hall.

#86830 Copied

groubee

Participant

September 14, 2015 at 22:18

Hi Robert,

You have already access and I can see you are working on the site 🙂
http://dev-smooff.serv10.powerhosting.dk/?lang=en

I can also see why you thougt the solution, I have change the text, it is now shorter. I was working on out live site http://www.smooff.net/

#86833 Copied

Eva Kemp

Support staff

September 15, 2015 at 09:15

Hello,

As I see image is shown fine now.
Do you still want to customize it?
If so please specify how it should look.

Regards,
Eva Kemp.

#86912 Copied

groubee

Participant

September 15, 2015 at 10:57

Hi Eva,

Yes I would love to customize it 🙂

See: https://www.dropbox.com/s/7xm7u549xyobjem/not%20nice.png?dl=0

If the text could stay align with the radiobutton in all media and then the image could jump down under the text and be in center of the box with same distance between text and image like now.

Best regards
Tonny

#86949 Copied
Jack Richardson

Support staff

September 15, 2015 at 12:23
Hello,

Please use this code in custom.css:
```
.payment_methods li label img {
  display: block;
}
```
Best regards,
Jack Richardson.
#86983 Copied
Tagged: best selling woocommerce, change payment gateway, ecommerce payment gateway, payment gateway customization, payment gateway icons, payment gateway logo, woocommerce themes
Viewing 14 results - 1 through 14 (of 14 total)