Styling the payment method selections at checkout

  • Resolved jokubas2000k

    (@jokubas2000k)


    3 years, 9 months ago

    Hi,

    I would like to be able to style the payment method selections at checkout. What would be the correct CSS selectors to separately target the checked, unchecked and hovered states of the payment method selections?

    https://ibb.co/vwXnq4H

    Thanks

    • This topic was modified 3 years, 9 months ago by jokubas2000k.

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

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

  • Hello @jokubas2000k ,

    This is a good question!

    The payment methods can be targeted using this class – .woocommerce-checkout .wc_payment_methods .wc_payment_method

    Each payment method has its own class so you have these two to identify individually –

    .woocommerce-checkout .wc_payment_methods .wc_payment_method.payment_method_stripe
.woocommerce-checkout .wc_payment_methods .wc_payment_method.payment_method_paypal

    For hovered state, you can use –
    .woocommerce-checkout .wc_payment_methods .wc_payment_method:hover

    There is no difference between checked & unchecked classes so you are unable to target that directly without having a custom Javascript to help you identify these states.

    I hope this information helps.

    Thank you ??

    Thread Starter jokubas2000k

    (@jokubas2000k)

    Hi @rur165,

    Thank you for your answer.

    I was able to directly style the checked state of the payment methods using:

    #payment_method_stripe:checked + label, #payment_method_paypal:checked + label {
  border-color: #000;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Styling the payment method selections at checkout’ is closed to new replies.