How to create a personalized poster product in WooCommerce

WooCommerce custom poster example

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 poster image in real time?

Your first thought might be to use one of the many product designer plugins (like this one) for this functionality. However, these plugins are usually overkill as they add a whole new application (the product designer) within your page. This slows down your website with a lot of scripts, and likely confuses your users with an unexpected experience.

For a simple poster product, that’s not what we want. The tutorial below explains how you can add this functionality with minimal load on your website.

What we’ll make

A wedding poster you can personalize

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

Check out the demo here.

Do you need code knowledge for this tutorial?

This tutorial requires a bit of custom styles (CSS code). We’ll provide you with the code and instructions, but please understand that each WooCommerce theme is different. So the code we provide may not be 100% accurate for your specific theme.

If that’s the case, you can reach out to us and we can try to help out. It definitely helps if you have knowledge of CSS, so you can adjust the code to fit your specific theme.

What we’ll need

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

  • The Advanced Product Fields for WooCommerce plugin. We’ll use this plugin to add the additional input field to your poster product page.
  • A poster image, with a blank area where the user can add text. For our demo, we used this image.
  • Access to your (child) theme’s functions.php file so we can add some custom JavaScript code.
  • Have WooCommerce up & running. We tested this tutorial with version 3.4.0 and up.

Let’s get started!

1. Prepare your product

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

Adding the product image

We need to configure our product by adding a blank poster image (we used this one) as your Product Image.

Adding the input field

In our demo, we allow customers to add names to the poster. We need an input field to do this. We will use our Advanced Product Fields for WooCommerce plugin for this. It’s a lightweight plugin that allows you to add all kinds of input fields to your products.

While there is a free version available, the premium version is better suited for our purpose. Both versions work fine for this tutorial. You may want to go for the premium version if you need extra functions (like limiting characters or pricing options).

So go ahead and install the plugin! Once that’s done, edit your product to include a name 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.

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

Note down your field's ID

2. Add custom JavaScript

Next, we’ll add some JavaScript code to your theme. This code take care of the real-time part of our demo: it will display the value of the input field immediately on your poster. There are 2 ways to add JavaScript to your theme:

  • If you have a child theme, you can add code to your child theme’s functions.php file. This is the recommended approach.
  • Through a plugin called Insert Headers & Footers.

For the purpose of this tutorial, we’ll assume you have an active child theme. Navigate to the functions.php file either through FTP (recommended) or via Appearance > Editor in your WordPress dashboard. Add the code below:

