Yeekit Checkout Field Blocks for WooCommerce
| 开发者 | addonsorg |
|---|---|
| 更新时间 | 2026年10月6日 11:58 |
| 捐献地址: | 去捐款 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
Advanced Checkout Fields Block empowers store owners to easily customize and extend the modern block-based WooCommerce Checkout with 19+ 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 Yeekit Checkout Field Blocks?
- Visual Gutenberg Block Experience: Simply drag and drop custom fields directly into your Checkout template in the Site Editor or Page Editor.
- 19+ Powerful Field Types: From simple text and dropdowns to advanced File Uploads, Digital Signatures, 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, uploaded files, and customer signatures 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.
- WooCommerce Order Email Attachments: Automatically attach customer uploaded files and digital signatures directly to admin and customer order confirmation emails.
- Flexible Column Layouts: Customize field widths (Full Width 100%, Half Width 50%, One-Third 33%) to build beautiful multi-column checkout layouts.
- Classic Checkout Fallback: Automatically renders fields for standard classic checkout shortcode
[woocommerce_checkout]when needed.
- 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.
- Picture Tiles: Visual image tile selector allowing customers to choose between visual options (e.g. gift box styles, card templates).
- File Upload: Secure file upload supporting images, PDF, documents, and archives with file type restrictions, maximum size limits, and email attachment support.
- Digital Signature: Responsive HTML5 touch/mouse signature drawing pad with instant preview, clear button, high-resolution PNG generation, and email attachment options.
- Email Notification Attachments: Choose whether uploaded files and customer signatures are attached to Admin emails, Customer emails, or both.
- Email Body Summary: Displays an order custom fields table in the order confirmation email body.
- WooCommerce Admin Order Screen:
- Clean custom fields summary card.
- Instant high-resolution preview and download links for customer signatures.
- File upload manager with thumbnails, file sizes, and download buttons.
- Thank You Page & Account: Customers can review their submitted answers and signature confirmation after placing an order.
安装:
- 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, Radio) 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, option pricing, and options in the block sidebar inspector.
- Click Update to save your checkout page.
屏幕截图:
常见问题:
Does this plugin work with the new WooCommerce Checkout Block?
Yes! Yeekit Checkout Field Blocks is designed specifically for the modern block-based WooCommerce Checkout Block (Gutenberg) with Store API integration.
How does Option Pricing / Extra Fee work?
Enable the Enable Option Pricing / Extra Fee toggle in the block settings sidebar. Then specify the price using the Option Name | Price syntax (e.g. Express Delivery | 10.00). When a customer selects the option on the checkout page, the price is automatically added as an extra fee to the cart and order total in real time.
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 and dynamic AJAX fee calculations for classic shortcode checkout [woocommerce_checkout].
更新日志:
1.2.1
- New: Option Pricing / Extra Fees feature for Select, Checkbox, Radio, Color Swatches, and Picture Tiles blocks.
- New: Real-time cart & order total fee recalculation via WooCommerce Store API and AJAX.
- New: Toggle control to enable/disable option pricing per block in Gutenberg Inspector.
- Fix: Store API update callback registration with
woocommerce_blocks_loaded. - Fix: Store API Nonce synchronization for seamless real-time fee calculation.
- Initial release of Yeekit Checkout Field Blocks for WooCommerce.
- 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.