Styling Custom Product Addons

The form fields in WCPA are easily customizable by styling it using CSS. There are numerous classes to style the fields in a form. You will be able to change the color, background, appearance and so on with using CSS and the concerned classes of the fields. This option will help you to get the plugin fields as you want it to look like.

1. Where to add Custom Styles?

Most of you may have a question that “where we will add these custom styles”?
Normally, you can add the styles you have made in the Additional CSS. Some themes will provide a separate section to add custom styles.

2. How to get to the Additional CSS?

The path to Additional CSS is Appearance -> Customize -> Additional CSS.
Look at the below screenshots.

  1. Appearance -> Customize

2. Additional CSS

3. The marked area of the below screenshot is the place where you need to add the custom CSS codes.

3. What are the Pre-defined classes for Custom Fields?

Common class names of WCPA

ClassUse
wcpa_has_optionsTo select the single product page which contains WCPA forms
wcpa_form_outerTo select every single form
wcpa_form_itemTo select every field
wcpa_cart_has_fieldsTo select fields from cart/checkout
wcpa_cart_priceTo select WCPA option price
wcpa_tooltip_iconTo select a tooltip icon
wcpa_tooltipTo select the tooltip
wcpa_has_priceTo select the fields has price

Let’s have look at the common class names for the custom fields

FieldClass
Text field wcpa_type_text
Text Area wcpa_type_textarea
Number wcpa_type_number
Select wcpa_type_select
Checkbox Group wcpa_type_checkbox-group
Radio Group wcpa_type_radio-group
Image Group wcpa_type_image-group
Color Group wcpa_type_color-group
Google Place Selector wcpa_type_placeselector
File Upload wcpa_type_file
Color Picker wcpa_type_color
Date Field wcpa_type_date
Time wcpa_type_time
Date Time wcpa_type_datetime-local
Paragraph wcpa_type_paragraph
Header wcpa_type_header
Separator wcpa_type_separator

4. Examples

a. Changing color of every custom field label to red

.wcpa_form_item > label{ 
color: #ff0000; 
font-weight: bold;
}

b. Styling input fields

.wcpa_type_text input{
border-radius:5px;
}
.wcpa_type_text input::placeholder{
color:#ff00ff;
font-size:16px;
}

c. Styling selected image shadow of image group

.wcpa_form_outer .wcpa_form_item .wcpa_sel_type_shadow input:checked+img {
    box-shadow: -1px 3px 0px 1px #DC0011 !important;
}
.wcpa_form_outer .wcpa_form_item .wcpa_sel_type_tick-shadow .wcpa_image input:checked~label:after{
    border-style: solid;
    border-width: 0 4px 4px 0;
    border-color: #dc0011;
    right:10px;
}

d. Styling the radio group selection button

.wcpa_form_outer .wcpa_form_item .wcpa_radio input[type=radio]:checked+label .wcpa_check::before {  
  background-color: #cc1d65;
}
.wcpa_form_outer .wcpa_form_item .wcpa_radio .wcpa_check{
border:2px solid #cc1515 !important;
}
.wcpa_type_radio-group label {
    text-transform: uppercase;
    color: #ff0000;
}

e. Styling tooltip icon and tooltip text

.wcpa_form_outer .wcpa_form_item .wcpa_tooltip_icon {
    color: #ffffff;
    background: #2196F3;
}
.wcpa_form_outer .wcpa_form_item .wcpa_tooltip_icon > span {
    background: #2196F3;
    color:#fff;
}
.wcpa_form_outer .wcpa_form_item .wcpa_tooltip_icon:hover:before {
    border-color: #2196F3;
}

f. Styling checkbox group selection button

.wcpa_form_outer .wcpa_form_item .wcpa_checkbox input[type=checkbox]:checked+label .wcpa_check {
    border: 2px solid #2196f3;
    background: #2196f3;
}