Support » Plugin: WooCommerce » Adjust the look of the different payment options in the checkout

Adjust the look of the different payment options in the checkout

  • Resolved gianilsson

    (@gianilsson)


    1 month, 2 weeks ago

    Hi,

    I wonder if it is possible to adjust the look of the payment options in the checkout in order to:

    1) Add logo, change logo and change size of logo next to the payment options. Look at this image and the red arrows to see how I mean: http://oi65.tinypic.com/2enbwp2.jpg

    2) Change the different part payment plans according to the “Part payment” payment option, so that only one part payment plan (with a radio button) per line is displayed. Or alternatively, that the different part payment plans are displayed in a list menu (dropdown) instead with a partial payment plan per line. Look at this image and the red arrows to see how it looks today: http://oi65.tinypic.com/2roj4ea.jpg

    Is it possible to make adjustments to achieve this with extra css code?

    Thank you in advance!

    • This topic was modified 1 month, 2 weeks ago by  gianilsson.
Viewing 9 replies - 16 through 24 (of 24 total)
1 2
  • Stef

    (@serafinnyc)

    1 month, 2 weeks ago

    No, that entire line needs to be removed. There are a few style rules that need to be removed to help make everything smooth.

    I’m not sure where that file is either. I think you have a cache deal on your site and it’s hidden behind all that.

    gianilsson

    (@gianilsson)

    1 month, 2 weeks ago

    Hi again serafinnyc,

    Ok.

    Ok, the entire line! If I find that css code and delete the entire line – do you think the line comes back again in the next update? 

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

    Again, thank you so much for all your help!! 🙂

    • This reply was modified 1 month, 2 weeks ago by  gianilsson.
    Stef

    (@serafinnyc)

    1 month, 2 weeks ago

    All three will stack like you want. Yes.

    You’re welcome!

    gianilsson

    (@gianilsson)

    1 month, 2 weeks ago

    Ok! Thank you very much, serafinnyc!! 🙂

    Stef

    (@serafinnyc)

    1 month, 2 weeks ago

    Anytime!

    gianilsson

    (@gianilsson)

    1 month, 2 weeks ago

    Hi again serafinnyc,

    You are fantastic!! I found the css-file – it was in the following directory: /wp-content/cache/css/f9f7d.css

    So I did exactly that you told me to do – and voila!! It worked!! Thank you!! 🙂 Is it possible to get the radio-buttons centered before the text?

    Is this file going to be updated so the line you told me to remove in the f9f7d.css-file comes back again? If so, can I do so something to prevent that?

    If you would like to check how it looks in the checkout now – please, remember to add products in the shopping bag for at least 1000 SEK (otherwise the “SveaWebPay Delbetalning” won’t show).

    Again, thank you so much for all your help and for your patience!!! 🙂

    • This reply was modified 1 month, 2 weeks ago by  gianilsson.
    gianilsson

    (@gianilsson)

    1 month, 2 weeks ago

    Hi again serafinnyc,

    I just want to mention that when I am logged in to WordPress admin, and at the same time is in the webshop in another tab and goes to the checkout, the different part payment plans under “Svea Delbetalning” are displayed in the same way as earlier.

    If I log out of WordPress admin and then go to the checkout in the webshop again, then everything looks great again under “Svea Delbetalning”!! 🙂

    It doesn’t really matter to me, for the important thing is that it looks good for the customer! 🙂 But I just want to mention it to you in case this does matter (somehow) for the css code.

    Thank you very much for all your help!! 🙂 I am so happy!! 🙂

    • This reply was modified 1 month, 2 weeks ago by  gianilsson.
    • This reply was modified 1 month, 2 weeks ago by  gianilsson.
    • This reply was modified 1 month, 2 weeks ago by  gianilsson.
    • This reply was modified 1 month, 2 weeks ago by  gianilsson.
    Stef

    (@serafinnyc)

    1 month, 2 weeks ago

    If it breaks when you’re logged in then you can always add an additional class to the CSS I gave you above by copying the above and pasting it and then adding

    .logged-in before the other class styles.

    Example

    .logged-in .wc_payment_method label, .logged-in .woocommerce-PaymentMethod label {
    /*custom css styles here*/
}
    gianilsson

    (@gianilsson)

    1 month, 2 weeks ago

    Hi again,

    If I understand you correctly, you mean that the code should look like this:

    
.logged-in .wc_payment_method label, .logged-in .woocommerce-PaymentMethod label {
    width: auto;
    padding: 0 !important;
}

    And I think you mean that I should add this code in the extra css? I tried that, but it didn’t worked, but maybe I did something wrong … or maybe you meant that I should add this code to the file /wp-content/cache/css/f9f7d.css ? I tried that too, but it didn’t worked either …

    Maybe I have misundertood something in the code …

    Thank you very much!! 🙂

Viewing 9 replies - 16 through 24 (of 24 total)
1 2
  • You must be logged in to reply to this topic.

Views