How to create a personalized custom poster product in WooCommerce

If you want to sell custom posters on your WooCommerce store, wouldn’t it be nice if you customer can personalize their poster and see the result appear on the product main image in real time (“live text view”)? In this guide, you’ll learn how to create a personalized poster product in WooCommerce.

What we’ll make – a customizable poster product

In this tutorial, we’ll be make a poster to greet guests at a wedding. It’s a personalized poster you’d typically place at the entrance of the wedding venue. The poster can be personalized to include the bride & groom’s names.

Do you need code knowledge for this tutorial?

This tutorial requires no code knowledge. Everything is done through WooCommerce and an additional plugin!

What we’ll need

To complete this example, you’ll need the following:

• Have WooCommerce up & running.
• A poster image, with a blank area where the user can add text. For our demo, we used this image.
• The Advanced Product Fields for WooCommerce plugin. This plugin can add extra options to products, such as text fields, checkboxes, file uploads, etc…
• The Live Content Preview add-on which complements the Advanced Product Fields plugin. This plugin allows you to add live text previews on your product’s main & gallery images.

Both plugins are premium (paid) software. You can buy the Extended Bundle package which includes Advanced Product Fields for WooCommerce and all available add-ons.

1. Prepare your WooCommerce product with an image

In this step, we’ll prepare our WooCommerce product by adding the necessary data. If you already have a product set up, head over to the Edit Product screen. Otherwise, create a new product.

Configure the product by:

• Adding a Regular price in the General tab.
• Adding a blank poster image (we used this one) as the main Product Image.

When your done, your product admin looks something like this:

2. Installing Advanced Product Fields for WooCommerce

We’ll guide you through the steps to add a text input field to your product pages. Before you can start, you need to install the Advanced Product Fields for WooCommerce plugin on your website. WooCommerce doesn’t allow adding text fields to products out-of-the-box, so we’ll need that plugin to achieve it.

Installing and activating the plugin is very easy:

1. After purchasing the plugin, you’ll gain access to your Studio Wombat account. From there, you can download the plugin. Head over to the Plugin Downloads section and click the download button.
   
2. To install the plugin, go to your WordPress admin dashboard → Plugins → Add new → Upload Plugin. Next, choose the zip file you downloaded in the previous step and click Install Now. When the installation is complete, click Activate.
3. All you need to do now is to activate the license key. Your license key can be found in the License Keys section of your Studio Wombat account.

3. Adding an extra product option: text input field

Customers can add their names to your poster. To achieve this, you need to add a text input field to your product page. We will use the plugin installed in the previous step to pull this off. Advanced Product Fields for WooCommerce is a lightweight plugin that allows you to add all kinds of input (form) fields to your products: checkboxes, dropdown lists, image swatches, color swatches, text fields, or even file uploads!

Go back to the Edit Product screen to include a text input field. Follow the steps below.

• On the Edit Product screen, under the Product data tab, click on Custom fields.
• Click Add a Field and add a select field type Text.
• Enter a label, default value, and any other option you see fit.

Save your work by updating the product. Now, your your product page includes a text field and your customers can personalize their poster!

Take note of the ID of the field you just created. We’ll need it later.

4. Installing Live Content Preview

Next, install the Live Content Preview add-on for Advanced Product Fields. It complements the core plugin with some amazing extra features to display live content previews on your main product image.

You can pay for this add-on separately or buy the Extended Bundle, which contains the core plugin and all available add-ons!

To install the plugin, follow these steps:

1. Make sure Advanced Product Fields for WooCommerce is already installed
2. Similar to the previous installation, go to your Studio Wombat account to download the plugin and take note of your license key.
3. To install the plugin, go to your WordPress admin dashboard → Plugins → Add new → Upload Plugin. Next, choose the zip file you downloaded and click Install Now. When the installation is complete, click Activate.
4. Go to WooCommerce → Settings → Product fields → Live Content Preview and enter your license key. Click Activate License.
   

You are now ready to use the plugin!

5. Configuring the live text preview

Next, we need to tell WooCommerce to display a live text preview on the main image, every time the customer changes the “name” field we created in step 3.

Set up live content preview on your product

Edit your product and go back to the Custom fields tab. Scroll down until you see the Live Content Preview section and click Add new.

A popup wizard appears to guide you through the steps. In the first step, you can select the image on which to display the live content on. If our product has multiple images (because of the product gallery), you can select the desired image in this step. Since our demo only has one image, it’s already pre-selected. Click Next.

In the next step, you can select which field to use for the live preview. The content of that field will be displayed on the image selected in the preview step. In our demo, there is only one field (the “name” field).

Configure the live preview

The magic happens in this next (and final) step!

• You can draw the exact location where the text should appear on the image. To do so, drag your mouse to draw a rectangle shape on the image.
• You can define important font settings such as color, alignment, font size, and even the font family.
• You can rotate the text on the image or define how the font/color dynamically changes depending on other options selected by your customer.

Press Done when you’re ready and save your product. Visit your product page and try the final result!

Wrapping up: creating a personalized poster in WooCommerce

The Advanced Product Fields for WooCommerce plugin makes it easy to create complex product scenarios in WooCommerce. Paired with the Live Content Preview add-on, you can create customizable products with live text preview in no time.

Ready to take it for a spin?