Visuaro - Product Designer for WooCommerce Free documentation

Visuaro turns any WooCommerce product into a customizable one. Customers open the designer from the product page, add text, upload images, pick shapes, clipart and stickers, add QR codes and Code 128 barcodes, and see their design on a product mockup. A live price updates as the design changes. A print check explains problems in plain language before the customer orders.

When an order is paid, Visuaro makes print files at the real size and resolution of each print area: a vector PDF with live text and embedded fonts, an SVG for cutters and lasers, and a transparent PNG at the target DPI. The files appear in Visuaro > Production queue and on the order, and the store receives a "Print files ready" email with secure download links.

The plugin is for store owners and print shops that sell personalised products. You build templates from your own product photos or install the bundled mockup library, draw print areas in millimetres, and turn the designer on product by product. The free plugin is complete on its own: nothing in it is limited, locked or time restricted.

Visuaro is a free plugin on WordPress.org. WooCommerce 8.5 or newer must be installed and active before you activate Visuaro.

Visuaro > Dashboard gives you an overview of the last 30 days:

• Editor opens: how often shoppers opened the designer.
• Designs saved: designs saved by shoppers.
• Added to cart: designs added to the cart, with the share of designer opens.
• Print check blocks: designs the print check kept out of the cart.
• Awaiting print files and Ready for production: order items waiting for files, and items whose files are ready.

The counters use the anonymous events recorded when Designer statistics is ticked under Visuaro > Settings > General. The events stay in your own database.

The Getting started box lists the setup steps and shows how many products have the designer enabled and how many mockup templates are installed. The Background jobs table lists recent jobs, such as print file generation, with their Type, Status, Attempts and Created date.

A template is the product as shoppers see it: one photo per view, the colours they may pick, and one or more print areas in real millimetres. Many products can share one template. Manage templates under Visuaro > Templates.

Add templates

• Install bundled mockups adds the bundled library: A3 Poster, Acrylic Keychain, Baseball Cap, Business Card 85x55, Ceramic Mug 11oz, Cotton Tote Bag, Pet Bandana, Phone Case (Tough), Pullover Hoodie, Round Die Cut Sticker 75mm, Skateboard Deck, Small Mailer Box, Social Post 1080x1080, Square Cushion Cover 45cm, Unisex Crew Neck T-Shirt, Vinyl Banner 2m x 1m and Wooden Plaque (Engraving). You can also install it from Visuaro > Status and tools.
• New template from my photos opens a short wizard. Pick the Product type, enter a Template name and a Category, upload one photo per view under Views and photos, and add the Colours customers can choose. Click Create and edit print areas to continue in the template editor.
• Import ZIP imports a template package made of a manifest.json file plus PNG or SVG layers.

Each template card shows its category, number of views and source, with Edit, Duplicate and Delete buttons.

Template editor options

• Product type: a starting point with sensible views and print areas (t-shirt front and back, mug wrap, phone case and more). Everything can be changed afterwards.
• Views: each side of the product (Front, Back, Sleeve...). Each view has its own photo and print areas. Add views with + Add view.
• Product photo: any image type works (JPEG, PNG, WebP, AVIF, GIF, SVG). Use a sharp photo at least 1500 pixels wide on a plain background for the best recolouring. A plain JPEG is fine; it does not have to be a transparent PNG.
• Colour mask: an optional white silhouette of the product. Without it, the designer finds the product in the photo automatically when a shopper picks another colour. Detect garment builds the mask for you. Check each colour on the product page afterwards.
• Shading and front overlays: optional images drawn over the design. Shading makes artwork follow folds; a front overlay hides artwork under a pocket or a handle.
• Colours customers can choose: each colour has a name and a value. The product photo is recoloured live in the designer, keeping folds and shading.
• Print area: the printable region. Drag the box on the photo, then enter the true width and height in millimetres. When the box shape differs from that size, a notice offers Fit box to size.
• Shape: rectangle, rounded, ellipse, polygon, curved band (for chest prints and mug wraps), free drawing or a pasted SVG path. Artwork is clipped to the shape in the designer and in every print file.
• Bleed: extra artwork beyond the edge that is trimmed away, so cuts never show a white line. 2 to 3 mm is typical for printed paper; 0 for garments.
• Safe zone: the distance from the edge that important text should keep. It shows as a dashed line and the print check tests it.
• Target DPI: the resolution of raster print files for this area, and the minimum the print check expects from images.
• Allowed print methods: optional. Limits which print methods may use this area. Leave all unticked to allow any.

