Checkout Blocks Field Studio — Live Demo
This demo showcases the full power of Checkout Blocks Field Studio for WooCommerce. Add any product to your cart and proceed to checkout to see 19 custom fields across 4 field groups with conditional logic, dynamic fees, validation rules, and more.
Things to Try at Checkout
Gift Options (Conditional Fields)
Check “This order is a gift” to reveal a Gift Message textarea, Gift Wrapping Style dropdown with dynamic pricing ($5–$20), and a Greeting Card selector. Watch the order total update in real-time as you choose different wrapping options.
B2B Order Form (Conditional + Validation)
Check “Ordering as a Business” to reveal Company Name (required), VAT Number (with regex validation), Purchase Order Number, Department dropdown, and Bulk Order Notes. Try submitting an invalid VAT number to see validation.
Delivery Preferences (Fees + Conditional Required)
Select “Express Shipping” (+$9.99) or “Same Day Delivery” (+$24.99) to see dynamic fee calculation. Same Day also reveals a required confirmation checkbox with terms. Delivery Instructions become required when flat-rate shipping is selected.
Additional Info (All Field Types)
The checkout demonstrates 9 field types: text, textarea, checkbox, select, radio, number, date, and more. Fields use half-width and full-width layouts, custom placeholder text, help text, and are organized into logical sections.
Feature Highlights
- Conditional Logic: Fields appear and disappear based on checkbox states, dropdown selections, and shipping methods
- Dynamic Fees: Gift wrapping ($5/$10/$20) and shipping upgrades ($9.99/$24.99) update the order total instantly
- Smart Validation: VAT Number regex pattern, character limits on textareas, min/max on number fields
- Conditional Required: Delivery Instructions become required only for delivery orders, not pickup
- Field Grouping: 4 organized sections (Gift Options, Business Order, Delivery Preferences, Additional Info)
- Layout Control: Half-width and full-width fields create a professional, compact checkout layout
- Works Everywhere: All fields render on both WooCommerce Blocks Checkout and Classic Checkout
- Admin Visibility: Custom field values appear in order details and email notifications