Fand Product Customizer

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:

1. Clone the repository
2. Run npm install
3. Run npm run build