How to change the style of specific options within a Calculator

To change the style of a specific option, within a calculator, you will need to follow this example below.

  1. Edit the option you want to style with custom CSS.
  2. Click Show Advanced (advanced settings will be shown)
  3. Add a Class Name to the option.

2. Add the following code to yourCalculator Styles section.

  • Substitute “yourclassname” with the Class Name you gave your option in step 1.
.yourclassname {
 /* your css styles here */

}

  • Change the size of a Swatch Option
.yourclassname .swatch.swatch-image{
  width: 55px !important;
  height: 55px !important;
}