CSS custom properties & selectors
CSS custom properties
WooCommerce Products Options includes great field styles out of the box. However if you wish to to customize the fields, the following CSS custom properties are available on the .wpo-options-containerelement.
.wpo-options-container {
--wpo-input-focus-color: #089ec7;
--wpo-input-border-radius: 4px;
--wpo-input-border-color: #eee;
--wpo-input-border-color-alt: #e1dfdf;
--wpo-input-background-color: #fff;
--wpo-input-error-color: #c00;
--wpo-input-font-size: 15px;
--wpo-description-font-size: 13px;
--wpo-group-name-font-size: 1.3em;
--wpo-option-name-font-size: 1.1em;
--wpo-option-price-font-size: 12px;
}
You can overwrite these properties to easily change the general look and feel of your product options. For example if you wanted to change the focus color on input elements you can use the following CSS:
// change the input focus color to black
.wpo-options-container {
--wpo-input-focus-color: #000;
}
CSS selectors
.wpo-options-container
The wrapper <div> around the product options.
.wpo-totals-container
The wrapper <div> around the price totals.
.wpo-price-container
The wrapper <span> around an option price.
.wpo-field
The wrapper <div> around a field.
.wpo-field-description
The wrapper <p> around the field description.
.wpo-option-name
The wrapper <p> around the option name.