Everything you need to know about the Live Content Preview add-on
This document explains how the Live Content Preview add-on for Advanced Product Fields for WooCommerce works and how it can be set up.
Introduction
As you already know, Advanced Product Fields allows you to add form input fields to your product pages so your customers can personalize their product before adding it to the cart.
The Live Content Preview add-on takes everything a step further and allows you to build a product configurator with live preview capabilities. Any text or images added by customers can be instantly previewed on any of the product gallery images or other images added by our plugin.
Here are a few cool things the plugin can do for your WooCommerce products:
- Users can select a font and see a live preview of their text rendered in that font.
- Similarly, the customer can live preview text in different colors.
- Customers can upload an image which will then be live previewed on a larger image.
In this guide, we will show you how the Live Content Preview add-on works.
Table of contents
Installing the Live Content Preview add-on
To install the lookup table add-on, follow these steps:
- Log into your Studio Wombat account and download the plugin.
- Install the plugin in your WordPress admin dashboard by going to Plugins → Add New and browsing to the downloaded ZIP file.
- Once the plugin is installed & activated, go to WooCommerce → Settings → Product fields → Live Content Preview and enter your license key.
- Click Activate.
You’re now ready to use the plugin.
Prerequisites
Before you can use the Live Content Preview add-on, you must have a WooCommerce product configured with some APF input fields. If you do not know how to do this, please read our Advanced Product Fields getting started guide. It explains in detail how to add fields to your products.
Setting up live content items
In this section, we will show you how to build the actual live preview features by means of this example product.
Display content of a text field on the product’s image
Let’s start by displaying the content of a text field to the product’s image. While the user types text in the textbox, it will be displayed on the product image in real time. To follow this tutorial, make sure your product has at least 1 text field created with APF.
To start, edit your product and navigate to the Custom fields tab in the Product data box. Scroll down to the Live Content Preview section and click Add New.
A popup wizzard appears guiding you through the configuration of your content preview. There are 3 steps and we will go over them in here:
Select image
In the first step, you can select the image on which the customer’s text should appear. In our demo, we only have one image so we can immediately press next. But if you have set more images in the Image Gallery setting of your product, you can pick any of those to display content on.
Select field
In the 2nd step, you can select the input field of which the content should appear on the image. Anything the user types in this field, will be shown on the image selected in the previous step.
Customize
This next step is where the magic happens. Here, you can configure how and where the text should appear on the image. The configuration happens in 2 steps. First, you draw a bounding box on the image to the left. This box indicates where the text should appear. Next, you can set appearance options such as font size, font style. etc… Here’s a quick demo:
Here are the settings we used for this particular demo:
- We drew a bounding box in the center of the plaque.
- Set the Color to white (#fff).
- Increase the font size on mobile to 20.
- Set Alignment to Center so the text appears centered.
Once your configuration is ready, don’t forget to update your WooCommerce product so all changes are saved. Below is a demo of the result. Notice how image zooming also works!
Make it dynamic
Now that we have our live preview of the text, it would be great if we can change some aspects, like color or size, based on what the user selects. In our example above, the text appears in white, but what if we have an option allowing the user to choose another color? In that case, we want the live preview to reflect that.
To do this, first we need to add an extra field to our demo which allows the user to select a color. We chose a simple select list with 3 values:
Next, go back to the Live Content Preview section and click Configure next to the configuration you created earlier.
The configuration wizzard opens back up and shows the last step from previously. Find the Size setting on the right side of the wizzard and click Set a dynamic value. This allows you to change the color based on selections from another field. You’ll see the default value of the color is set to white (#fff). Click Add new condition.
- As Condition Type select “if product field value changes”. This will be preselected.
- As Field, we chose the select list we created earlier. This is the list the user can choose a color from.
- Select any of the field values from that select list (Red in our case).
- Set the New value. In other words, set to which color the live preview should change when the user selects “Red” from the “Select a color” list.
Repeat these steps for any other colors you have and save your work.
The final result looks like this:
You can change more aspects than just the color. You can change the font family, font size, and alignment.
Adding custom fonts
In the previous section, we showed how you can dynamically change the text color. You can do the same for the font family. If a user selects “Times New Roman”, the font display changes to Times New Roman. You can also add your own custom fonts. To do that, go to WooCommerce → Settings → Product fields → Live Content Preview and upload your fonts there.
Make sure the font files are in .woff or .woff2 format.
Give your font a name and browse to the file. Click Save changes and the font will start to upload. The font name is used to select your custom font:
