Maelezo
Video Demo: https://youtu.be/oaL6IY4oNEI
Document: https://add-ons.org/documentation-yeekit-checkout-fields-block-for-woocommerce/
Yeekit Checkout Field Blocks for WooCommerce allows store owners to customize the modern WooCommerce Checkout with 19+ visual and interactive custom field blocks.
Designed for the WooCommerce Checkout Block (Gutenberg), Cart Block, WooCommerce Store API, and High-Performance Order Storage (HPOS), the plugin lets you collect additional customer information and create flexible checkout experiences without writing custom code.
Add fields such as text inputs, dropdowns, checkboxes, radio buttons, date and time pickers, sliders, color selectors, picture tiles, file uploads, and digital signatures directly to your checkout page.
The plugin also supports option pricing for selected field types, allowing merchants to charge additional fees when customers select paid options.
Why Choose Yeekit Checkout Field Blocks?
- Visual Gutenberg Block Experience: Add and configure custom checkout fields directly in the WordPress Block Editor.
- 19+ Custom Field Types: Choose from standard input fields, selection fields, visual selectors, file uploads, and digital signatures.
- Flexible Checkout Layouts: Configure fields using 100%, 50%, or 33% width options to create multi-column checkout layouts.
- Conditional Checkout Options: Create dynamic checkout experiences by displaying fields based on customer selections.
- Option Pricing / Extra Fees: Add additional charges to supported selectable fields and automatically update the WooCommerce order total.
- WooCommerce Store API Integration: Supports real-time cart and order total updates for option pricing.
- HPOS Compatible: Designed to work with WooCommerce High-Performance Order Storage.
- Order Management: Custom field values, uploaded files, signatures, and additional fees can be reviewed from the WooCommerce Admin Order screen.
- Customer-Facing Information: Custom field values can be displayed in the order confirmation and customer-facing order information.
- Email Integration: Uploaded files and digital signatures can be attached to supported WooCommerce order emails.
- Classic Checkout Fallback: Provides fallback rendering and fee calculation support for the classic WooCommerce checkout shortcode.
Available Field Blocks
The plugin includes 19 custom checkout field blocks:
- Text: Single-line text input for names, PO numbers, custom IDs, gift notes, and other short information.
- Textarea: Multi-line input for delivery instructions, greetings, notes, and additional details.
- Email: Email input with email format validation.
- Phone: Phone number input for collecting customer contact information.
- Number: Numeric input with minimum, maximum, and step controls.
- Password: Masked input for password or PIN-style information.
- URL: URL input with web address validation.
- Select: Dropdown selection with configurable options and optional option pricing.
- Checkbox: Single or multiple checkbox selections with optional option pricing.
- Radio: Single-choice radio button selection with optional option pricing.
- Date: Interactive date picker for delivery dates, event dates, birthdays, and other date-based information.
- Time: Time picker for delivery times, appointment times, or preferred contact times.
- DateTime: Combined date and time picker.
- Slider / Range: Range slider with configurable minimum, maximum, step, and unit prefix/suffix.
- Color Picker: Native HTML5 color selection field.
- Color Swatches: Visual color selection buttons with optional option pricing.
- Picture Tiles: Visual image-based selection options with optional option pricing.
- File Upload: File upload field supporting images, PDFs, documents, and archives with configurable file restrictions and size limits.
- Digital Signature: Touch- and mouse-friendly signature field with preview, clear functionality, PNG generation, and email attachment support.
Option Pricing / Extra Fees
The Option Pricing / Extra Fees feature allows merchants to add an additional charge when a customer selects a paid checkout option.
Enable the pricing option from the block settings and assign a price to the relevant selectable option.
When the customer selects the option, the configured amount is automatically added as an extra fee to the cart and order total.
Option Pricing / Extra Fees is available for:
- Select
- Checkbox
- Radio
- Color Swatches
- Picture Tiles
Email & Admin Integration
- Email Notification Attachments: Uploaded files and customer signatures can be attached to supported Admin and Customer order emails.
- Email Body Summary: Custom checkout field values can be included in the order confirmation email summary.
- WooCommerce Admin Order Screen:
- Custom field values are displayed with the order information.
- Customer signatures can be previewed and downloaded.
- Uploaded files can be reviewed and downloaded.
- Additional option fees are included in the order total.
- Customer-Facing Order Information: Customers can review submitted custom field information in supported order confirmation and account pages.
Screenshots
Bloku
Kijalizi hivi vinawezesha bloku 19.
- Colour Swatches Custom colour palette swatches for gift wrap, monogram, or product customization.
- Phone Telephone number input field for secondary phone, WhatsApp, etc.
- Date Picker Allows shoppers to select a preferred delivery or booking date directly in checkout.
- Checkbox Checkbox field for gift wrapping, delivery preferences, confirmations, etc.
- Colour Picker Interactive colour picker allowing buyers to choose any custom colour with live preview.
- Slider Interactive range slider for selecting amounts, percentages, quantities, or ratings.
- Web Address (URL) Website or social link input field with URL validation.
- Date & Time Combined date and time picker for scheduled appointments, deliveries, or events.
- Radio Buttons Custom radio button group for delivery options, gift packaging, surveys, etc.
- Text Area Multi-line text area for gift messages, delivery remarks, special notes, 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.
- Dropdown Select Dropdown select field for delivery windows, referral sources, options, etc.
- File Upload (Pro) Secure file upload field with drag-and-drop support, file size validation, and temporary-to-permanent order staging.
- Email Email address input field with automatic format validation.
- Digital Signature (Pro) Interactive digital signature pad for customers to sign on desktop, tablet, or mobile before checkout.
- Password Masked password/PIN input field for gate codes, secret keys, VIP access, etc.
- Picture Tiles Visual image tiles for selecting gift wrap, card style, fabric, or design templates.
- Number Numeric input field with min, max, and step settings.
Installation
- Upload the
yeekit-checkout-field-blocksfolder to your/wp-content/plugins/directory, or install the plugin directly from Plugins > Add New in WordPress. - Activate the plugin from the Plugins screen.
- Open your WooCommerce Checkout page in the WordPress Block Editor.
- Inside the Checkout Block, search for the available custom field blocks under the Checkout Block Fields category.
- Drag and position the desired fields within the appropriate checkout section, such as Contact, Address, Shipping, or Order Note.
- Configure the field settings from the block sidebar, including label, required status, placeholder, width, options, and pricing where supported.
- Click Update to save your checkout page.
- Visit the checkout page and test the fields and any configured option pricing.
FAQ
-
Does this plugin work with the WooCommerce Checkout Block?
-
Yes. Yeekit Checkout Field Blocks is designed for the modern WooCommerce Checkout Block and integrates with the WooCommerce Store API.
-
Which field types support Option Pricing / Extra Fees?
-
Option Pricing / Extra Fees is currently supported by Select, Checkbox, Radio, Color Swatches, and Picture Tiles blocks.
-
How does Option Pricing / Extra Fee work?
-
Enable the Option Pricing / Extra Fee feature in the block settings.
For supported selectable fields, configure the option using the following format:
Option Name | PriceFor example:
Express Delivery | 10.00When the customer selects the option, the configured amount is added as an extra fee to the cart and order total.
-
Does the checkout total update automatically when a paid option is selected?
-
Yes. The plugin supports real-time cart and order total fee recalculation through the WooCommerce Store API. Dynamic fee calculation is also supported for the classic WooCommerce checkout shortcode.
-
Is Option Pricing available for every field type?
-
No. Option Pricing / Extra Fees is available for Select, Checkbox, Radio, Color Swatches, and Picture Tiles.
-
Is the plugin compatible with WooCommerce High-Performance Order Storage (HPOS)?
-
Yes. The plugin supports WooCommerce High-Performance Order Storage (HPOS) as well as traditional WordPress order data storage.
-
Can I make a checkout field required?
-
Yes. Supported field blocks include a Required setting that allows merchants to require customers to complete a field before completing checkout.
-
Where are custom field values stored?
-
Custom field values are stored as WooCommerce order metadata.
They can be accessed programmatically through the WooCommerce Order object:
$value = $order->get_meta( '_yeekit_cfb_' . $field_key );or:
$value = $order->get_meta( $field_key ); -
Does it work with the classic WooCommerce checkout shortcode?
-
Yes. The plugin includes fallback rendering for the classic WooCommerce checkout shortcode:
[woocommerce_checkout]Dynamic AJAX fee calculations are also supported for option pricing on the classic checkout.
Reviews
Hakuna hakiki za programu-jalizi hii.
Wachangiaji & Wasanidi
“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.1
- New: Added Option Pricing / Extra Fees for Select, Checkbox, Radio, Color Swatches, and Picture Tiles blocks.
- New: Added real-time cart and order total fee recalculation through the WooCommerce Store API and AJAX.
- New: Added a block-level toggle to enable or disable option pricing from the Gutenberg Inspector.
- Improved: Added support for displaying additional option fees in checkout and order totals.
- Fix: Improved Store API update callback registration using
woocommerce_blocks_loaded. - Fix: Improved WooCommerce Store API nonce synchronization for real-time fee calculations.
1.2.0
- Initial release of Yeekit Checkout Field Blocks for WooCommerce.
- Added 17 visual custom field blocks for the WooCommerce Checkout Block.
- Added WooCommerce Cart and Checkout Blocks compatibility.
- Added High-Performance Order Storage (HPOS) compatibility.
- Added flexible field width options: 100%, 50%, and 33%.
- Added translation and internationalization support.