Return to previous page

Customize payment buttons radio with css

This topic has 7 replies, 3 voices, and was last updated 2 years, 10 months ago ago by Olga Barlow

Fab

Participant

February 23, 2022 at 18:04

Hello team
I would like to customize the payment buttons radio:

Checked expected #d31816
unchecked expected #332d45
https://prnt.sc/2f4x5CDHB48W

I’m on localhost and I use WPBakery
Thank you in advance

Fab

#318249 Copied Theme version: 8.1.1

6 Answers
John Holden

Support staff

February 24, 2022 at 13:49
Thank you for contacting us.
Please put these CSS codes into your theme:
WP Dashboard > Appearance > Customize > Custom CSS:
```
.cart-order-details input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 100%;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffffff;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid #332d45;
    }
.cart-order-details input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 100%;
        top: -2px;
        left: -1px;
        position: relative;
        background-color:  #d31816;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid #d31816;
    }
```
Please keep me posted.
Regards
#318325 Copied
Fab

Participant

February 24, 2022 at 15:24

Hi John
Thanks for the code but after putting it in the Custom CSS it doesn’t work.

/*Checkout radio buttons*/

.cart-order-details input[type=’radio’]:after {
width: 15px;
height: 15px;
border-radius: 100%;
top: -2px;
left: -1px;
position: relative;
background-color: #ffffff;
content: ”;
display: inline-block;
visibility: visible;
border: 2px solid #332d45;
}
.cart-order-details input[type=’radio’]:checked:after {
width: 15px;
height: 15px;
border-radius: 100%;
top: -2px;
left: -1px;
position: relative;
background-color: #d31816;
content: ”;
display: inline-block;
visibility: visible;
border: 2px solid #d31816;
}

#318341 Copied

Olga Barlow

Support staff

February 24, 2022 at 15:50

Hello,

In this case, we need access to your site to check and help you. So, provide us with access once you move that to live server.

Regards

#318350 Copied

Fab

Participant

February 24, 2022 at 16:19

Ok
I plan to develop online next week I will come back to you for this need.
In the meantime I will probably have other questions for you 😉
Regards

Fab

#318355 Copied

Olga Barlow

Support staff

February 24, 2022 at 16:42

Hello,

Ok, sure. Take your time.
Create separate topics for other questions.

Regards

#318360 Copied

Olga Barlow

Support staff

February 24, 2022 at 16:42

Hello,

Ok, sure. Take your time.
Create separate topics for other questions.

Regards

#318361 Copied
Tagged: buttons, customize, payment, radio, woocommerce, wordpress
Viewing 7 results - 1 through 7 (of 7 total)