How to create a personalized 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 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. Either the free or premium version. 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 created 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.

You can use either the free or premium version. 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() {
	
	if(!is_product())
		return;
		
	?>
	<script>
		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);
			$el.appendTo(jQuery('.woocommerce-product-gallery'));
			
			jQuery(document).on('change keyup','input[data-field-id="'+fieldId+'"]',function(){
				var v = jQuery(this).val() || defaultText;
				jQuery('.sw_poster_text').html(v);
			}).trigger('change');
		});
	</script>
	<?php
}

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:

.sw_poster_text{
	top: 36%;
	width: 225px;
	margin-left: -113px;
	position: absolute;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	font-size: 18px;
	line-height: 18px;
	left: 50%;
        font-family:cursive;
	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) {
	.sw_poster_text{
		top:39%;
	}
}

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!