The Live Preview for WooCommerce Product Options add-on allows customers to preview how the image(s) they have uploaded will look on the finished product.

To provide live previews, you must:

• Have both WooCommerce Product Options and the Live Preview add-on installed.
• Add file upload fields to some or all of your products, with the live preview option enabled (this is achieve by default for each file upload field, and you can disable it if required).
• (Optional) Set one or more printable areas on your product or variation images.

You can find full instructions below.

Installing WooCommerce Live Preview

The Live Preview add-on will be installed automatically when you have an active license for WooCommerce Product Options which includes Live Preview. This will either happen when you first activate WooCommerce Product Options, or if you upgrade to the Live Preview bundle later then a Dashboard notice will then appear prompting you to click a button to install the add-on.

Adding file upload fields with live preview

1. Go to Products → Product Options and add or edit an option group as usual.
2. Click 'Add option' and select the 'File upload' type.
3. Add label which will appear above the field, and choose whether or not customers will be charged an extra fee for choosing to upload files.
4. Optionally add a description which will appear under the field. For example, this might contain guidance on recommended image sizes or formats.
5. The 'Enable live preview' option will be enabled automatically.
6. Optionally customize the preview button text. This appears above the file upload field after the customer has uploaded an image, so that they can re-open the preview and make further changes.
7. Set the field to 'Required' to prevent customers from adding the product to the cart without uploading files.
8. Advanced settings:
   1. Maximum file size - Enter the largest file size that customers can upload, e.g. enter "10" for 10MB.
   2. Maximum number of files - Optionally set a maximum number of fields that can be uploaded to the field. For example, if you have only added 2 print areas to the product then you may wish to restrict this to 2.
   3. Allowed file types - We recommend removing any non-image file types (e.g. PDF) because the image preview only works for image files, and allowing other types might cause confusion.

Setting printable areas

By default, customers can add their uploaded image to any part of the product image. You can set a printable area defines the section(s) of the product image which the customer's image can appear over. For example, you might add a square section to an image of a t-shirt.

1. First, go to the 'Media' section of the WordPress Dashboard and click on one of the images that you want to use the image preview on. Alternatively, you can edit the product via the 'Add/Edit Product' screen.
2. Click the 'Set printable areas' button.
3. This will open a modal window allowing you to add one or more printable areas to the image.
   
   
   • Add printable areas:
     1. Choose a shape for the printable area - The square and circle will be added automatically. To add a custom shape, click on the third icon and then click on the image where you want to start drawing the shape. Move the mouse and keep clicking to add all the corners to the shape, and then click on the first point to close the shape.
     2. Size and position the printable area - Once you have added your printable areas, you can drag to reposition them, and click on the anchor points to resize them.
   • Image options:
     • Allow only one image per area - Prevent customers from adding more than one image to the same printable area.
     • Disable moving - Prevent customers from dragging on their uploaded image to change the position.
     • Disable resizing - Prevent customers from resizing their uploaded image.
     • Disable rotating - Prevent customers from rotating their uploaded image.
     • Extend to variation images - Enable this option to use these printable areas on all the variation images for the same product. For example, if you have a t-shirt with variations for white, red and blue then you can just add printable areas to the white image, and enable this option to apply the same ones to the red and blue images.
   • Product Options - By default, the printable area will be used for all eligible file upload fields (i.e. all file upload fields which appear on products which use the image that has the printable area). If you want to display it on specific file upload fields only, then select these here. For example, if you're creating a t-shirt product and will have different preview fields for the front and back of the t-shirt, then create one file upload field for the front and select it for the front image; and another for the back and select it on the back image.

How to bulk-add printable areas to multiple images

Many stores need to use the same printable areas on multiple images - for example, if all their t-shirt products have images which are the same size and shape; or for a product that has a different image for each color variation.

There are 2 ways to apply the same printable areas to multiple product images at once:

• Variable products - Enable the "Use for variation images" option when you set the printable area (see above).
• Separate products:
  1. Go to the 'Media' section of the WordPress Dashboard and click on the image which you already set printable areas for.
  2. Click the 'Copy areas' button which appears next to the 'Edit printable areas' button.
  3. Still in the Media Library, now navigate to an image that you want to add the copied printable areas to. Click the 'Paste areas' button.
  4. Repeat Step 3 to paste the printable areas onto other images as needed.

Global settings

