NoteCraft Documentation
Rich-text formatting, inline editing, and smart templates for WooCommerce order notes. Everything you need to use NoteCraft effectively.
Overview
NoteCraft enhances the order notes experience in WooCommerce with three focused features: a rich-text formatting toolbar, inline note editing, and a reusable template library with smart placeholders. Everything works on top of WooCommerce's existing note system — no new database tables, no breaking changes.
All three features are gated on the edit_shop_orders capability. System notes (added automatically by WooCommerce) are never made editable.
Requirements
- WordPress 6.0 or higher
- WooCommerce 7.0 or higher
- PHP 7.4 or higher
- Compatible with both Classic order storage and HPOS (High-Performance Order Storage)
Installation
- Download the
notecraft.zipfrom your account dashboard. - In WordPress admin go to Plugins → Add New → Upload Plugin.
- Upload the zip, click Install Now, then Activate Plugin.
- Open any order — the rich-text toolbar appears immediately above the Add Note textarea. No configuration required.
Rich-Text Toolbar
A formatting toolbar appears above the Add note textarea on every order edit screen. The toolbar converts the plain textarea into a rich contenteditable editor and mirrors the formatted HTML back into the real textarea so WooCommerce's own note-submission handler works unchanged.
Available Formatting
| Button | Effect | Keyboard shortcut |
|---|---|---|
| B | Bold | Ctrl/Cmd + B |
| I | Italic | Ctrl/Cmd + I |
| U | Underline | Ctrl/Cmd + U |
| • — | Bulleted list | — |
| 1. | Numbered list | — |
| 🔗 | Insert link | — |
| ✕ | Clear all formatting | — |
All output is sanitised through a strict DOM allowlist before being stored. Only <strong>, <em>, <u>, <br>, <p>, <ul>, <ol>, <li>, and <a href> (safe protocols only) are permitted. WooCommerce further passes content through wp_kses_post() on save, providing a second layer of protection.
Editing Existing Notes
An Edit link appears in the meta line of every private order note. Clicking it replaces the note body with an inline rich-text editor pre-filled with the note's current content.
Edit Flow
- Click Edit on any note.
- The note body becomes an inline editor with the same rich-text toolbar.
- Make your changes and click Save — or Cancel to discard.
- The updated note renders immediately without a page reload.
Edited Marker
After a note is saved, a subtle · edited marker appears next to its timestamp. Hovering reveals a tooltip with the exact edit date, time, and the display name of the editor. This metadata is stored as comment meta (notecraft_edited_time and notecraft_edited_by) and is never visible to customers.
Note Templates
Build a library of reusable note snippets at WooCommerce → Note Templates. Each template has a title (shown in the dropdown) and a body (inserted into the editor).
Using a Template
- Click the Templates dropdown button in the toolbar.
- Select a template from the list.
- The template body is inserted into the editor with all placeholders already resolved for the current order.
- Edit as needed, then add the note normally.
Managing Templates
Go to WooCommerce → Note Templates. You can add as many templates as you need — there is no limit. Templates are saved as a single WordPress option and are shared across all users with edit_shop_orders access.
Placeholders
Template bodies support five built-in placeholders. All are resolved client-side from order data already loaded on the page — no extra requests are made.
| Placeholder | Resolves to |
|---|---|
{customer_name} | Full billing name (first + last) |
{customer_first_name} | Billing first name only |
{order_number} | Order number (e.g. #1234) |
{order_total} | Formatted order total (e.g. $49.00) |
{order_status} | Current order status label (e.g. Processing) |
Custom Note Fields
Some WooCommerce themes and plugins add their own note-like textareas to the order screen. NoteCraft can attach the rich-text toolbar to those fields too.
Auto-Detect
Enabled by default. NoteCraft scans the page for textareas inside any meta box whose title contains the word "note" (case-insensitive). If a match is found, the toolbar is attached automatically.
Manual Selectors
If a field isn't picked up by auto-detect, go to WooCommerce → Note Templates → Formatting Toolbar and paste its CSS selector (one per line) into the Extra note fields box. Example:
#my_custom_note_field
.my-theme-customer-note textarea
Settings
All NoteCraft settings live at WooCommerce → Note Templates. The page has two sections:
- Note Templates — add, edit, and delete reusable snippets.
- Formatting Toolbar — toggle auto-detect and add manual CSS selectors for extra note fields.
Troubleshooting
The toolbar doesn't appear
Check that WooCommerce is active and you're on an order edit screen (not the orders list). The toolbar requires the edit_shop_orders capability — confirm the logged-in user has Shop Manager or Administrator role.
Rich formatting shows as plain text
The note field you're targeting likely stores content as plain text and doesn't render HTML. Use NoteCraft's toolbar only on fields that display their content as HTML.
The Edit link doesn't appear on some notes
System notes added automatically by WooCommerce (payment received, status changed, etc.) are intentionally excluded from editing.
Templates dropdown is empty
Go to WooCommerce → Note Templates and create at least one template. The dropdown only appears when templates exist.
FAQ
Does editing a note change its timestamp?
No. The original timestamp is preserved. The · edited marker records a separate edit timestamp in comment meta, keeping the note's history accurate.
Can customers see edited notes?
Private order notes are never shown to customers regardless of editing. Customer-facing notes (added with the "Note to customer" checkbox) work the same way — NoteCraft does not change note visibility.
Is the plugin compatible with WooCommerce HPOS?
Yes. NoteCraft declares woocommerce_hpos_compatible and handles both Classic and High-Performance Order Storage modes correctly.
Support
Having trouble? Submit a support request and include your WordPress version, WooCommerce version, and a description of the issue.