🎨

Customize Options Radio Buttons, Checkboxes

Customize the look of product options to match your brand image.
Access our app, go to Design. You may need some CSS knowledge to customize the look of your options. Nevertheless, our team is always ready to customize it for you for FREE. Feel free to let us know via in-app live chat, or email us: [email protected].

#1 Customize Code

#avpoptions-container .ap-label-tooltip label {
}
#avpoptions-container input[type="radio"] {
}
#avpoptions-container input[type="checkbox"] {
}
#avpoptions-container .avp-productoptioncheckwrapper > input {
}
#avpoptions-container input + span {
}

#2 Elements customize code for Text

font-weight: bold !important;
font-size: 18px !important;
color: #E70D0D !important;
font-family: 'DynaPuff', cursive !important;

#3 Elements customize code for Options

border-color: #E70D0D !important;
background-color: #E70D0D !important;
width: 100% !important;
height: 40px !important;
padding: 0.75rem 1.5rem !important;
padding: unset !important;
box-shadow: 0px 0px 3px 0px #000000 !important;
border-radius: 6px !important;
border: 1px solid #000000 !important;
border: unset !important;
margin-left: 0.5rem !important;
margin-right: 0.5rem !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;

#4 Additionally - Change the Radio Button color

#avpoptions-container input[type='radio'] {
-webkit-appearance: none;
width: 1rem;
height: 1rem;
border-radius: 50%;
outline: none;
border: 1px solid gray;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
#avpoptions-container input[type='radio']:before {
content: '';
display: block;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
}
#avpoptions-container input[type="radio"]:checked:before {
background: #fe6361;
}
#avpoptions-container input[type="radio"]:checked {
border-color:#fe6361;
}