Every WooCommerce product has a Designer tab in its Product data box. These options apply to that product only. The Customize button works on simple and variable products. The chosen variation is passed to the designer and stored with the design.

• Enable designer: shows the Customize button on this product.
• Mockup template: the template with the product photos, colours and print areas. Choose None (blank print area below) to give shoppers a blank print area of the size set below.
• Print method: how this product is printed. It sets the print check rules and output details. Products that do not choose a method use Default print method from Settings > Print output.
• Button text: overrides the global button label for this product. Leave it empty to use the label from Settings > General.

Blank print area (used when no template is selected), for example for business cards or stickers:

• Size (mm): width and height (200 and 250 by default).
• Bleed / safe (mm): bleed and safe zone (0 and 3 by default).
• Target DPI: 300 by default.

Customer tools choose which tools shoppers get: Text, Image uploads, Shapes (including the pen and brush), Clipart library (clipart and stickers) and QR codes and barcodes. They are all on by default. Tools you switch off are hidden in the designer, and a design that contains them is refused at the cart. Tick Require a design before adding to cart (off by default) to stop the product being bought without a design.

Max objects (200 by default) is the most elements one view of a design may contain on this product. The designer stops adding more, and larger designs are refused at the cart.

Pricing overrides (leave blank to use global settings) set customisation charges for this product only: Customization fee, Per print area used, Per text object, Per image, Per uploaded file and Per square cm covered. Leave a field blank to use the value from Settings > Pricing.

Visuaro > Fonts manages the fonts shoppers can use in the designer. Until you add your own, the designer offers the system fonts listed under Settings > Fonts.

Add Google Fonts

1. Type one or more family names, separated by commas (for example Montserrat, Pacifico).
2. Tick the weights you need (300 to 900) and Italics if you want italic styles. 400, 700 and Italics are ticked by default.
3. Click Add fonts.

Your server downloads the font files once from Google Fonts. They are then served from your own site, so visitors never contact Google and print files embed the exact typeface. Google Fonts are open source (SIL Open Font License) and may be used on printed products. Only the family names you enter are sent to Google.

Upload a font

1. Click Choose File and pick a font file.
2. Check Family name (auto detected) and choose the weight and the style (Normal or Italic).
3. Click Upload.

TTF and OTF fonts work in the designer and in print files. WOFF and WOFF2 fonts work in the designer only. Make sure the font licence allows embedding in print files.

The table lists your fonts with their Family, Weight, Style, Files and License. Add fonts here so PDF print files embed live text. Without a TrueType file on the server, a font prints with a fallback.

Visuaro > Production queue lists every designed order item with a preview, the Order, the Customer, the production Status and the Print files.

How print files are made

1. When an order reaches a status ticked under Settings > Print output (Processing and Completed by default), Visuaro makes the print files in the background.
2. The files appear as download buttons in the Print files column and in the Visuaro panel under each order item. Download links are signed and only work for staff who can view orders.
3. The store receives the "Print files ready" email with secure links.

Each file is made at the print area's true size: a PDF with live text and embedded fonts, an SVG for vector work and a transparent PNG at the target DPI. Direct to Film files are mirrored automatically.

Generate files by hand

• Click Generate on a row (or Regenerate when files already exist), for example for an on hold order.
• To do several at once, tick the rows (or Select all) and click Generate print files for selected.

