📎

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 
Customize Options Title *
#avpoptions-container .ap-label-tooltip label {
​
}
Customize Radio Buttons Options *
#avpoptions-container input[type="radio"] {
​
}
Customize Checkboxes Options *
#avpoptions-container input[type="checkbox"] {
​
}
Customize for both Radio Buttons and Checkboxes options *
#avpoptions-container .avp-productoptioncheckwrapper > input {
​
}
Customize for both Text and Radio Buttons options *
#avpoptions-container input + span {
 
}
#2 Elements customize code for Text 
Bold Text *
font-weight: bold !important;
Change Text size
font-size: 18px !important;
Change Text Color
color: #E70D0D !important;
Change font
font-family: 'DynaPuff', cursive !important;
​
#3 Elements customize code for Options 
Change border-color
border-color: #E70D0D !important;
Add background color
background-color: #E70D0D !important;
Maximize width and height
width: 100% !important;
height: 40px !important;
Create more blank space
padding: 0.75rem 1.5rem !important;
Delete blank space
padding: unset !important;
Create shadow
box-shadow: 0px 0px 3px 0px #000000 !important;
Round the border
border-radius: 6px !important;
Add border
border: 1px solid #000000 !important;
Delete border
border: unset !important;
Align right, left, top, bottom
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
Change 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;
}

Customizations - Previous

Customize “Options - Select” code

Next - Customizations

Customize Options Swatches

Last modified 1mo ago