All Documentation
Yaxii Smart Form — WooCommerce COD Checkout Engine
Yaxii Smart Form — WooCommerce COD Checkout Engine · Documentation

Changing Colors Styles

The Problem This Solves

A form that clashes with your store’s brand undermines customer trust before they even fill in a field. This guide maps every visual control to its exact output so you can make your order form look like it belongs to your store — not a generic plugin.

Where to Find Appearance Settings

In your WordPress menu, go to Yaxii Smart Form > Form Settings, then click the Appearance tab.

[Screenshot: Form Settings page with the “Appearance” tab selected, showing the Theme, Colors, and Dark Mode sections]

Choosing a Form Theme

Yaxii Smart Form ships with several predefined themes that change the overall form style in a single action.

  1. 1
    Open the Theme Selector
    In the Appearance tab, find the Form Theme section. Click the Form Template dropdown to see the available themes.

    [Screenshot: “Form Template” dropdown open with several theme names listed]

  2. 2
    Select and Preview
    Click a theme name. The form preview updates instantly on the right so you can see the exact visual effect before saving.
  3. 3
    Save
    Once satisfied, click Save Changes at the bottom of the page.

Customizing Individual Colors

If no preset theme matches your brand guidelines exactly, you can fine-tune three colors independently:

SettingWhat It Controls Visually
Primary ColorOrder button, active accents, and selection highlights
Background ColorThe overall background of the form block
Text ColorAll field labels and customer-entered values

To change a color, click the color swatch next to the setting, then pick a shade from the color picker or type a hex code directly (e.g., #E63946).

[Screenshot: Three color swatches side by side — Primary Color, Background Color, Text Color — with the color picker open on Primary Color]

Enabling Dark Mode

If your store uses a dark theme or your customers prefer dark interfaces, enable the form’s dark mode in the Appearance tab:

  • Toggle Enable Dark Mode to on.
  • Select a Dark Theme from the dropdown that appears below.

[Screenshot: “Enable Dark Mode” toggle in the ON position with the dark theme selection dropdown visible beneath it]

What’s Next?

Appearance is set. Move on to managing form fields, labels, and layout.

→ Read: Managing Form Fields, Labels, and Layout