The WooCommerce Live Text Preview plugin allows you to define which fonts the user can pick from.
By default, every Text Preview field offers the same list of fonts – either all Google Fonts, or the list you’ve chosen under WooCommerce > Settings > Product Add-Ons > Text Preview > Choose Google Fonts.
However, if you want, you can offer a different set of fonts on particular fields.
Using the Custom Google Fonts setting
The easiest way is just to use the ‘Custom Google Fonts’ setting in the field settings:
- Edit the product (or global add-on group) and open the Text Preview field.
- In the ‘Text Preview – Text Options panel’, find ‘Custom Google Fonts’
- Start typing a font name and select it. Add as many fonts as you want.
- Save the product.
That field will now offer only the fonts you selected.
Repeat for each field that needs its own font list – every field can have a different selection.
Using a code snippet instead
If you need to build the font list dynamically – for example based on the product, the field label, or fonts registered by your theme – you can still use the apaou_all_fonts filter.
Note a couple of things:
- You’ll need to update the field IDs to match the IDs of your fields
- You should list the fonts in this format:
'arial' => 'Arial'
| <?php | |
| /** | |
| * Filter the available fonts for each text preview field | |
| * List fonts in arrays using 'abel' => 'Abel' key / value pairs | |
| * Update the field IDs to match your own | |
| */ | |
| function demo_filter_all_fonts( $all_fonts, $available_fonts, $field ) { | |
| // Update the field IDs below to match your field IDs | |
| if( $field['field_id'] == 1209 ) { | |
| // Make an array of fonts for this field only | |
| $available_fonts = array( | |
| 'abel' => 'Abel', | |
| 'arial' => 'Arial' | |
| ); | |
| } else if( $field['field_id'] == 1307 ) { | |
| // Make an array of fonts for this field only | |
| $available_fonts = array( | |
| 'abel' => 'Abel', | |
| 'courier' => 'Courier' | |
| ); | |
| } | |
| $all_fonts = array_merge( array( 'default' => __( 'Default theme font', 'pr-advanced-previews-addons-ultimate' ) ), $available_fonts ); | |
| return $all_fonts; | |
| } | |
| add_filter( 'apaou_all_fonts', 'demo_filter_all_fonts', 10, 3 ); |
Here’s how to add the snippet.