Adjust the look of the different payment options in the checkout

You can change a lot of this with hooks and css combined. It’s hard to give you the info to do that though based on images and not a live site to view.

To change PayPal logo you can do this (not sure your of your theme whether parent or child) but you will need to CSS it yourself.

change the icons for pay pal
     function replacePayPalIcon($iconUrl) {
  return get_bloginfo('stylesheet_directory') . '/img/custom-logo.png';
}
add_filter('woocommerce_paypal_icon', 'replacePayPalIcon');

For SVEA is that a plugin you’re using or custom coded API?

• This reply was modified 5 years, 10 months ago by Stef.

Hi again serafinnyc,

Thank you for your reply!
Yes, SVEA is a plugin (WooCommerce SveaWebPay Payment Gateway).

I am gonna look into the code you wrote tomorrow (it is almost midnight here now).
Thank you! ??

Is it Free? I would need to look at the scripts to write a change script. Just note I wrote that PayPal one a while back. I will check when I’m back. It might not work.

Svea I’ll check too.

Hi again serafinnyc,

Yes, the SVEA-plugin is free. The creator of this plugin told me that the appearance of the various Part payment plans looks different in different themes etc.

Here is a link to my website: https://estelle.nu
The part payment only shows in the checkout when the order amount exceeds 1000 SEK.

Ok, I understand. Thank you so much for your help!! ??

• This reply was modified 5 years, 10 months ago by g-nilsson.
• This reply was modified 5 years, 10 months ago by g-nilsson.

So I noticed with SEVA it has an array listed in their script. It is based on the user’s location. ie Finland, Norway, Sweden etc. The icon I guess changes based on their location. From what I can tell anyway. So I’m not sure you want to change that. Best to use CSS for that. But I’d need to know what you want there. Is it too small? See CSS below. Plus I didn’t want to have to register for a test account etc. It was too time consuming.

For PayPal I tested and the code I provided above still works. I just made it edited it a bit and made it easier with a URL to PayPal’s library of logos. You’ll be able to view which ones online at their library.

// Change PayPal icon
function replacePayPalIcon($iconUrl) {
    return 'https://www.paypalobjects.com/webstatic/mktg/logo/PP_AcceptanceMarkTray-NoDiscover_243x40.png'; // change this to your IMAGE URL
}
add_filter('woocommerce_paypal_icon', 'replacePayPalIcon');

As for SEVA you can CSS the icon bigger by adding this

.woocommerce #payment .payment_methods.methods label[for="payment_method_sveawebpay_invoice"] img{
    width:90px !important;
    height:48px !important;
    max-width:none !important;

}

Hope that helps

Hi again serafinnyc,

Thank you so much for all your help!!!!
The css-code to change the size of the SVEA-logo works ABSOLUTELY PERFECT!! Thank you so much!!!! ??

I truly understand you don’t want to register!! Of course!! On the following image I show you how I would like it to be – one “Part payment” plan option on each separate row:
https://oi63.tinypic.com/2zretfl.jpg

Is that something that can be fixed with extra css-code?

Because as it is right now, the “Part payment” plan options are displayed in a messy way: https://oi65.tinypic.com/2roj4ea.jpg

Is it possible to add an image to this extra css-code? If so, how and where? (I was looking at the code you gave me regarding the SVEA-logo and only changed the payment_method)

.woocommerce #payment .payment_methods.methods label[for=”payment_method_payment_method_bacs”] img {
width:81px !important;
height:35px !important;
max-width:none !important;

}

I have never used child theme before, but I have now tried to add a child theme to my website. First by manually adding a directory + style.css + functions.php but I couldn’t get it to work properly (the website became only white). Then I tried two different child theme-plugins (I thought maybe that was safer to me) but unfortunately the first plugin changed the website so things like logo and colors disappered from the original website – and the second plugin (Child Theme Configurator) gave me following info, but I don’t know exactly what that means:
https://oi63.tinypic.com/28cq0qs.jpg

I am really sorry, but I think I am now too scared to even try to add a child theme one more time to my website and I feel terrible that you have spent a lot of time to trying to help me with code to add in a child theme!! I really, really apologize for that!!!!!! So please, do not spend any more time to help me with “child theme-code”!!

It is another thing with extra CSS-code – is so much easier.
Thank you very much!!

• This reply was modified 5 years, 10 months ago by g-nilsson.
• This reply was modified 5 years, 10 months ago by g-nilsson.
• This reply was modified 5 years, 10 months ago by g-nilsson.
• This reply was modified 5 years, 10 months ago by g-nilsson.

The post is deleted.

• This reply was modified 5 years, 10 months ago by g-nilsson.
• This reply was modified 5 years, 10 months ago by g-nilsson.

yeah I saw that. Let me read what you said here. BRB

Can you give me an invoice number to test? I believe that’s the only way I can see that portion yes?

Hi again serafinnyc,

Do you mean an invoice number to test the “Part payment” plan options?

• This reply was modified 5 years, 10 months ago by g-nilsson.

I need to see that mangled payment option I’m not able to see that without adding an invoice number no? Because I’m not seeing any issues like this.

Hi agian,

Could it be that the “part payment plans” shows different in different browsers, so that in some browsers will one “part payment plan” shows per every row? But as you can see in the picture, in my browser it looks messy:
https://oi65.tinypic.com/2roj4ea.jpg

I have now set the payment method “SveaWebPay Delbetalning” in test mode (that is the only payment method that is set in test mode right now). You can “buy” this article:
https://estelle.nu/produkt/bank-100-cm/

and then in the checkout you have to choose the payment method “SveaWebPay Delbetalning” and right below you have to enter this number under PERSONNUMMER (it is in red text)

4605092222

and after that you click on “Hamta adress“-button (it is a green button). Check the box “Jag har l?st och godk?nner webbplatsens villkor” (=terms) and then click on “SLUTF?R K?P“-button (it is a black button at the bottom).

Please, let me know when you have tested it enough! Thank you very much for your help!! ??

• This reply was modified 5 years, 10 months ago by g-nilsson.
• This reply was modified 5 years, 10 months ago by g-nilsson.
• This reply was modified 5 years, 10 months ago by g-nilsson.

Ah now it is showing for me without having to enter anything. BRB

You have a few things of CSS that is interfering with that portion. That’s why it’s mangled.

There are several items conflicting there. I’m not sure what this one CSS file is F9F7D maybe it’s from the plugin I’m not sure but there are too many in that ruining the look You need to find this CSS in your CSS file. Maybe it’s something being minified. I’m not sure.

.wc_payment_method label, .woocommerce-PaymentMethod label {
    display: inline !important; <-- this needs to be removed 
    width: auto;
    padding: 0 !important;
}

The way they have that coded isn’t great to CSS perfectly. You would have to add separate ID for each radio button and text. I wish they had wrapped each line with a class.

Hi again serafinnyc,

I have looked after the CSS file F9F7D, but I can not find it … I have checked so many css-files now, but I can not find it … I haven’t checked all the plugins yet, but some of them …

I guess you mean that !important needs to be removed in the following code, right? But after next update, !important is going to be back in the code again, right?

.wc_payment_method label, .woocommerce-PaymentMethod label {
    display: inline !important; <-- this needs to be removed 
    width: auto;
    padding: 0 !important;
}

Ok, I understand that they havn’t coded it so great …

However, If I found the css-file F9F7D – do you think it is possible to do the changes I would like to do with extra css-code? Or do you think it is impossible without a child theme to do the changes I would like to do?

Thank you so much for your help!! ??

PS: I deactivate the test mode now on “Svea Delbetalningar”.

• This reply was modified 5 years, 10 months ago by g-nilsson.