Fand Product Customizer

Installation

Step 1 : Install and activate the plugin

1. Upload the fand-product-customizer folder to the /wp-content/plugins/ directory, or install it directly via the WordPress plugin screen (Plugins > Add New).
2. Activate the plugin via the Plugins screen in WordPress.

Step 2 : Add fonts via the WordPress font library

The plugin uses fonts registered natively in WordPress (introduced in WordPress 6.5).

1. Go to Appearance > Editor.
2. Click the Styles icon (top right), then Fonts.
3. Upload or add the fonts you want to offer your customers (e.g. Love, Cardenio Modern, etc.).
4. Once added, the fonts will automatically appear in the plugin’s font selector.

Step 3 : Insert the block in the single product template

1. Go to Appearance > Editor > Templates.
2. Open the Single Product template.
3. Click the + button to add a block and search for Fand Product Customizer.
4. Insert the block where you want it to appear on the product page (recommended: between the product excerpt and the Add to Cart button).
5. Save the template.

Note: This step requires a Full Site Editing (FSE) compatible theme (such as Twenty Twenty-Four, Twenty Twenty-Five, or any block-based theme). If your theme does not support FSE, the block remains available in the classic Gutenberg editor — you can insert it directly in the product description or via a custom template using a page builder that supports blocks. In all cases, the block must be placed inside or alongside the WooCommerce Add to Cart form to ensure the personalization data is correctly submitted with the order.

Step 4 : Enable the block on each product

The block will only be displayed on products where it has been explicitly enabled.

1. Go to Products and open the product you want to configure.
2. In the Product data panel, go to the General tab.
3. Check Activate personalization.
4. Save the product.

Step 5 : Choose available fonts per product

Each product can offer a different set of fonts to the customer.

1. On the product edit screen, find the Available fonts for this product meta box in the right sidebar.
2. Check the fonts you want to offer for this specific product.
3. Save the product.

The font selector displayed to the customer will only show the fonts you have checked for that product.

How it works on the front end

Once configured, customers visiting the product page will see a personalization block with:

• A text input field (max 15 characters)
• A live preview area showing the text rendered in the selected font in real time
• A font selector showing only the fonts enabled for that product

When the customer adds the product to the cart, the chosen text and font are attached to the cart item and displayed in:

• The cart page (under the product name)
• The checkout order summary
• The order confirmation page
• The order detail in the back office (under the product line)

This allows you to see at a glance, for each order, the exact personalization requested by the customer (text and font).