Mr. J Dev Dynamic Checkout Fields

Description

Mr. J Dev Dynamic Checkout Fields lets store owners add fully configurable custom fields to the WooCommerce checkout page. Fields can be shown conditionally based on cart total, shipping country, or product presence — all managed via a clean split-panel admin UI without writing any code.

Field Types:

• Text — single-line text input
• Textarea — multi-line text area (4 rows, resizable)
• Dropdown — select from a list of predefined options (you define one option per line)
• Checkbox — a simple yes/no toggle

Conditional Display (show field only when):

• Always — field is always visible at checkout
• Cart total is greater than ₹X — e.g. show a “Gift wrapping note” field only for orders above ₹500
• Shipping country equals — show field only for specific countries (2-letter ISO code, e.g. IN, US, GB)
• Product ID is in cart — show a field only when a specific product is being purchased

Note: Conditions apply to the classic shortcode checkout only. In the block checkout, all registered fields are always shown.

Validation:

• Mark any field as required — WooCommerce will block checkout if left empty
• Optional regex pattern — e.g. ^[0-9]{10}$ to enforce a 10-digit phone format
• Regex is applied to Text fields only; Checkbox and Dropdown use WooCommerce’s built-in validation

Checkout Compatibility:

• Classic Checkout (shortcode [woocommerce_checkout]) — full support including conditions
• Block Checkout (WooCommerce 8.9+) — fields registered via the Additional Checkout Fields API and appear in the “Order” section of the block checkout automatically. Textarea type falls back to a single-line text field in block mode (the Block API has no native textarea type)

Data Handling:

• Field values are saved as order meta on checkout submit
• Displayed in the admin order detail page (below billing address)
• Included in WooCommerce order emails — both HTML and plain-text formats

Admin UI (split-panel layout):

• Left panel — lists all saved fields as cards with type badge, condition summary, and required indicator
• Right panel — inline create / edit form; clicking a card loads it for editing
• Fields are created, updated, and deleted without leaving the page
• The form auto-shows/hides the Dropdown Options textarea and Condition Value input based on your selections

Usage

1. Go to WooCommerce → Checkout Fields.
2. Click Add New Field.
3. Fill in:
   • Field ID — a unique slug (lowercase, underscores only), e.g. pan_number
   • Label — what customers see at checkout, e.g. “PAN Number”
   • Field Type — Text, Textarea, Dropdown, or Checkbox
   • Dropdown Options — one option per line (only shown when type is Dropdown)
   • Required — tick to block checkout if the field is left empty
   • Show When — the condition that must be true for the field to appear
   • Condition Value — the value for your condition (amount / country code / product ID)
   • Validation Regex — optional regex for Text and Textarea fields
4. Click Save Field.

The field will appear on the checkout page whenever its condition is met. Submitted values are stored with the order and visible in the admin order screen and in all WooCommerce order emails.

Condition Examples

Gift message field for large orders:
* Type: Text | Show When: Cart total > | Value: 1000

PAN card field for Indian customers only:
* Type: Text | Show When: Shipping country = | Value: IN
* Validation Regex: ^[A-Z]{5}[0-9]{4}[A-Z]{1}$

Delivery preference for a specific product:
* Type: Dropdown | Show When: Product ID in cart | Value: 42
* Options: Morning Afternoon Evening

Simple gift wrap option:
* Type: Checkbox | Show When: Always | Required: No

Block Checkout Notes

To use with the WooCommerce Block Checkout:

• WooCommerce 8.9 or newer is required
• Fields are registered in the “Order” section of the block checkout
• Conditional display is not supported in block mode — all your fields will always show
• Field values are saved and displayed in orders automatically by WooCommerce