Fand Product Customizer adds a Gutenberg block to your WooCommerce product pages that allows customers to personalize their order with a custom text and a font of their choice.

The block is fully dynamic (server-side rendered) and integrates natively with WooCommerce: the chosen text and font are displayed in the cart, in the order summary, and saved in the order details in the back office.

Key features:

Customer-facing features (front end):

Personalization block insertable in any WooCommerce single product template
Text input field with configurable character limit (default: 15 characters)
Live preview of the text rendered in the selected font, in real time
Font selector showing only the fonts enabled for that product
Validation on form submit : prevents adding to cart without a text entry

Store owner features (back end):

Enable or disable the personalization block per product with a simple checkbox
Choose which fonts are available for each product individually
Fonts managed natively via the WordPress font library (Appearance > Editor > Styles > Fonts) — no external dependency
Chosen text and font displayed in the cart under the product name
Chosen text and font displayed in the order confirmation summary
Chosen text and font saved in the order detail in the WooCommerce back office
No coding required : fully configurable via the WordPress admin

Source Code

This plugin uses npm and webpack to compile JavaScript and CSS assets.
The full source code is publicly available on GitHub:

https://github.com/Florence-Androlus/fand-product-customizer

To rebuild the assets from source:

Clone the repository
Run npm install
Run npm run build