{"id":35,"date":"2026-03-15T12:24:39","date_gmt":"2026-03-15T12:24:39","guid":{"rendered":"http:\/\/demo.technekit.com\/cbs\/demo-guide\/"},"modified":"2026-03-15T16:26:43","modified_gmt":"2026-03-15T16:26:43","slug":"demo-guide","status":"publish","type":"page","link":"https:\/\/demo.technekit.com\/cbs\/demo-guide\/","title":{"rendered":"Checkout Blocks Field Studio Demo"},"content":{"rendered":"\n
\n\n\n

Checkout Blocks Field Studio — Live Demo<\/h2>\n\n\n\n

This demo showcases the full power of Checkout Blocks Field Studio for WooCommerce<\/strong>. Add any product to your cart and proceed to checkout to see 19 custom fields<\/strong> across 4 field groups<\/strong> with conditional logic<\/strong>, dynamic fees<\/strong>, validation rules<\/strong>, and more.<\/p>\n\n\n<\/div>\n\n\n\n

<\/div>\n\n\n\n

Things to Try at Checkout<\/h2>\n\n\n\n
\n\n\n
\n\n\n
\n\n\n

Gift Options (Conditional Fields)<\/h3>\n\n\n\n

Check “This order is a gift”<\/strong> to reveal a Gift Message<\/em> textarea, Gift Wrapping Style<\/em> dropdown with dynamic pricing ($5–$20), and a Greeting Card<\/em> selector. Watch the order total update in real-time as you choose different wrapping options.<\/p>\n\n\n<\/div>\n\n\n<\/div>\n\n\n\n

\n\n\n
\n\n\n

B2B Order Form (Conditional + Validation)<\/h3>\n\n\n\n

Check “Ordering as a Business”<\/strong> 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.<\/p>\n\n\n<\/div>\n\n\n<\/div>\n\n\n<\/div>\n\n\n\n

\n\n\n
\n\n\n
\n\n\n

Delivery Preferences (Fees + Conditional Required)<\/h3>\n\n\n\n

Select “Express Shipping”<\/strong> (+$9.99) or “Same Day Delivery”<\/strong> (+$24.99) to see dynamic fee calculation. Same Day also reveals a required confirmation checkbox with terms. Delivery Instructions become required<\/strong> when flat-rate shipping is selected.<\/p>\n\n\n<\/div>\n\n\n<\/div>\n\n\n\n

\n\n\n
\n\n\n

Additional Info (All Field Types)<\/h3>\n\n\n\n

The checkout demonstrates 9 field types<\/strong>: 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.<\/p>\n\n\n<\/div>\n\n\n<\/div>\n\n\n<\/div>\n\n\n\n

<\/div>\n\n\n\n

Feature Highlights<\/h2>\n\n\n\n