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.
The lightweight way to create customizable products!Find out more
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:
- 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.
- 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.
- 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 Productscreen, under the
Product datatab, click on
Add a Fieldand add a select field type
- 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!
The lightweight way to create customizable products!Find out more
To install the plugin, follow these steps:
- Make sure Advanced Product Fields for WooCommerce is already installed
- Similar to the previous installation, go to your Studio Wombat account to download the plugin and take note of your license key.
- 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.
- 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?
The easiest way to create poster products in WooCommerce.Find out more
I would like to sell a customizable painting based on an image of the customer. Is it possible to allow the customer to upload an image an see the image live in the whole painting?
Yes, that is also possible with the Live Content Preview add-on.
Hi. I got this to work, but I need the text in the custom field to be added to my downloadable poster. When I add a name to the poster, it doesn’t stay on it when downloaded.
This tutorial is only for displaying the name on the product gallery image. It doesn’t generate an actual downloadable poster.
Do you have code for this?
No, sorry. This is quite a lot of work and not so easy to pull off. It would require custom coding.
Is this option also in the Pro version or only Extended?
You can do this with the Pro version, but you would also need the Live Content Preview add-on.
Hello there, I would like to know if it was possible to add multiple fields on a product, for example : a card with 2 field , one for the name and another for a text. ( and if yes, how many differents texts as i could need ~6 for some very special products )
You can add as many fields as you like: 1, 2, 6 or even more :).
Can I use this for a product such as CAR NUMBER PLATES.
The car number plates usually have 3 options. Front, Back or Both so would this work with it.
Yes, it would definitely also work for such products!
Hi, I need a plugin to customised my bottles adding text. Customization must be an option for them who want to add a text and not mandatory. Is it possible to have a price for a regular product and if customer want to add a text to their product add an fixe amount to regular price?
Another question, is it possible to mix in the cart customized and not customized products?
Yes, everything you want is possible with our plugin :-).
I am selling jewelry where differerent areas need text and the custom areas varies. Is this possible?
This is possible using our Live Content Preview add-on.
I’m just about ready to buy you plug-in, but I need to know if I can upload and use my own fonts?
Yes, you can. 🙂
Thank you. Just one more question. Is it possible to upgrade a 1 year license to a liftetime license if I like the plug-in 🙂
Do the names inside text input field stay with the order all the way through checkout? What do admins see on the backend when they bring up an order from the dashboard? Does the plugin create an extra “custom text” entry on the Order Details page?
Yes, the data is visible in the order admin screen. Here is an example: https://i.snipboard.io/Asa3XK.jpg