{"id":39085,"date":"2019-11-20T09:05:46","date_gmt":"2019-11-20T08:05:46","guid":{"rendered":"https:\/\/configuratorsuiteforwp.com\/?p=39085"},"modified":"2023-08-12T18:07:19","modified_gmt":"2023-08-12T17:07:19","slug":"custom-text-add-on","status":"publish","type":"post","link":"https:\/\/www.orionorigin.com\/custom-text-add-on\/","title":{"rendered":"Tutorial & Guide for the “Custom Text” Addon."},"content":{"rendered":"

Overview<\/h2>\n

The Visual Product Configurator Custom Text Addon allows the customer to add a custom textfield, with a custom color and font, to the preview area of the product customization. The text value of the field is usually sent with the order of the customized product.<\/p>\n

Requirements and Installation<\/h3>\n

The instructions for the requirements, installation, and setup of the Custom Text Addon can be found here<\/a>. Any additional setup information will be provided below.<\/p>\n

View Demo here<\/a><\/p>\n

Extra Setup<\/h3>\n

Your custom text field will only show if you have set up your Text Components and selected one for the field in your component.<\/p>\n

To set up your text component, you have to create your fonts and colors first. It is after doing both that you can apply them within your text will display as you want it when the text component is chosen within your VPC component.<\/p>\n

\"Product
\n[Menu under Product Builder]<\/p>\n

Manage fonts<\/h3>\n

This allows you to import your selected fonts, or choose them from the list of Google fonts that we provide within a dropdown field.
\n\"Manage<\/p>\n

[Manage font section]<\/p>\n

Steps<\/h4>\n
    \n
  1. Click on \u2018Manage fonts\u2019 in the submenu under \u2018Product Builder\u2019 in the Menu.<\/li>\n
  2. Add a name for your new font. You can either use Google fonts or add your own TTF\/OTF font file.<\/li>\n
  3. If you choose Google fonts, you can either select from the preloaded dropdown of Google fonts, or add the full URL for it in the \u2018URL\u2019 field if your chosen Google font is not in the loaded font list.<\/li>\n
  4. If you choose to use your own TTF\/OTF font file, you can add it using the \u2018Add font file\u2019 button.<\/li>\n
  5. Click on the \u2018Add Font\u2019 button at the bottom of the page to add the font to your font list.<\/li>\n
  6. Your current list of fonts will always be displayed on the right-hand side of the \u2018Manage fonts\u2019 page.<\/li>\n<\/ol>\n

    Manage colors<\/h3>\n

    \"Manage
    \n[Manage colors section]<\/p>\n

    Steps<\/h4>\n
      \n
    1. Click on \u2018Manage colors\u2019 in the submenu under \u2018Product Builder\u2019 in the Menu.<\/li>\n
    2. Add a name to identify your chosen color.<\/li>\n
    3. Click the \u2018Color code\u2019 field and select your chosen color in the popup screen. You can choose to type in values in the RGB field, type into the HSB field, or enter the color code in the hash field (#).<\/li>\n<\/ol>\n

      Text Components<\/h3>\n

      Text components are pieces of text that you create in the Text Component subsection, and now choose within your component within the component\u2019s \u2018Manage options\u2019 section.<\/p>\n

        \n
      1. To create a text component, click the \u2018Text components\u2019 submenu under \u2018Product Builder\u2019 in the menu. Click \u2018New text component\u2019 at the top of the page.\u2019 [image]
        \n\"New<\/li>\n
      2. In the page that loads, you will see three (3) sections: Text component settings, Fonts, and Colors. [image]
        \n\"\"<\/li>\n
      3. For the Text component settings section, if you opt to enable the \u2018Boxed text\u2019 field, a new field displays, allowing you to set the box width (in percentages) for the enabled box. [image]
        \n\"Text<\/li>\n
      4. Fill the fields in the Text component settings section, and select the Font and Color you created previously, in their respective sections.
        \n\"Font  \"\"
        \n[Font and color selection within the Text component]<\/li>\n
      5. For fonts and colors, you have the option to enable the display of the other fonts and colors you have created within the system, to the user at the front end.<\/li>\n
      6. Save\/publish your text component.<\/li>\n<\/ol>\n

        Applying the Text Component<\/h3>\n

        You apply the text component you have created by:<\/p>\n

          \n
        1. In the configuration, select \u2018Textfield\u2019 in the \u2018Behaviour\u2019 dropdown list.
          \n\"Textfield<\/li>\n
        2. Click \u2018Manage options\u2019. Click \u2018Add options\u2019.<\/li>\n
        3. Type a name in the \u2018Name\u2019 field, then select your chosen text component under the \u2018Text component\u2019 field.
          \n\"Text<\/li>\n
        4. Close the popup dialog.<\/li>\n
        5. Save\/publish the configuration.<\/li>\n<\/ol>\n

          Multiview text fields<\/h3>\n

          This feature allows you to add a text on various views, it works only with the multiview addon.<\/p>\n

            \n
          1. Go to \u201cConfigurations\u201d and click on \u201cadd component\u201d to create your custom text option<\/li>\n
          2. Choose \u201cmultiple-views textfield\u201d as your component behavior option<\/li>\n
          3. Next click on \u201cManage options\u201d and define the price and the text positions<\/li>\n
          4. Finally go to \u201cSettings\u201d and select whether or not to display the custom font or color on the configurator page.<\/li>\n
          5. Save your configuration\"MultiviewFigure 4 : Product configurator page in admin<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

            Overview The Visual Product Configurator Custom Text Addon allows the customer to add a custom textfield, with a custom color and font, to the preview area of the product customization. The text value of the field is usually sent with the order of the customized product. Requirements and Installation The instructions for the requirements, installation, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[415],"tags":[],"class_list":["post-39085","post","type-post","status-publish","format-standard","hentry","category-configurator"],"acf":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/39085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/comments?post=39085"}],"version-history":[{"count":3,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/39085\/revisions"}],"predecessor-version":[{"id":159115,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/posts\/39085\/revisions\/159115"}],"wp:attachment":[{"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/media?parent=39085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/categories?post=39085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.orionorigin.com\/service\/wp\/v2\/tags?post=39085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}