Title: Checkout page css Last modified: November 24, 2019 --- # Checkout page css * Resolved [mipqim](https://wordpress.org/support/users/yoencaz/) * (@yoencaz) * [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/) * 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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcheckout-page-css-2%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 11 replies - 1 through 11 (of 11 total) * [MakeWebBetter](https://wordpress.org/support/users/makewebbetter/) * (@makewebbetter) * [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/#post-12171081) * 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](https://wordpress.org/support/users/yoencaz/) * (@yoencaz) * [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/#post-12171601) * 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](https://wordpress.org/support/users/makewebbetter/) * (@makewebbetter) * [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/#post-12172694) * 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](https://wordpress.org/support/users/yoencaz/) * (@yoencaz) * [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/#post-12173085) * Absolutely! * Site: [https://yoenca.com/checkout/](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](https://wordpress.org/support/users/ryanr14/) * (@ryanr14) * [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/#post-12175196) * Hi [@yoencaz](https://wordpress.org/support/users/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](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](https://yoenca.com/cart/?kco-order=error&reason=VW5hdXRob3JpemVk) * I can no longer get to checkout with that error. :\ * [MakeWebBetter](https://wordpress.org/support/users/makewebbetter/) * (@makewebbetter) * [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/#post-12176574) * Hi [@yoencaz](https://wordpress.org/support/users/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](https://wordpress.org/support/users/yoencaz/) * (@yoencaz) * [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/#post-12180113) * [@ryanr14](https://wordpress.org/support/users/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](https://wordpress.org/support/users/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](https://wordpress.org/support/users/yoencaz/) * (@yoencaz) * [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/#post-12180124) * 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](https://wordpress.org/support/users/makewebbetter/) * (@makewebbetter) * [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/#post-12184905) * 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](https://wordpress.org/support/users/yoencaz/) * (@yoencaz) * [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/#post-12200486) * I solved it thanks! 🙂 * [Luminus Alabi](https://wordpress.org/support/users/luminus/) * (@luminus) * Automattic Happiness Engineer * [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/#post-12205684) * Hey [@yoencaz](https://wordpress.org/support/users/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. * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504) * [WooCommerce](https://wordpress.org/plugins/woocommerce/) * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq) * [Support Threads](https://wordpress.org/support/plugin/woocommerce/) * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/) * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/) * 11 replies * 4 participants * Last reply from: [Luminus Alabi](https://wordpress.org/support/users/luminus/) * Last activity: [6 years, 5 months ago](https://wordpress.org/support/topic/checkout-page-css-2/#post-12205684) * Status: resolved