Radio button formating

First Option
I’d just use CSS specificity to select the radio buttons on the page you’re looking for. If it was on the product page it would be something like

body.single-product input[type="radio"] {
  /*  your css here */
}

Second Option

I would go about this by using WooCommerce’s templating system.
This information tells you how to override templates within your theme. So you’d basically find which template outputs the radio buttons, copy it over to your theme file in the correct location and add in the class you’re looking for.

Thank you could you help clean this up?

body.single-product input[type="radio"] {
.radio {
    opacity: 0;
    position: absolute;
}

.radio, .radio-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.radio-label {
    position: relative;
}

.radio + .radio-label:before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.radio + .radio-label:before {
    border-radius: 50%;
}

.radio:checked + .radio-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    color: #bbb;
}

.radio:focus + .radio-label {
  outline: 1px solid #ddd; /* focus style */
}
}