Barn2 WooCommerce Live Preview GPL v2.0.0

Barn2 WooCommerce Live Preview GPL Overview

The Live Preview for WooCommerce Product Options add-on allows customers to preview how the image(s) and text they have added 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, text and/or paragraph fields to some or all of your products, with the live preview option enabled (this is active by default for each file upload field and disabled for text/paragraph fields).
• (Optional) Set one or more printable areas on your product or variation images.

You can find full instructions below.

Installing Barn2 WooCommerce Live Preview GPL

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 or text/paragraph fields with Barn2 WooCommerce Live Preview GPL

1. Go to Products → Product Options and add or edit an option group as usual.
2. Click ‘Add option’ and select the ‘File upload’, ‘Text’ or ‘Paragraph’ type.
3. Add a label which will appear above the field, and choose whether or not customers will be charged an extra fee for choosing to upload files or add text.
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 for upload fields, and you need to enable it for text or paragraph fields.
6. Optionally customize the preview button text. This appears above the option on the product page after the customer has uploaded an image/added text, 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/adding text.
8. Advanced settings:
   • File upload fields
     • Maximum file size – Enter the largest file size that customers can upload, e.g. enter “10” for 10MB.
     • 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.
     • 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.
   • Text or paragraph fields
     • Character limits – Optionally add the minimum and/or maximum number of characters that the customer must enter.

Setting printable areas – Barn2 WooCommerce Live Preview GPL

By default, customers can add their image or text 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 inputs 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
     • 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.
     • 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.
  • Disable font selection – Prevent customers from changing the font of the text they have entered.
  • Disable font selection – Prevent customers from changing the color of the text they have entered.
• Linked Option- By default, the printable area will be used for all eligible file upload, text or paragraph fields (i.e. all fields which have image previews enabled and appear on products which use the image that has the printable area). If you want to display it on specific 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 field for the front and select it in the printable area for the front image; and another for the back and select it in the printable area for the back image.

How to allow customers to choose a font – Barn2 WooCommerce Live Preview GPL

By default, customers will be able to choose from a selection of fonts within the preview window for text and paragraph fields. These fonts come from your WordPress theme.

You can prevent customers from choose a font by ticking the “Disable font selection” in the printable area (see above).

To provide a wider choice of fonts, you can enter a Google Fonts API key in the plugin settings at Products → Product Options → Settings.

How to bulk-add printable areas to multiple images – Barn2 WooCommerce Live Preview GPL

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
  • Go to the ‘Media’ section of the WordPress Dashboard and click on the image which you already set printable areas for.
  • Click the ‘Copy areas’ button which appears next to the ‘Edit printable areas’ button.
  • 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.
  • Repeat Step 3 to paste the printable areas onto other images as needed.

Global settings – Barn2 WooCommerce Live Preview GPL

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”.
• Google Fonts API key – To add a wider range of font chooses for text and paragraph field previews, enter a Google Fonts API key here. Google has provided instructions on how to generate an API key.