Track production

Set each row's status to Pending, Ready, In production, Completed, On hold or Cancelled. Rows can also show Partial or Failed after generation. Use the links above the table to filter by status. Status changes are recorded in the audit log.

When generation fails, the row shows a short note in red, for example when the server ran out of memory. See Troubleshooting below.

Visuaro adds a store email under WooCommerce > Settings > Emails > Visuaro: print files ready. It is sent to the store when the print files of a designed order item have been generated, with secure download links. The links work for seven days. You can always download the files again from Visuaro > Production queue.

• Recipient(s): comma separated addresses. When empty, the email goes to the site admin email address.
• Enable/Disable: untick to stop sending this email.
• Subject and Email heading: leave them empty to use [{site_title}] Print files ready for order #{order_number} and Print files ready.
• Additional content, Email type, Cc(s) and Bcc(s) work like other WooCommerce emails.

Use Send a test email in the Email preview to check how the email looks.

To attach the files themselves as well as the links, tick Attach files to the "Print files ready" email under Visuaro > Settings > Print output. Large files may exceed your mail server's attachment limit.

Visuaro > Settings has six tabs. Every option has a Learn more link to the built in Help and docs. Click Save settings after changing a tab.

The General tab controls how the designer appears on product pages and how designs are kept.

• Button text: shown on every product with the designer switched on. A product can use its own label in its Designer tab. Keep it short and active, for example "Customize" or "Design yours".
• Button position: Before add to cart puts the designer first, which suits products that must be personalised. After add to cart suits products that can also be bought plain.
• Editor mode:
  • Modal overlay opens the designer above the product page. It is the best default.
  • Full page (strict CSP) opens a dedicated designer page with a strict Content Security Policy. Use it when theme or plugin styles clash with the designer.
  • Inline on the product page embeds the designer in the product page itself.
• Editor theme: Dark puts the focus on the product and the artwork. Light matches bright store themes. Follow device uses the shopper's system setting.
• Accent colour: use your brand colour for buttons, selection handles and highlights. The designer keeps text on this colour readable automatically.
• Guest designs: guests get a private, signed cookie that identifies their designs. When they log in or register, their designs move to the account. Untick it to ask shoppers to log in before they can save.
• Autosave: drafts appear under My account > Saved designs. Ten seconds balances safety and server load. Enter 0 to turn autosave off.
• Versions per design: older versions are removed automatically, except versions that belong to an order, which are never deleted. At least three are always kept.
• Branding: shows a small "Powered by Visuaro" note, linking to propluginslab.io, in the designer footer. Off by default. It has no effect on any feature.
• Designer statistics: counts designer opens, saves and add to cart events for the Dashboard. Events use a hashed, anonymous session id, stay in your database and keep no personal data.

The Print output tab decides which print files are made for each order and when.

• Default DPI: the resolution of raster print files and the target the print check uses for new print areas. 300 suits most printing; large format work often uses 150. Each print area can override it in the template editor.
• Default print method: used by products that do not choose a method in their Designer tab.
• Print file formats: files made for every printed view of an order.
  • PDF: vector, live text, embedded fonts keeps vector shapes and live text, which printers prefer.
  • SVG: vector, for cutters and lasers is a vector file for cutters, lasers and design tools.
  • PNG: transparent raster at the print resolution suits DTF, DTG and sublimation.
• Generate when the order becomes: the order statuses that start print file generation, normally when the order is paid (Processing). On hold orders, such as bank transfers, wait until you mark them paid. You can always generate files by hand in the production queue.
• Print check: blocks add to cart while a design has blocking print problems. The print check flags images too low in resolution, artwork outside the printable area, missing images and text too small to print. Blocking problems stop the order until fixed; warnings only inform. Untick it to let shoppers order anyway. The product's own tool restrictions still apply.
• Attach files to the "Print files ready" email: attaches the files as well as the secure download links.

