How to Configure the Personalization Preview Input in PPOM?

📝 Note: This is part of PPOM Pro, which you can get from here.

The PPOM Personalization Preview meta field is a useful tool for printing or customizing products in an online shop. It enables the administrator to define a position and area for the text, among other particularizations, allowing the user to fill in the text and add it to the cart.

🧰 Configuring the Personalization Preview in Dashboard

As a shop admin, you can configure the personalization preview directly from the PPOM Dashboard by clicking the Manage Personalization Preview button. 

Then, you can use the buttons to create a new personalization preview. Make sure you insert a title and upload an image to start customizing it.

At first, it displays a textbox that you can place anywhere on the product. Then, you can use the Add Textbox button to add more of them.

There are available settings for text, such as a title, adding min-max restraints, predefining a font size or a font family, as well as adding text and background colors:

📝 Note: If you add multiple textboxes, the settings are individual, so you have to configure them one by one.

📌 Attaching the Personalization Preview to the Products

After configuring the Personalization Preview, you have to attach it to the products. For this, add it as a Personalization Preview field and make sure you select the previously created Personalization Preview Meta inside the settings:

Save the fields, then go back to the field groups and use the Attach to Products button:

👁 Personalization Preview for the Customer and User

For the customer

On the website, the user will have a button that he can use to insert text:

A new modal will appear to add the desired text; it might differ due to the settings you provided (alignment, etc).

The last step is to save and close the modal, then check the cart page for the output. There will appear the product, as well as the inserted text.

For the Admin of the shop

The admin will find the orders inside WooCommerce > Orders. The example provided in this doc will appear like this: