Customizing Colors

Donation Platform for WooCommerce is designed to be flexible. You can adjust the look and feel of your donation forms either through the plugin settings or by using custom CSS variables for more granular control.

1. Basic Configuration (Settings Menu)

For most users, the built-in settings are the quickest way to match the plugin to your brand. You can configure the following primary colors directly in the plugin settings:

• Main Color: Used for primary buttons, active states, and highlights.
• Secondary Color: Used for accents and complementary UI elements.
• Error Color: Used for validation alerts and error messages.

To change these, navigate to WooCommerce > Donation Platform > Design Options.

2. Advanced Styling (CSS Variables)

If you need deeper customization beyond the standard settings, the plugin utilizes CSS Custom Properties (variables). You can overwrite these by adding code to your theme’s “Additional CSS” section or your child theme’s stylesheet.

Target the html or :root selector to apply these changes globally:

html {
    /* The color of unavailable options */
    --wcdp-label-inactive: LightGray;

    /* The color of unselected labels when hovered */
    --wcdp-label-inactive-hover: #b5b5b5;

    /* The text color for unselected labels */
    --wcdp-label-text: black;

    /* The text color for labels when they are checked/active */
    --wcdp-label-text-checked: white;

    /* The background color of the donation form container */
    --wcdp-background-color: white;

    /* The color of the modal/overlay background */
    --wcdp-overlay-color: rgba(0, 0, 0, 0.8);

    /* The color for control elements (icons, arrows, etc.) */
    --wcdp-controls: black;
}

Tip: When using hex codes or RGB values, ensure they provide enough contrast against your background color to maintain accessibility for all users.

How to apply these changes?

1. Copy the CSS block above.
2. Go to your WordPress Dashboard.
3. Navigate to Appearance > Customize > Additional CSS.
4. Paste the code and adjust the color values (e.g., change LightGray to #f0f0f0).
5. Click Publish.