Probo Connect for WooCommerce
Adding custom styling
It is possible to add your own custom styling to the Probo plugin.
The entire styling of the Probo components works through CSS custom properties
(variables that start with --connect-). The plugin sets these on :root in the
<head> of every page. Both the admin settings and a custom stylesheet target the exact
same variables.
These variables apply consistently to:
- the product configurator,
- the delivery date options,
- the shipping methods,
- the uploader component.
So changing one color takes effect everywhere at once.
There are two ways to style:
- Via the settings — for shop managers, no code.
- Via a custom stylesheet — for theme builders.
1. Via the settings (no code)
WooCommerce → Settings → Probo Connect → Styling Settings.
- At the top, enable "Enable Simple Styling" (option
probo_custom_styling_enabled, enabled by default). If this is off, no custom CSS is output and everything falls back to the default look. - Fill in the fields. They are grouped into Colors, Typography, Layout and Status colors. Each field writes out one CSS variable.
- Save. The change is immediately visible on the frontend (clear any page cache if needed).
Only filled-in fields are output. If you leave a field empty, the default value for that element remains in effect.
2. Via a custom stylesheet (theme builder)
Because everything is CSS variables, a theme builder can simply override the variables in the child theme. This is the stable, recommended approach:
:root {
--connect-color-primary: #e63312;
--connect-radius: 12px;
--connect-font-family-primary: 'Poppins', sans-serif;
}
If you want to go beyond the variables, you can also write regular CSS rules that target the components. In that case, keep two things in mind:
- Load order. The settings are injected into the
<head>at priority100. Make sure your own CSS loads later (a child theme stylesheet normally already does this). If the order is correct, you won't need!important. - Use the variables, not the class names. The internal class names of the
configurator can change between versions. The
--connect-*variables are the intended, stable "API" for styling — work with those as much as possible.
Overview of all CSS variables
Each variable below has a corresponding settings field in the Styling Settings tab. So you can either fill them in via the settings, or override them in your own stylesheet.
Colors (primary)
Affects selected states, radio buttons and highlights.
| CSS variable | Setting |
|---|---|
--connect-color-primary |
Primary color |
--connect-color-primary-hover |
Primary color (hover) |
--connect-color-primary-active |
Primary color (active) |
Background colors
Affects the background of option cards/containers.
| CSS variable | Setting |
|---|---|
--connect-color-bg-primary |
Background primary |
--connect-color-bg-secondary |
Background secondary |
Text colors
Affects labels and descriptions.
| CSS variable | Setting |
|---|---|
--connect-color-text-primary |
Text primary |
--connect-color-text-secondary |
Text secondary |
--connect-color-text-accent-1 |
Text accent |
Buttons
| CSS variable | Setting |
|---|---|
--connect-button-bg |
Button background |
--connect-button-color |
Button text color |
Typography
| CSS variable | Setting |
|---|---|
--connect-font-family-primary |
Font family |
Layout
Affects the shape of all option containers.
| CSS variable | Setting |
|---|---|
--connect-radius |
Border radius |
--connect-box-shadow |
Box shadow |
--connect-border |
Border |
Status colors
Affects delivery date options and upload statuses. The -text variants determine the
text color of the upload button per status.
| CSS variable | Setting |
|---|---|
--connect-color-success / --connect-color-success-text |
Success (+ text) |
--connect-color-warning / --connect-color-warning-text |
Warning (+ text) |
--connect-color-error / --connect-color-error-text |
Error (+ text) |
--connect-color-pending / --connect-color-pending-text |
Pending (+ text) |
Configurator
The plug-in implements the open-source Probo Connect web component. Please check our GitHub Page .
Frequently asked questions
My changes aren't visible.
Check that "Enable Simple Styling" is enabled and clear any page/object cache. If
you're using a custom stylesheet, verify that it loads later than the inline style from
the <head>.
Can I reset everything? Clear the fields in the Styling Settings tab and save; empty fields fall back to the default values.
Where does the inline CSS come from?
From includes/frontend/class-probo-styling.php — it reads the options and prints a
:root { … } block in wp_head.