When Live Preview is installed, the WooCommerce Product Options settings page (Products → Product Options → Settings) contains several options to customizing the live preview:

• Customize button text - Use this to change the text of the link to re-open the preview window which appears on product pages, for example to "Configure" or "Edit Mockup". (You can also change the text for each individual file upload field on the Add/Edit Option Group page.)
• Preview label - Use this to change the text of the link to re-open the preview window which appears on the cart and checkout. This allows customers to view the image preview but not edit it, so we recommend using wording such as "View Preview" rather than "Customize".

FAQ

Can customers add multiple images to 1 product image?

Yes - you can add as many printable areas to a product image as you like. For example, an image of the front of a t-shirt might have both the front and sleeves visible. In this case, you could add one printable area to the front of the t-shirt, and 2 additional printable areas to the sleeves.

When customers upload 3 images, the preview window will contain all 3. The customer can then drag them to the appropriate printable area as needed.

Can I provide multiple file previews for the same product (e.g. a t-shirt front and back)?

Yes, you can do this as follows. The following instructions use the example of how to do this for a t-shirt where you can upload images to the front and back and preview them separately:

1. Add 2 file upload fields to the same options group - one for the t-shirt front, and one for the back.
2. Make sure that the product image gallery contains images of the front and back of the t-shirt.
3. Set printable areas for both the front and back of the t-shirt. For each one, select the appropriate file upload option to link the correct fields with the correct images.

Tip: To keep your product page looking clean and tidy, you can use conditional logic to hide the t-shirt back fields when the page first loads. For example, you could either add a checkbox saying "Customize the back of the t-shirt" which customers can tick to reveal the back options.

Do preview images appear on the cart and checkout?

If you're using the standard WooCommerce cart and checkout pages then the preview images will appear against the relevant products. Customers can click on them to reassure themselves that their customizations have been saved.

Unfortunately, it is not currently possible to display the preview images with the new WooCommerce cart and checkout blocks. We have a separate article about this.

Can customers see text previews?

The Live Preview add-on currently only provides image previews. We are currently building a new feature to add text previews too. This will be added in early 2025.

If you're already using WooCommerce Product Options then we will email you when the new text previews are available. Alternatively, send us a feature request and we'll make a note to notify you individually.

Can customers edit the image, e.g. by re-cropping it or removing the background?

The Live Preview add-on only allows customers to reposition and resize the images. We recommend using the description field for the file upload field to provide clear instructions to the customer, for example advising them to edit and crop their images before uploading them to the product.

If you would like customers to be able to make other changes to the images then please send us a feature request with details of what you would like. In the meantime, the only plugin we're aware of that can do this is called Fancy Product Designer. This is much more complex to set up, but also has extra functionality such as the ability to edit images. 

Can I customize the live preview?

The Live Preview contains several developer filters which you can use to customize it. These include: 

• Changing the upscaling factor which affects the quality of the image preview
• Changing the maximum canvas size (defaults to 2400x2400).
• Changing the default object-fit when images are added to printable areas on the front end. This defaults to contain (often referred to as "fit") and can be set to cover (or "fill").
• Changing how preview files are stored on your web server. By default, they are stored as PNG files. Some store owners might want to save server space by using the JPG format.
• Changing the file preview quality when JPG is the chosen output format.

Does it work with WooCommerce Bulk Variations?

Lots of people use WooCommerce Product Options with our WooCommerce Bulk Variations plugin to display size and color variations (for example) in a quick order form with options such as file upload fields below.

You can also use the Live Preview add-on to allow customers to preview their uploaded images. To do this, you must upload a generic image as the main product image and the live preview will appear on this - as you can see with the white t-shirt in the screenshot above. It's not possible to display a live preview on each variation image because there's no way for customers to select an individual variation in the grid (by definition, WooCommerce Bulk Variations is about ordering multiple variations at one!).

When customers do this, 3 images will appear against each variation in the cart and checkout:

• The customer's uploaded image.
• The main product image with the customer's image added (e.g. the white t-shirt from the screenshot above).
• The image for the individual variation, without the customer's image (e.g. a green, red or blue t-shirt from the above example).

We are aware that some people would like to be able to display the preview on individual variation images when using Live Preview with WooCommerce Bulk Variations. We are currently investigating ways to make this possible and would appreciate your feature requests with details of how you would like the interface to work.

Related Articles

• Importing and exporting product options
• Creating product options
• Installing WooCommerce Product Options