1. Home
  2. Knowledge Base
  3. WooCommerce Product Options
  4. Developer Documentation

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

The wrapper <div> around the product options.

The wrapper <div> around the price totals.

The wrapper <span> around an option price.

The wrapper <div> around a field.

The wrapper <p> around the field description.

The wrapper <p> around the option name.

Related Articles

If searching the knowledge base hasn't answered your question, please contact support.