add_action('wp_footer', 'sw_add_poster_javascript');
function sw_add_poster_javascript() {
    jQuery(document).ready(function() {
        var fieldId = "5d8f7c8cb6795"; // Change this
        var defaultText = "Your name here"; // Change this
        var $el = jQuery('<div class="sw_poster_text">').html(defaultText);
        jQuery(document).on('change keyup','[data-field-id="'+fieldId+'"]',function(){
            var v = jQuery(this).val() || defaultText;

You have to change two things in the code above to fit your particular case:

  • var fieldId = "5d8f7c8cb6795"; Change the ID in the quotes to your field’s id (as seen in step 1 of this tutorial).
  • var defaultText = "Your name here"; The text in quotes will show on the poster if the input field is empty.

3. Disable image zoom

WooCommerce has an “image zoom” feature, which means when you hover the image, you get a zoomed-in preview. Since we’re adding text to the whole poster, zooming wouldn’t look right so we can disable this feature with a small piece of code.

In the same functions.php file as step 2, add this code:

add_action( 'after_setup_theme', 'sw_remove_product_zoom_support', 100 );
function sw_remove_product_zoom_support() {
	remove_theme_support( 'wc-product-gallery-zoom' );

If you sell multiple products and you only want to disable the zoom feature on your posters, you can add this instead:

add_action( 'wp', 'sw_remove_product_zoom_support', 100 );
function sw_remove_product_zoom_support() {
        if(is_product() && get_queried_object_id() === 104)
	     remove_theme_support( 'wc-product-gallery-zoom' );

Change 104 in the code above to the ID of your poster product.

4. Add styling

For the last step in this tutorial, we’ll add some styling (CSS code) so that the text nicely overlays your poster image.

Please note: each theme is different. We’ve written the CSS for our demo theme but you’ll need to tweak some of it to fit your theme. We’ll outline which code may need changing. If it doesn’t work, feel free to contact us so we can take a quick look! If you’re a premium user of our plugin, we can write the CSS for you.

Go to Theme > Customize > Additional CSS and add the CSS below:

	top: 36%;
	width: 225px;
	margin-left: -113px;
	position: absolute;
	z-index: 10;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	font-size: 18px;
	line-height: 18px;
	left: 50%;
	word-break: break-all;

We’ve denoted the values that may need changing above in bold. Here’s what they do:

  • top: 36%; How far from the top of your image the text should start. This depends on the image you use and where the text should appear on the poster. Play around with it by increasing/decreasing the percentage.
  • width: 225px; How wide the text area should be. Generally, this is the width of the poster in your image. If you’re unsure of what this should be, try setting it to 100%.
  • margin-left: – 113px; This is an offset value and is generally half the size of the width parameter. Not sure what to enter? Try setting it to 50%.

When surfing on a mobile device, your product page’s layout is likely looking different from a desktop. You’ll need to add some media queries with CSS to make sure the text looks good on all devices:

@media all and (max-width:845px) {

You may need to play with the values in bold again for the right fit for your theme.

Can’t get it to work? Feel free to reach out! If you’re a premium user of our Advanced Product Fields plugin, we’ll write the CSS for you.

That’s it! You should now have a working poster product that can be personalized by your customers in real time!

Check out our demo here.

A wedding poster you can personalize
The final result.

Bonus: add a custom font

In our wedding poster example, it would be great if the custom names appeared in a different and handwritten font. To do this, we’ll follow two simple steps:

Add a custom font to your theme

There are numerous ways to add a font to your website, but we’ll keep it simple by adding a piece of code to the same functions.php file from step 2:

add_action('wp_head', 'sw_add_custom_font');
function sw_add_custom_font() {
	echo '';

As you can see in the code, we chose the Niconne Google Font, but it can be whatever font you want really.

Add some more CSS

Add the below CSS the same way we did in step 4:

div.sw_poster_text{ font-family:'Niconne', cursive; }

That’s it for this tutorial. If you have any questions or are stuck, feel free to reach out to us!



  1. Martin Jensen
    April 23, 2021 Reply

    Is it possible to add two custom fields for one product? When I try to add the code twice in functions.php I just get an error that it can’t redeclare it

    1. Maarten Belmans
      April 24, 2021 Reply

      Yes, it is possible but would require some custom coding on your part. Rather than duplicate the code, you should alter the existing code to account for more fields.

  2. eyevaf
    September 22, 2021 Reply

    hello, how can i solve this problem with this page showing? eyeg

    1. Maarten Belmans
      September 23, 2021 Reply

      Hi there,

      I’m not sure what page you are referring to?

  3. Manuel Colangelo
    September 24, 2021 Reply

    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?
    If yes, how can I do that?


    1. Maarten Belmans
      September 24, 2021 Reply

      Hi Manuel,

      Just like with the personalized poster, it is possible but would require custom coding. We are also working on an add-on plugin that will have this capability.

      Kind regards,

  4. Info
    September 24, 2021 Reply

    Hi Maarten,
    about custom coding, is there an example to start?

    Do you have an idea on when (add-on) will be available?


    1. Maarten Belmans
      September 24, 2021 Reply

      If you reach out to us via our technical contact form, we can give you a starter example of code.

  5. Matthias
    December 4, 2021 Reply


    Thank you for this tutorial,

    I followed the tutorial, but I use elementor, and it doesn’t work.

    Can you help me ?


    1. Maarten Belmans
      December 5, 2021 Reply

      Hi Matthias,

      I’ll need a link to your product to check. Can you reach out to us via our technical contact form here?

  6. Scott Ciravolo
    December 10, 2021 Reply

    Hi. I got this to work, but the code is showing up in my footer. Also, 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.

    1. Maarten Belmans
      December 10, 2021 Reply

      Hi Scott,

      This tutorial is only for displaying the name on the product gallery image. It doesn’t generate an actual downloadable poster. That would be a whole different set of functions to tackle :).

      If the code shows up in the footer, this usually means you forgot a tag like so your browser knows its code and not text.

      1. Scott Ciravolo
        December 10, 2021 Reply

        Do you have code for this?

        1. Maarten Belmans
          December 10, 2021 Reply

          No, sorry. This is quite a lot of work and not so easy to pull off. If you’d like to start a custom coding project, reach out to us via the support form here.

  7. Zsolt
    January 17, 2022 Reply

    Dear Maarten!

    Would you change the code for me to include more custom fields?


    1. Maarten Belmans
      January 17, 2022 Reply

      Hi there!

      That’s not very easy to do, sorry. We do have an add-on plugin that can do it with unlimited fields and no custom code necessary! It’s currently in beta but you can reach out via our support if you’d like it.

Join the discussion

Your email address will not be published.