{"id":931,"date":"2026-08-04T07:24:31","date_gmt":"2026-08-04T07:24:31","guid":{"rendered":"http:\/\/teamwinter"},"modified":"2026-08-04T07:24:31","modified_gmt":"2026-08-04T07:24:31","password":"","slug":"how-to-add-font-picker-product-option-using-optiontics","status":"publish","type":"docs","link":"https:\/\/themewinter.com\/docs\/optiontics\/how-to-add-font-picker-product-option-using-optiontics\/","title":{"rendered":"How to Add Font Picker Product Option Using Optiontics"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>Overview<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Font Picker<\/strong> block lets customers choose a font for their product on the WooCommerce product page &#8212; perfect for engravings, custom stationery, monograms, signage, and any product where typography is part of what the customer is paying for. Fonts are managed centrally in the <strong>Custom Fonts<\/strong> library, then surfaced as either a dropdown or a radio list per block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Requirements<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure WooCommerce and Optiontics are both installed and active, with at least one product to attach the addon to and at least one font uploaded to the Custom Fonts library (covered in Step 1).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>When to use the Font Picker block<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Reach for this block whenever the customer&#8217;s font choice is part of the product itself, not just a UI preference. Common scenarios:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Engraved jewellery<\/strong> &#8212; pick a script for a name engraved on a pendant.<\/li>\n\n\n\n<li><strong>Personalised stationery<\/strong> &#8212; choose a typeface for printed cards or invitations.<\/li>\n\n\n\n<li><strong>Custom signage<\/strong> &#8212; pick a display font for a wooden sign or acrylic plate.<\/li>\n\n\n\n<li><strong>Monogrammed bags or apparel<\/strong> &#8212; choose between a serif, script, or block style.<\/li>\n\n\n\n<li><strong>Vinyl decals<\/strong> &#8212; pick the font that will be cut into the vinyl.<\/li>\n\n\n\n<li><strong>Trophies and plaques<\/strong> &#8212; choose an engraving font, often with a price step between simple and ornate styles.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 1: Upload fonts to the Custom Fonts library<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before adding the block, upload at least one font to the central library.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the Optiontics dashboard from your WordPress admin sidebar.<\/li>\n\n\n\n<li>Click <strong>Custom Fonts<\/strong> in the Optiontics submenu.<\/li>\n\n\n\n<li>Click <strong>Add New Font<\/strong>.<\/li>\n\n\n\n<li>Upload a <code>.woff2<\/code>, <code>.woff<\/code>, or <code>.ttf<\/code> file via the WP Media Library.<\/li>\n\n\n\n<li>Give the font a <strong>Title<\/strong> (e.g. &#8220;Playfair Display&#8221;).<\/li>\n\n\n\n<li>Optionally set a <strong>Font Family<\/strong> override; leave blank to auto-slug the title.<\/li>\n\n\n\n<li>Save.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Each row in the table previews the font live, so you can see exactly how it will render on the product page.<\/p>\n\n\n\n<figure style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)\" class=\"wp-block-table\"><table class=\"has-background has-fixed-layout\" style=\"background-color:#2d97de17;border-width:1px\"><tbody><tr><td><strong>Tip: <\/strong>Fonts you upload are stored as their own custom post type (<code>optiontics-font<\/code>) &#8212; uploading once means you can reuse the same font across every block on every product without re-uploading.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/themewinter.com\/docs\/plugins\/wp-content\/uploads\/sites\/3\/2026\/05\/SCR-20260604-oruc.png\" alt=\"\" class=\"wp-image-12236\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 2: Add the Font Picker block<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the option set attached to your product (or create a new one with <strong>Add Options<\/strong>).<\/li>\n\n\n\n<li>Click <strong>Add Elements<\/strong> on the canvas.<\/li>\n\n\n\n<li>Switch to the <strong>Choices<\/strong> category in the insertion modal.<\/li>\n\n\n\n<li>Drag <strong>Font Picker<\/strong> into the form.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The block lands on the canvas with a default label of &#8220;Font Picker Field&#8221;. Click it to surface controls in the right sidebar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/themewinter.com\/docs\/plugins\/wp-content\/uploads\/sites\/3\/2026\/05\/SCR-20260604-osjs.png\" alt=\"\" class=\"wp-image-12238\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 3: Add font options<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In the right sidebar, click <strong>Manage Items<\/strong> under Option Values. A modal opens with a row per font option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Each row contains:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Cell<\/strong><\/td><td><strong>Purpose<\/strong><\/td><\/tr><tr><td><strong>Font<\/strong><\/td><td>Dropdown listing every font in your Custom Fonts library<\/td><\/tr><tr><td><strong>Price Type<\/strong><\/td><td>Fixed \/ Percentage \/ No Cost<\/td><\/tr><tr><td><strong>Regular Price<\/strong><\/td><td>The amount added when this font is picked<\/td><\/tr><tr><td><strong>Sales Price<\/strong> <em>(Pro)<\/em><\/td><td>Optional discounted price<\/td><\/tr><tr><td><strong>Active<\/strong><\/td><td>Toggle to show or hide the option without deleting it<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Pick a font from the dropdown &#8212; Optiontics auto-fills the option&#8217;s value, font family, and title. Set the price type and amount. Toggle the active switch on. Repeat for each font you want to expose.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/themewinter.com\/docs\/plugins\/wp-content\/uploads\/sites\/3\/2026\/05\/SCR-20260604-ossc.png\" alt=\"IMAGE PLACEHOLDER: Side-by-side comparison -- Dropdown render on the left, Radio render on the right, both showing the same 3 fonts\" class=\"wp-image-12240\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 4: Choose Render As &#8212; Dropdown or Radio<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Render As<\/strong> control (segmented &#8220;Dropdown \/ Radio&#8221;) decides how the customer sees the picker on the product page.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dropdown<\/strong> &#8212; a <code><select><\/code> listing each font. Each option is styled in its own font so the customer can read the name in the typeface they&#8217;re choosing.<\/li>\n\n\n\n<li><strong>Radio<\/strong> &#8212; a stacked list of radio buttons, each label styled in its own font. Easier to skim for small option sets; takes more vertical space.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Switch between the two without rebuilding the option list &#8212; the same data renders either way.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/themewinter.com\/docs\/plugins\/wp-content\/uploads\/sites\/3\/2026\/05\/SCR-20260604-otpn.png\" alt=\"\" class=\"wp-image-12242\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 5: Configure the common controls<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use the standard block controls in the right sidebar:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hide Title<\/strong> &#8212; suppress the field label (the picker itself still renders).<\/li>\n\n\n\n<li><strong>Required<\/strong> &#8212; block add-to-cart until the customer picks a font.<\/li>\n\n\n\n<li><strong>Title<\/strong> &#8212; the field label customers see.<\/li>\n\n\n\n<li><strong>Help Text<\/strong> &#8212; short instruction shown below the label (e.g. &#8220;Choose the typeface for your engraving&#8221;).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>Sales Price<\/strong> column inside Manage Items is Pro-gated. In Free, that column is hidden and any sale prices saved on the option rows are stripped at save time.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 6: Set up conditional logic<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Conditional logic on the Font Picker works the same way as other option-list blocks (radio, dropdown).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>As a target<\/strong> &#8212; show or hide the picker based on another field.<\/li>\n\n\n\n<li><strong>As a source<\/strong> &#8212; match on the picked font&#8217;s value (e.g. &#8220;show an <code>Italic accent<\/code> upcharge only if <code>Playfair Display<\/code> is selected&#8221;).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Open the <strong>Conditional Logic<\/strong> tab in the right sidebar to add rules.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 7: Save and verify on the product page<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Save the option set and visit the product page.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Each option label is styled in its own font, so the customer can read &#8220;Playfair Display&#8221; rendered in Playfair Display.<\/li>\n\n\n\n<li>Picking an option updates the running total immediately.<\/li>\n\n\n\n<li>The selected font&#8217;s title appears on the cart row, checkout review, and order admin item meta.<\/li>\n\n\n\n<li>The font&#8217;s <code>@font-face<\/code> declaration is auto-injected into the page CSS, so the typography is consistent everywhere.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Frequently Asked Questions (FAQ)<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\" style=\"border-style:none;border-width:0px\"><tbody><tr><td><strong>Q1: What font formats are supported, and which one should I upload?<\/strong><br>WOFF2, WOFF, and TTF are accepted. WOFF2 is the best default for the web &#8212; smallest file size, broadest modern-browser support. Upload TTF only if WOFF2 isn&#8217;t available; the file is heavier and renders identically.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\" style=\"border-style:none;border-width:0px\"><tbody><tr><td><strong>Q2: If I delete a font from Custom Fonts, what happens to blocks already using it?<\/strong><br>The option label stays in the block (the option&#8217;s value, font family, and title are stored on the block itself, not as a foreign key). Past orders also retain the font name on the line item. The customer-facing styling disappears because the <code>@font-face<\/code> declaration is no longer emitted &#8212; the picker label renders in the theme&#8217;s default font. To swap a font instead of deleting it, upload the new one with the same Font Family slug.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\" style=\"border-style:none;border-width:0px\"><tbody><tr><td><strong>Q3: Can I charge different prices for different fonts?<\/strong><br>Yes. Each option row has its own Price Type and Regular Price. A common pattern is to set simple sans-serif fonts as <strong>No Cost<\/strong> and ornate or licensed scripts as <strong>Fixed<\/strong> with a small upcharge. Active fonts contribute to the addon total just like any other choice-based block.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Font Picker block turns the Custom Fonts library into a customer-facing selector &#8212; upload once, reuse across every personalisation product, and let typography choices drive both the order&#8217;s look and its price.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview The Font Picker block lets customers choose a font for their product on the WooCommerce product page &#8212; perfect for engravings, custom stationery, monograms, signage, and any product where typography is part of what the customer is paying for. Fonts are managed centrally in the Custom Fonts library, then surfaced as either a dropdown [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[64],"doc_tag":[],"class_list":["post-931","docs","type-docs","status-publish","hentry","doc_category-optiontics"],"year_month":"2026-08","word_count":1060,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"teamwinter","author_nicename":"teamwinter","author_url":"https:\/\/themewinter.com\/docs\/author\/teamwinter\/"},"doc_category_info":[{"term_name":"Optiontics","term_url":"https:\/\/themewinter.com\/docs\/docs\/optiontics\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/themewinter.com\/docs\/wp-json\/wp\/v2\/docs\/931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewinter.com\/docs\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/themewinter.com\/docs\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/themewinter.com\/docs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/themewinter.com\/docs\/wp-json\/wp\/v2\/comments?post=931"}],"version-history":[{"count":0,"href":"https:\/\/themewinter.com\/docs\/wp-json\/wp\/v2\/docs\/931\/revisions"}],"wp:attachment":[{"href":"https:\/\/themewinter.com\/docs\/wp-json\/wp\/v2\/media?parent=931"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/themewinter.com\/docs\/wp-json\/wp\/v2\/doc_category?post=931"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/themewinter.com\/docs\/wp-json\/wp\/v2\/doc_tag?post=931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}