Description
Advanced Checkout Fields Block empowers store owners to easily customize and extend the modern block-based WooCommerce Checkout with 17+ visual, interactive custom field blocks.
Designed natively for the WooCommerce Checkout Block (Gutenberg), Cart Block, and fully compatible with High-Performance Order Storage (HPOS), this plugin lets you collect any additional information you need from customers before they place their order—without touching a single line of code.
Why Choose ACF Checkout Fields?
- Visual Gutenberg Block Experience: Simply drag and drop custom fields directly into your Checkout template in the Site Editor or Page Editor.
- 17+ Powerful Field Types: From simple text and dropdowns to advanced and Picture Tiles.
- 100% HPOS & Store API Ready: Seamlessly integrated with WooCommerce Store API and High-Performance Order Storage (Custom Order Tables).
- Order Management & Admin Review: All custom field values are neatly displayed in the WooCommerce Admin Order details screen.
- Customer Facing Display: Values appear on the Order Received (Thank You) page, Customer Account View Order page, and customer notification emails.
- Flexible Column Layouts: Customize field widths (Full Width 100%, Half Width 50%, One-Third 33%) to build beautiful multi-column checkout layouts.
Available Field Blocks (17+ Field Types)
- Text: Standard single-line text input for PO numbers, gift notes, names, or custom IDs.
- Textarea: Multi-line textarea for delivery instructions, greetings, or extra details.
- Email: Email field with format validation and optional customer auto-fill.
- Phone: Phone number input with format checking.
- Number: Numeric input with min, max, and step controls.
- Password: Secure masked password or PIN code input.
- URL: Web address field with URL validation.
- Select: Customizable dropdown with custom key-value options.
- Checkbox: Single or multiple checkboxes for terms agreements, gift wrapping, or options.
- Radio: Radio button group for single-choice selections.
- Date: Interactive calendar date picker for delivery date, event date, or birthday.
- Time: Time picker for delivery time slots or preferred call times.
- DateTime: Combined date and time picker.
- Slider / Range: Range slider with live value badge, custom min/max/step, and unit prefix/suffix.
- Color Picker: Native HTML5 color selector.
- Color Swatches: Visual color palette buttons for gift card colors, packaging, or personalization.
17. Picture Tiles: Visual image tile selector allowing customers to choose between visual options (e.g. gift box styles, card templates).
Email & Admin Integration
- Email Body Summary: Displays an order custom fields table in the order confirmation email body.
- WooCommerce Admin Order Screen:
- Clean custom fields summary card.
- Thank You Page & Account: Customers can review their submitted answers and signature confirmation after placing an order.
Screenshots
Blocks
This plugin provides 19 blocks.
- Date & Time Combined date and time picker for scheduled appointments, deliveries, or events.
- Slider Interactive range slider for selecting amounts, percentages, quantities, or ratings.
- Email Email address input field with automatic format validation.
- Dropdown Select Dropdown select field for delivery windows, referral sources, options, etc.
- Text Area Multi-line text area for gift messages, delivery remarks, special notes, etc.
- Password Masked password/PIN input field for gate codes, secret keys, VIP access, etc.
- Text Single-line custom text input field for notes, VAT number, gift message, gate code, etc.
- Time Picker Time selection field for preferred delivery hour, pickup window, or appointment.
- Digital Signature (Pro) Interactive digital signature pad for customers to sign on desktop, tablet, or mobile before checkout.
- Date Picker Allows shoppers to select a preferred delivery or booking date directly in checkout.
- Colour Picker Interactive colour picker allowing buyers to choose any custom colour with live preview.
- Checkbox Checkbox field for gift wrapping, delivery preferences, confirmations, etc.
- Number Numeric input field with min, max, and step settings.
- Picture Tiles Visual image tiles for selecting gift wrap, card style, fabric, or design templates.
- Colour Swatches Custom colour palette swatches for gift wrap, monogram, or product customization.
- Web Address (URL) Website or social link input field with URL validation.
- Radio Buttons Custom radio button group for delivery options, gift packaging, surveys, etc.
- Phone Telephone number input field for secondary phone, WhatsApp, etc.
- File Upload (Pro) Secure file upload field with drag-and-drop support, file size validation, and temporary-to-permanent order staging.
Installation
- Upload the
yeekit-checkout-field-blocksfolder to your/wp-content/plugins/directory, or install directly through WordPress Plugins screen (Plugins > Add New). - Activate the plugin through the Plugins screen in WordPress.
- Open your Checkout page in the WordPress Block Editor (Pages > Checkout > Edit).
- Inside the Checkout Block, search for any of the custom field blocks (e.g. Date, Select, Text) under the Checkout Block Fields category.
- Drag and position the fields wherever desired (e.g. Contact, Address, Shipping, or Order Note sections).
- Customize field label, required status, placeholder, widths, and options in the block sidebar inspector.
- Click Update to save your checkout page.
FAQ
-
Does this plugin work with the new WooCommerce Checkout Block?
-
Yes! ACF Checkout Fields is designed specifically for the modern block-based WooCommerce Checkout Block (Gutenberg).
-
Is it compatible with WooCommerce High-Performance Order Storage (HPOS)?
-
Yes! The plugin fully supports HPOS (Custom Order Tables) and traditional WordPress post meta storage simultaneously.
-
Can I make fields required?
-
Yes. Each block has a “Required” toggle in the sidebar settings. The checkout block will validate required fields before allowing the customer to complete payment.
-
How do I access field values programmatically?
-
Field values are saved in the WooCommerce Order object metadata. You can access them via:
$value = $order->get_meta( ‘yeekit_cfb‘ . $field_key );
or directly through$order->get_meta( $field_key );. -
Does it work with the classic checkout shortcode?
-
Yes, the plugin includes built-in fallback rendering for classic shortcode checkout
[woocommerce_checkout].
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Yeekit Checkout Field Blocks for WooCommerce” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Yeekit Checkout Field Blocks for WooCommerce” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.2.0
- Renamed plugin to ACF Checkout Fields for WooCommerce (
acf-checkout-fields). - Added 17 visual custom field blocks for WooCommerce Checkout Block.
- Added High-Performance Order Storage (HPOS) and Cart/Checkout Blocks compatibility.
- Added multi-column layout width options (100%, 50%, 33%).
- Full translation and internationalization readiness.