The WooCommerce Live Text Preview plugin allows you to display your user’s inputted text over the main product image.
The plugin lets your customers see their personalized text rendered live on the product image as they type. Add a Text Preview field to any product and choose exactly where the text sits, its default colour, size, font and line height – then decide how much control to hand to the customer:
- Let customers pick their own colour, font and alignment
- Restrict the font list to a specific set of Google Fonts
- Upload your own fonts
- Enable interactive controls so users can drag, rotate and resize the text directly on the image – optionally confined to a preview area you draw yourself.
Text can auto-size to fit its container or be locked to a single line for engraving-style products. You can also choose to flatten the custom text and main image into a composite image that’s saved with the order.
It’s possible to add as many text preview fields to a product as you like.
In the simple example below, you can see that there’s a text field on the right where the user has entered some text. This text is replicated over the product image on the left in the user’s chosen font.
First step: Add a text preview field
To use the Text Preview features, you first need to create a new add-ons field. Text Preview has a specific field type so you will need to choose ‘Text Preview’ as the field type.
To create your add-ons field:
- Add or edit a product
- In the ‘Product data’ section, click on the ‘Product Add-Ons’ tab
- Click ‘Add Group’ and ‘Add Field’ then choose ‘Text Preview’ as the ‘Field type’
You now have a field on your product page ready to accept custom text from the user.
See this article for more detailed information on how to add a new field to your product page. There’s also this document with specific details on the settings available in text fields.
Text Preview field settings
The Text Preview field type has all the parameters that a standard text field has, including minimum and maximum number of characters, free characters, etc. Access them by clicking on the ‘Text’ tab.
It also has a number of additional features, shown below:
Positioning options
Text center – X axis
This setting determines how far left or right the centre of the text will sit relative to the main product image. If you enter 0 here, the centre of the text will appear on the left side of the image; 50 will position the text exactly in the horizontal centre of the image.
Text center – Y axis
This setting determines the text’s vertical position relative to the main product image. A value of 0 will position the text at the top of the image; 50 will be the vertical middle; and 100 will be the bottom of the image.
Width
This determines how wide the text field is relative to the image size – 100 would mean the text field was the same width as the main image.
Layer position
By default, the plugin will display the text preview on all product images in the product image gallery. However, you can limit where it’s displayed using this setting. Choose from Default, First Frame, Last Frame, or Specific Frame #.
Frame #
If you choose Specific Frame # in the Layer position setting, you can specify which image you want the preview to display on here.
z-index
Optionally set a z-index value for the text preview layer here. A layer with a greater z-index is displayed in front of layers with a lower z-index.
Text options
Change the font family?
Enable this option to allow the user to choose the font to use in the preview text.
Default font
Choose the default font to use for the preview text. You can select from the theme font, any Google Font, or a custom fonts you have added.
The list of Google Fonts shown in this setting (and offered to the customer if Customers can change the font family? is enabled) is normally controlled by the ‘Choose Google Fonts’ setting in the global settings. You can now override that list for an individual field with the ‘Custom Google Fonts’ setting below.
Custom Google Fonts
Choose the specific Google Fonts to make available for this field. This overrides the global ‘Choose Google Fonts’ setting for this field only. Leave it empty to use the global font list (the default).
Change the font size?
Enable this option to allow the user to change the font size of the preview text.
Default font size
Use this to set the preview text’s default font size in pixels.
Auto size text
Automatically scales the preview text down so it fits inside its container for this field, however much the customer types. This is the per-field equivalent of the global Auto Size Text setting.
- If the global Auto Size Text setting is on, this option is switched on and locked for every field
- If Allow resizing is enabled for the field, this option is switched off and locked, because the customer is controlling the size.
- Otherwise this setting only applies if ‘Change the font size?’ is disabled.
Force single line
Keeps the preview text on a single line. Any text that doesn’t fit within the field’s width is hidden rather than wrapping onto a second line.
Enable alignment?
Enable this option to allow customers to choose the text alignment for their preview text. When enabled, customers will see alignment controls (left, center, right) on the product page.
Default line height
Set a default line height for the preview text, expressed as a percentage of the original line height. Leave this field blank if you do not want customers to be able to adjust the line height.
Color options
Enable color picker
If you select this option, the user will be able to use a color picker to set the preview text color.
Default text colour
You can set the default preview text colour here.
Swatch Field IDs
Enter the ID(s) of any swatch fields on the same product that should update the colour of this text preview. This allows a color swatch selection to automatically change the preview text colour. Separate multiple IDs with commas.
See this article for more information on how to switch text preview colors using swatches.
Interactive options
Allow positioning
Lets the customer drag the preview text to reposition it anywhere on the product image (or within the Preview area, if one is set). The starting position is the one set by Text center (%) – X axis and Text center (%) – Y axis.
Allow rotation
Adds a rotate handle above the preview text so the customer can turn it to any angle.
Allow resizing
Adds corner handles so the customer can drag to make the preview text larger or smaller. This adjusts the font size.
Enabling this switches off Auto size text for the field (the two would otherwise conflict), and takes the place of Customers can change the font size? as a way for customers to control the size.
Preview area
This option is only shown when ‘Allow positioning’, ‘Allow rotation’ or ‘Allow resizing’ is enabled.
By default, an interactive customer can move, rotate and resize the text anywhere on the whole product image. The Preview area lets you restrict them to a specific region – for example, the front panel of a garment or the face of a sign.
To set a preview area:
- Click ‘Set preview area’. A window opens showing the product image
- Choose a shape – Square or Circle – using the buttons at the top
- Click and drag on the image to draw the area
- Optionally, use the handles on the drawn area to rotate it, or (for the square shape) skew it horizontally or vertically. Reset rotation/skew clears those adjustments
- Click ‘Save area’
The drawn area is shown as a small overlay on the thumbnail in the field settings. Click ‘Redraw preview area’ to change it, or ‘Clear’ to remove it and allow the whole image again.
On the product page, the area is shown as a faint tinted region until the customer starts typing. The customer can drag, rotate and resize the text, but it will be clipped to the boundary of the area — anything moved outside it is hidden. The same clipping is applied to the generated layer image.
Note: the area is drawn against the image resolved by Layer position and Frame #. If you change either of those after drawing an area, you’ll be warned that the area may no longer line up and should be re-checked.
Text Preview global settings
As well as settings for each text preview field, you can set some global options in WooCommerce > Settings > Product Add-Ons > Text Preview.
Auto Size
Auto Size Text
Enable this option to dynamically resize the font size of preview text according to the size of the preview area. So if a user enters more characters than will fit the preview area at the default font size, the font size will scale down automatically. Note that you should have the ‘Customers can change the font size?’ field setting disabled.
Layout
Grid Columns
If your fields have additional options on the front end for font size etc, you can choose to display these in columns rather than on separate rows.
Subfields on same row
When a Text Preview field has ‘Change the font family?’ and/or ‘Enable alignment?’ options enabled (and no other customer option, i.e. no colour picker, no font size, etc.), this setting places font family and alignment controls on the same row as the text input instead of stacked underneath it. This provides a compact single-line layout: text box, then the font dropdown and/or alignment buttons alongside. It’s not applied when the product’s add-on group uses the table layout.
Inline font placeholder
Sets the placeholder text shown in the font selector when it appears on the same row as the text input (i.e. only takes effect when Subfields on same row is enabled and the font-family control is shown inline).
Include field name in subfield headings
If this setting is enabled, then the text preview field name is included as part of the subfield name, e.g. Font Family, Alignment, Colour, Font Size, etc.
Custom Fonts
Exclude “Default theme font”
Removes the Default theme font entry from the customer’s font selector, so customers can only choose from the fonts you’ve listed (Google Fonts and/or custom fonts). Use this when you don’t want the store/theme’s default typeface to be a selectable option in the preview.
Choose Google Fonts
Choose specific Google Fonts to offer your customers instead of displaying the full list of all available Google Fonts. If left empty, all Google Fonts will be available. This is useful for keeping the font picker focused on fonts that match your store’s branding.
Disable Google Fonts
Enable this option to remove Google Fonts entirely from the font picker. Use this if you only want to offer the default theme font or custom fonts that you have added via the Custom Font URL setting.
Custom Fonts
Add URLs to custom font files to make them available in the font picker. Click Add Custom Font to add additional URLs.
For working with custom fonts, see this article.
Layer Image
Enable Layer Image
Enable this option if you would like to generate a composite of the main product image and text preview fields.