Print methods

The print method sets the print check rules and whether files are mirrored. Choose a store default here and override it per product in the Designer tab. The plugin uses these values for each method:

Direct to Garment and Direct to Film produce a transparent PNG at the print resolution. Direct to Film is mirrored for transfer.

The Pricing tab sets customisation charges that are added to the product price. Amounts are in your store currency. A product can set its own values under Pricing overrides in its Designer tab. The designer shows a live price that updates as the design changes, and the cart shows the design charges.

• Customisation fee: a flat charge added once per unit to every customised product, for example to cover setup. Leave it at 0 to charge only for what the design uses.
• Per print area: for each print area that has artwork, for example front and back. With the default free allowance of 1, you charge only for the second and further areas.
• Per text: for each text element. Useful for engraving or embroidery, where each line costs time.
• Per image: for each image, sticker or clipart element.
• Per uploaded file: for each image the shopper uploaded. Stickers and clipart are not counted as uploads.
• Per square centimetre: by the area the artwork covers, measured from the bounding box of all artwork in each print area. Suits DTF and large format, where ink and film use grow with size.

Each per item charge has a free allowance: how many are included before the charge applies (0 to 100).

Example: with Per print area set to 5 and Per print area: free allowance set to 1, a design printed on front and back adds 5 to the price.

The Uploads and privacy tab sets what shoppers may upload and how long data is kept.

• Maximum upload size: the largest image a shopper may upload, in MB. Your server's own limit also applies; it is shown on Visuaro > Status and tools. Print quality depends on pixel size, not file size, so 20 MB is plenty for most photos.
• Uploads per hour: counted per logged in user, or per guest session and IP address. Shoppers who reach the limit see a message and can continue an hour later.
• Allowed image types: JPEG, PNG, WebP, SVG, GIF, AVIF, TIFF and HEIC. Types are checked by file content, never by name, so a renamed file is rejected. SVG files are rebuilt from a strict allow list, so scripts and external links never survive. Formats your server cannot read are converted to PNG in the shopper's browser before upload.
• Remove photo metadata: strips EXIF, GPS location, XMP and IPTC data from uploads. It protects shoppers and never changes the image itself.
• Keep colour profiles: keeps the embedded ICC colour profile when metadata is removed. Keep it on unless your print shop asks otherwise.
• Abandoned drafts: drafts that were never saved by name, added to the cart or ordered are removed with their uploads after this many days. Ordered designs are never removed.
• Audit log: how many days to keep the record of who changed settings, templates and production statuses.

Designs are included in WordPress personal data export and erasure (Tools > Export Personal Data and Tools > Erase Personal Data).

The Fonts tab lists the fonts offered in the designer.

• System fonts: a comma separated list of fonts shown using the shopper's own device fonts. They cost nothing to load but can look slightly different on each device. Print files use a fallback unless you upload the same font as a TrueType file under Visuaro > Fonts.
• Google Fonts: comma separated families, for example Montserrat, Pacifico. They are downloaded to your site when you click Save settings and then served from your site, so print files embed the exact typeface.

To choose weights or upload your own font files, use Visuaro > Fonts.

The Advanced tab covers performance, caching, access and removal.

• Canvas renderer: the drawing engine of the designer. Automatic picks WebGPU or WebGL2 where the browser supports them and falls back to Canvas 2D. Choose Canvas 2D only if a shopper's graphics driver shows glitches. Print files are never affected.
• Page cache exclusions: registers exclusions with WP Rocket, LiteSpeed Cache, W3 Total Cache and WP Super Cache, and sends "do not cache" signals to other caches, so one shopper never sees another shopper's design.
• Admin IP allow list: an extra lock for stores with a fixed office address. Enter single addresses (203.0.113.5) or CIDR ranges (198.51.100.0/24), separated by commas. Leave it empty to allow all. Make sure your own address is in the list before saving.
• Remove data on uninstall: when ticked, deleting the plugin from the Plugins screen permanently removes all Visuaro tables, settings, designs, templates, uploads and print files. It is off by default so a reinstall keeps everything. Data is always kept while the other Visuaro edition is still installed.

