Checkout page css

  • Resolved mipqim

    (@yoencaz)


    6 years, 5 months ago

    Hello.
    On my site on the checkout page I want to change the color of the payment selections. More specifically I want have a new active color on the background-color when each payment selection is clicked on. This might be simple, but I am new to this and get confused. For example I am not sure about how to know what class/id to target when using the inspector and also not how to assign the “a:active” to this piece of code.

    Anyone has time to help me out ? 🙂

    //Hannes

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • MakeWebBetter

    (@makewebbetter)

    6 years, 5 months ago

    Hello,

    If you want to change the background color on the selection you will need to add this CSS in your theme customizer.

    #payment .payment_methods li input[type=”radio”]:first-child:checked + label::before {
    color: #FFF;
    }

    We hope this will accept you in what you want.

    Regards,

    Thread Starter mipqim

    (@yoencaz)

    6 years, 5 months ago

    Super thanks!

    Unfortunately nothing happens when pasting in that code in my css customizer. I have tried different color proporties and different colors, but the “target” (what stands before brackets does not seem to be right because nothing happens.
    What do you think I am getting wrong here?

    //Hannes

    MakeWebBetter

    (@makewebbetter)

    6 years, 5 months ago

    Hello,

    Don’t Worry, Can you please share the exact location where you want to change the background color so that we can check and provide the correct CSS fo you.

    Regards,

    Thread Starter mipqim

    (@yoencaz)

    6 years, 5 months ago

    Absolutely!

    Site:
    https://yoenca.com/checkout/

    My wish:
    There are three payment alternatives. I want to customize that area, like changing background-color on the specific alternative that is selected. I would also like to change the color of the grey round button on each payment alternative, and change the active/hover color of it. In addition to this, could you please help me understand how I could identify the proper classes/id for these elements using the inspector, because I find this confusing :/

    Thanks!

    Plugin Support Ryan Ray, a11n

    (@ryanr14)

    6 years, 5 months ago

    Hi @yoencaz,

    To first confirm you’d like to take this gray background color and replace it where the background color alternates every other payment method? Or do you just want to change the background color of the method selected?


    Link to image: https://cld.wthms.co/Gpq3Jt

    I also just now ran into an error trying to view your checkout page after selecting Klarna. The only hint I see is this in the URL. https://yoenca.com/cart/?kco-order=error&reason=VW5hdXRob3JpemVk

    I can no longer get to checkout with that error. :\

    MakeWebBetter

    (@makewebbetter)

    6 years, 5 months ago

    Hi @yoencaz,

    Agree with you we are also facing the same issue when we are selecting klarna payment method

    So please check your payment issue first.

    and if you want to change the radio button color on the payment selection use this CSS(use !important if it’s not working default)

    #payment .payment_methods > li .payment_box, #payment .place-order {
    background-color: gray;
    }

    To change the background color on the selection of payment method this CSS is working from our end please check it by using !important (tag)

    #payment .payment_methods li input[type=”radio”]:first-child:checked + label::before {
    color: #FFF !important;
    }

    Regards,

    Thread Starter mipqim

    (@yoencaz)

    6 years, 5 months ago

    @ryanr14
    The background color (the grey background now) I would like to change some other color when that particular payment method is selected. Note that the “unfolded” section accompanied with one selected payment method, I would like the same active background color there. In your picture you have clicked on the first payment method, and then there is a info area that unfolds. (both these should have the same active background color.

    I am aware of the Klarna doesnt work properly, the other methods might fail to work properly also, but right now I focus on the actual color pic. Thanks anyway!

    @makewebbetter

    Regarding your first code: `#payment .payment_methods > li .payment_box, #payment .place-order {
    background-color: gray;
    }

    It works in regards to that something happens (see my screenshot), but as you can see in my screenshot this code only activates the “unfolded info box” not the “actual click payment button background itself”. Is it possible to activate both of these boxes?

    Your second code does unfortunately not work at all 🙁

    Thread Starter mipqim

    (@yoencaz)

    6 years, 5 months ago

    Sorry I failed to upload the picture. If you find my description good, perhaps it is not necessary. If it is, please tell me how to?

    MakeWebBetter

    (@makewebbetter)

    6 years, 5 months ago

    Hello,

    We are adding this CSS through firebug and it’s working fine from our end.

    And also your screenshot is not showing here so we are not able to understand the issue so if possible please provide the correct screenshot so that we can check the issue and provide you the best possible solution.

    Regards.

    Thread Starter mipqim

    (@yoencaz)

    6 years, 5 months ago

    I solved it thanks! 🙂

    Luminus Alabi

    (@luminus)

    Automattic Happiness Engineer

    6 years, 5 months ago

    Hey @yoencaz,

    That’s fabulous news.

    I’ll go ahead and mark this thread as resolved now.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Checkout page css’ is closed to new replies.