The ‘Font Picker’ field adds a dropdown menu to your product, allowing customers to choose a font. This selected font is then applied in real-time to other fields you specify, such as ‘Text Field’ or ‘Text Area’.
If you need assistance, kindly contact our support team. They will be able to assist you with certain issues.
This is ideal for personalized products like engravings, t-shirt text, or custom stationery, where the customer doesn’t just want the text but wants it in a specific style.
Using the ‘Font Picker’ Field in WowAddons
Using this field is a two-step process:
- Global Setup: First, you must upload your font files to the main WowAddons “Fonts” menu.
- Field Setup: Then, you add the ‘Font Picker’ field to your product and configure its options.
Global Setup: Upload Your Custom Fonts
Before you can use the ‘Font Picker’ field, you must add your custom fonts to the plugin’s central library.
- From your WordPress dashboard, navigate to
WowAddonsand find the “Custom Fonts” tab. - If you have no fonts, you will see a “No custom fonts uploaded yet” message. Click the “Add New Font” button.
- A popup window will appear with the following fields:
- Font Title: A friendly name for the font (e.g., “Pacifico Regular”, “ComicRelief Bold”). This is the name you will see later when configuring the field.
- Font Family Name: The official CSS
font-familyname (e.g., “Pacifico”, “ComicRelief”). The system will auto-generate this from the title if you leave it blank. - Font File: Click to upload your font file. Accepted formats are
.woff,.woff2, and.ttf.
- Click “Upload Font”.
- Your font will now appear in the “Custom Fonts” list. Repeat this process for all the fonts you want to offer to your customers.
Field Setup: Configuring the ‘Font Picker’
Once your fonts are uploaded, you can add the ‘Font Picker’ field to your product. The settings are located in the General tab.
Basic Options
- Hide Title: Hides the main field title on the product page.
- Required: Prevents the customer from adding the product to the cart without selecting an option.
- Title: The main label for the field shown to the customer (e.t., “Choose Your Font”).
- Help Text: Optional descriptive text that appears below the title.
Font Options
This section is where you build the list of fonts that will appear in the dropdown.
- Click the “+ Add New” button to add a font to the list.
- Title: This is a dropdown menu that shows all the fonts you uploaded in the Global Setup (Step 1). Select the font you want to offer.
- Price Type: Set a pricing rule for this font (e.g., “Fixed,” “Percentage”).
- Regular / Sales: Set the price for choosing this font.
- Active: (Radio button) Select one font to be the default, pre-selected option when the customer first loads the page.
- Delete: (Trash icon) Removes that font option from the list.
🔗 Applied Fields
This is the most critical setting to make the Font Picker functional. By itself, the ‘Font Picker’ field only creates a dropdown; it needs to be connected to a text input field to work. This setting tells the Font Picker which ‘Text Field’ or ‘Text Area’ field to control.
Important Note: The ‘Font Picker’ field can only be connected to a ‘Text Field’ or ‘Text Area’ field. It is not designed to work with any other field type.
In the “Applied Fields” box, click and select the ‘Text Field’ or ‘Text Area’ fields you have added to your product.
Why This Is Important
When you connect these fields, a customer’s selection in the ‘Font Picker’ (e.g., choosing “Pacifico”) will be instantly applied to the text they type in the linked ‘Text Field’. This gives them a live preview of their custom text in the exact font style they selected.
🎨 Styles Tab
The Styles tab provides options for advanced customization:
- Element Class Name: Add your own custom CSS class to this field’s container for styling.
- Element ID: A unique, non-editable ID for this specific field, which can also be used for CSS or JavaScript targeting.