Scans QR codes or barcodes using the device camera and stores the scanned value.

The field also supports manual input in a single-line text field.

Use Cases #

• Capture product barcodes in the editor
• Scan QR codes for asset tracking
• Store serial numbers from labels
• Quick entry of inventory IDs
• Validate labels during content entry

Field Preview #

A text input with Scan and Clear buttons, plus a modal scanner UI.

How to Use #

1. Add the Code Scan field to a Field Group.
2. Set a placeholder if needed.
3. Configure FPS and QR Box size.
4. Enable Auto close after scan if desired.
5. Enable Remember last camera if desired.
6. Choose Trim value and Uppercase behavior.
7. Save the Field Group and use Scan in the editor.

Field Settings #

Setting	Description	Default
Placeholder	Text shown when field is empty	Scan result will appear here…
FPS	Frames per second for scanning	10
QR Box	Size (px) of the scanning box	250
Auto close after scan	Close the scanner modal after a successful scan	1
Remember last camera	Store last used camera in localStorage	1
Trim value	Trim whitespace from scanned value	1
Uppercase	Convert scanned value to uppercase	0

Value & Storage #

Saved as: Post meta

Storage type: String

Return format: string

REST format: not specified

Important details:

• Optional trimming and uppercasing are applied before saving.
• Value is sanitized with sanitize_text_field().

Output Examples #

PHP #

$value = get_field('my_code_scan');

if (is_string($value) && $value !== '') {
    echo esc_html($value);
}

Twig #

{% set value = fn('get_field', 'my_code_scan') %}
{% if value %}
  {{ value|e }}
{% endif %}

Compatibility #

• Repeaters
• Flexible Content
• Options Pages
• Frontend forms (acf_form)
• REST API
• Multisite

Hooks (Developer) #

Hooks Summary #

Hook	Type	Purpose
custom_fields_booster_code_scan_defaults	Filter	Modify default settings.
custom_fields_booster_code_scan_supports	Filter	Modify ACF support flags.
custom_fields_booster_code_scan_before_render	Action	Run logic before rendering UI.
custom_fields_booster_code_scan_after_render	Action	Run logic after rendering UI.
custom_fields_booster_code_scan_instance_id	Filter	Modify instance id.
custom_fields_booster_code_scan_input_atts	Filter	Modify input attributes.
custom_fields_booster_code_scan_before_settings	Action	Run logic before rendering settings UI.
custom_fields_booster_code_scan_after_settings	Action	Run logic after rendering settings UI.
custom_fields_booster_code_scan_before_enqueue	Action	Run logic before enqueuing assets.
custom_fields_booster_code_scan_after_enqueue	Action	Run logic after enqueuing assets.
custom_fields_booster_code_scan_load_value	Filter	Modify value after loading.
custom_fields_booster_code_scan_validate_value	Filter	Modify validation result.
custom_fields_booster_code_scan_update_value	Filter	Modify value before saving.
custom_fields_booster_code_scan_format_value	Filter	Modify value returned by get_field().

Filters #

Filter: custom_fields_booster_code_scan_input_atts

Purpose: Modify input HTML attributes.

When: You need to add data attributes for custom JS.

add_filter('custom_fields_booster_code_scan_input_atts', function ($atts, $field, $field_instance) {
    $atts['data-custom'] = '1';
    return $atts;
}, 10, 3);

Actions #

Action: custom_fields_booster_code_scan_before_render

Runs before rendering the field UI.

add_action('custom_fields_booster_code_scan_before_render', function ($field, $field_instance) {
    // Pre-render logic.
}, 10, 2);

Assets #

This field enqueues assets whenever the input is rendered (admin and frontend via acf_form()):

• admin/js/libs/html5-qrcode.min.js
• admin/js/cfb-field-code-scan.js
• admin/css/cfb-field-code-scan.css

REST API #

Schema: not specified

REST Validation #

Validation uses validate_value() on REST writes.

Security & Escaping #

• Saved value is sanitized with sanitize_text_field().
• Optional trimming and uppercasing are applied before saving.
• Field HTML output escapes all attributes and UI labels.

Notes / Limitations #

• Scanner UI depends on camera access and the bundled html5-qrcode library.

Changelog #

• 1.0.0 — Initial release