Visuaro > Status and tools shows whether your server has everything Visuaro needs and offers maintenance tools.

Environment checks PHP, Imagick, GD, libsodium, ZipArchive, the storage folder, the memory limit, a persistent object cache, Action Scheduler, the database schema and the editor bundle, and shows the queue backend and plugin version. A green tick means the item is fine. A warning tells you what is missing and what falls back, for example:

• Imagick missing: GD is used instead.
• ZipArchive missing: template ZIP import is disabled.
• No persistent object cache: transients are used.
• Action Scheduler missing: jobs run synchronously.
• Storage folder not writable: uploads, previews and print files cannot be saved.

Tools:

• Install bundled mockup library: adds the bundled templates.
• Run database migrations: updates the Visuaro database tables.
• Flush Visuaro cache: clears the plugin's cached data.
• Retry failed jobs: runs failed background jobs again. The number shows how many failed.
• Rotate signing secret: changes the secret used to sign private download links.

The screen also lists the WP-CLI commands under wp visuaro: doctor, migrate, cache flush, template install, render and purge.

Recent jobs lists background jobs with their Status, Attempts and Error. Audit log shows who changed settings, templates and production statuses, with the action, subject and IP address.

Visuaro > Help and docs is the built in manual. Use Search the documentation to filter it. It covers getting started, templates and print areas, the product Designer tab, the designer, orders and production, fonts, privacy and security, external services, troubleshooting, developer hooks and a full settings reference. Every Learn more link on the settings screen opens the matching entry here.

Besides the button on product pages, you can place the designer for a customizable product on any page or post, for example a "Design your own" page.

• Shortcodes: [visuaro product="123"] or [visuaro_button product="123" label="Design it"]. Both show the designer button for that product. [visuaro_button] is meant for page builders such as Divi and Oxygen and any shortcode module.
• Block editor: add the Visuaro Product Designer block and set the product ID and the button label.
• Elementor and Bricks: add the Visuaro Product Designer widget or element and fill in Product ID and Button label.

The product must have Enable designer ticked in its Designer tab. Otherwise nothing is shown. When you leave the label empty, the Button text from Settings > General is used.

On a product with the designer enabled, shoppers see the designer button next to Add to cart, before or after it depending on Button position. The label comes from Settings > General or from the product's own Button text. On a page with the [visuaro] shortcode, the block or a page builder widget, the button shows wherever you placed it.

The button opens Visuaro Studio, a full design workspace that works with mouse, touch and keyboard on desktop, tablet and phone:

• A menu bar (File, Edit, Object, Type, Select, View, Window, Help), Undo and Redo, the print check indicator, the live Price, Save and Add to cart.
• A Start your design card with Text, Upload image, Templates (editable ready made layouts) and Shapes.
• A toolbar with move, hand, zoom, type, shape, pen, brush and eyedropper tools, plus uploads, text styles, elements, stickers and QR codes.
• Tabs for each print area view (for example front and back) and the product colour picker.
• A Properties panel showing the print area size, resolution, print method and safe zone, and a Print check panel that explains problems in plain language and fixes most of them in one click.
• Layers and History panels, and Color and Navigator panels.

Text supports fonts, sizes, weights, colours, outlines, shadows, letter spacing, alignment and curved text. Uploaded images can be cropped, masked, bordered and adjusted, with a warning when an image is too small to print sharply. Shapes, a shape library, 66 vector stickers, your own clipart, QR codes and Code 128 barcodes are available, along with layers, smart guides, millimetre rulers and snapping.

After Add to cart, the cart shows a thumbnail of the design, a Design line with any customisation charges and an Edit design link. Logged in customers find their designs under My account > Saved designs, where Open reopens a design on its product.