Getting Started

Iza Product Designer for WordPress provides a visual product builder, reusable content libraries, frontend placement, WooCommerce pricing and variation integration, customer saved designs, cart thumbnails, immutable order snapshots and browser-based production export.

Products, views, layers, content libraries and export settings are configured visually in the administrator, stored by WordPress and loaded automatically wherever the product is assigned.

Important: do not create another designer manually on plugin pages. WordPress builds each instance from the selected assignment or shortcode.

Requirements

WordPress 6.0 or newer and PHP 8.0 or newer.
A modern browser with Canvas, Promises, Fetch and the FontFace API.
WooCommerce only when storefront pricing, variations, cart, checkout and order features are required.
A writable WordPress uploads directory for imported product assets, custom fonts, customer uploads and generated thumbnails.
Trusted product administrators can upload SVG files through the Media Library. The plugin sanitizes SVG XML before WordPress stores it; malformed files and unsupported executable content are rejected.
HTTPS and consistent WordPress/Site URLs on production sites. Mixed HTTP/HTTPS media or font URLs are blocked by browsers.

Choosing the right image format

Select assets according to the detail, transparency and color editing customers need. The right format keeps the editor responsive and improves preview and production output.

Format	Recommended use	Color customization
SVG	Logos, icons, shapes, line art and editable product regions.	Best choice for sharp scaling and editable vector colors. Upload through the WordPress Media Library, then configure available colors in the relevant content item or view layer.
PNG	Transparent photos, shading, texture, shadows and raster artwork.	Supports tinting while preserving source detail. A fully white transparent PNG works well as a clean color mask.
JPG	Opaque photographs and full rectangular backgrounds.	Not recommended for recoloring because JPG does not contain transparent regions that isolate the subject.

Practical rule: use SVG for scalable editable artwork, PNG for transparent raster detail, and JPG for ordinary opaque photographs.

Prepare SVG and PNG assets

Prepare assets before uploading them through the WordPress Media Library or adding them to a product content library. The tutorial demonstrates the same SVG, PNG, color and shading workflow used by the WordPress and WooCommerce product builder.

Editable product colors: use clean SVG paths with explicit fills and remove unused metadata or embedded raster files.
Realistic shading: place a transparent PNG overlay above editable SVG product layers to preserve folds, highlights and shadows.
Transparent artwork: use optimized PNG files sized for the largest expected production output.
Photographs: use JPG only when transparency and customer recoloring are not required.
Production quality: test the final crop, colors and resolution with Download Production before publishing the product.

Installation

Upload the complete iza-product-designer folder to /wp-content/plugins/, or install its ZIP from Plugins > Add New > Upload Plugin.
Activate Iza Product Designer.
Open Iza Product Designer in the administrator menu.
Create a product from a starter template, import a product ZIP, or start with a blank product.
Add at least one view, save it, then save the product.
Assign the product to a WooCommerce product, a supported post/page, or place it with the shortcode.

Activation grants the plugin capability to administrators and creates the saved-design table. Deactivating the plugin does not delete products, categories, fonts, saved designs or order data.

Create the first product

Click Add Product and enter a title and required reference image.
Select Blank or one of the Shirt, Cap, Mug and Phone starter templates.
Open the product, add or edit its views, then click Design for a view.
Set the physical print size and canvas in View Options, position the printing box, and add the required layers.
Configure interface, content-library, production and WooCommerce options.
Save the view and then save the product. Green save/update states indicate unsaved changes.

Updates

Back up the WordPress database and wp-content/uploads before replacing plugin files. Keep the entire plugin folder together, clear page/cache/CDN caches after updating, and test product pages plus one production export before deploying.

Data safety: plugin updates replace code, not saved products. Do not use the internal reset-all development utility on a production site; it intentionally clears product and category data.

Products Manager

The Products Manager is the single administration workspace. Products contain their views, complete interface configuration, content libraries, production setup and WooCommerce behavior; there are no separate plugin submenu pages for those parts.

Products and starter templates

Product cards can be opened, renamed, duplicated, designed, exported or deleted. Drag cards to change their administrator order. A new product can start blank or copy a bundled Shirt, Cap, Mug or Phone template. A copied template becomes independent: later template-file changes do not overwrite it.

The product title, reference image, base price, starting view and root unit belong to the product. WooCommerce supplies the storefront base price and currency when the product is used on a WooCommerce page.

Product ZIP import and export

Export Product creates a portable ZIP containing product data and only the product assets referenced by its views. It is intended for backup, transfer and template creation, not print production.

Import Product accepts an Iza Product Designer ZIP. After selecting the archive, choose whether its images and SVG assets should be registered in the WordPress Media Library.

Yes: supported assets are added as Media Library attachments. Matching existing attachments are reused instead of duplicated.
No: assets are stored persistently in WordPress uploads without creating Media Library entries.
Close: closing the question dialog cancels the pending import.

The importer validates the package, rewrites every referenced asset URL to the current website and creates an independent product. Click Update afterward to save the imported product.

Do not confuse exports: Product ZIP export preserves an editable product. Preview Download renders the customer-facing mockup. Production Download crops printable content to the printing box at the configured physical size and DPI.

Views

A product can contain front, back, side or any other ordered views. Every view requires a title and thumbnail. View cards support design, edit, duplicate, delete, visibility and drag sorting. The first configured/start view is loaded initially unless the product specifies another view.

The view thumbnail is a normal reference image and is not clipped by the canvas printing box. Saving a view returns to the product only after the view data has been stored successfully.

View Designer

The View Designer uses a dedicated builder interface around the real product canvas. Its top layer grid and selected-element inspector are administration controls; the action bar and frontend modules can be hidden while building.

Add image, text, shape and artwork layers from the product's embedded libraries.
Replace media, edit titles/content, sort layers, and set visibility, lock and Layers-module behavior.
Edit position, size, origin, rotation, skew, flip, fill, stroke, shadow, text formatting and curved-text parameters.
Configure movable, resizable, rotatable, duplicable, removable, resettable and other element permissions.
Use None, Clipping, Inside, the Printing Box, or another current layer title as an element boundary where supported.
Use Undo/Redo, ruler, snapping, zoom and fullscreen while building.

Layer-title selectors refresh when layers are added, renamed or removed. If a layer used as another element's bounding box is deleted, the invalid reference is cleared.

View Options

View Options define the editor canvas and physical print output for one view.

Option	Purpose
Print Size	Select an included paper/business-card preset or Custom. Selecting a preset updates the width and height fields without hiding them.
Print Width / Height	Real printable trim size in millimeters. These values calibrate the printing-box pixels to physical output.
DPI	Raster resolution. `0` is allowed when no forced production DPI is required.
Bleed	Extra physical millimeters rendered outside each printing-box edge.
Canvas Width / Height	Editor stage size in pixels, up to the supported 4000-pixel limit.

Auto-Calculate Canvas Size keeps the physical print ratio and creates a matching canvas/printing box. Use it as a starting point; product artwork can then be positioned around the printable area.

Content libraries

The Content tab manages Text, Images, Shapes and Artwork. Items are embedded in the product settings, can be sorted, and appear in the same order on the frontend. New items are inserted first.

Template-specific price > 0 overrides the module price; price 0 inherits the module fallback.
Colors are optional customer choices. Adding a palette does not automatically apply its first swatch.
Item Background changes only the library thumbnail background, which is useful for white artwork.
Permissions and visual properties are copied when an item is inserted into a view. Existing view elements remain independent if the library defaults change later.
Artwork uses sortable categories. Open a category to manage only its artwork, then use Back to return to category thumbnails.

Fonts

Font configuration follows three sources:

System Fonts: comma-separated families expected to exist on the visitor's operating system, such as Arial.
Google Webfonts: selected hosted families. Loading many families increases startup time.
Custom Fonts: uploaded font files stored under wp-content/uploads/iza-product-designer/fonts/ and selectable by product text controls.

The Custom Fonts Manager supports uploading, downloading and deleting managed font files. Keep the site's public URL scheme consistent so HTTPS pages never request an HTTP font URL.

Product categories

Plugin categories group one or more Iza products for non-WooCommerce pages and shortcodes. Drag products into a category, sort their frontend order and select the initial product. Products in the same category appear in the Products module; switching products reinitializes the editor with that product's own settings.

These are designer categories, not WordPress taxonomy terms or WooCommerce product categories. WooCommerce assignment intentionally uses one Iza product per product/variation because store price and purchasing behavior belong to the WooCommerce item.

Settings

Configure each product through the visual settings tabs in Products Manager. Every setting is edited directly through WordPress fields, toggles, color pickers and sortable lists.

Where to edit settings: open Iza Product Designer > Products Manager, edit a product, select a tab, change the required fields, then click Update Product. Settings belong to the selected Iza product and are reused wherever that product is assigned.

1. Open a productChoose the product you want to configure in Products Manager.

2. Select a tabUse General, Interface, Content or Production.

3. Edit visuallyUse fields, toggles, color pickers and sortable lists.

4. Save changesClick Update Product when the button becomes active.

GeneralSize, display, lightbox, bounds, keyboard, loading and dialogs. InterfaceAction bar, views, modules, layers, canvas and object toolbar. ContentText, images, shapes, artwork and their default behavior. ProductionCustomer downloads, preview window and available formats.

Value precedence: view and item values override matching product defaults. Library-item prices and permissions override their module defaults. On WooCommerce pages, the store currency and current product or variation price are used automatically.

General tab

Controls the editor size, display mode, measurement behavior, bounds, keyboard support, loading screen and confirmation windows.

Core settings

Products Manager > Edit Product > General > Core

Configure editor sizing, startup behavior, working units and the main appearance. Product sources, starting views and base prices are managed by the Products Manager and WooCommerce fields.

Backend field	Available values	Description
Display	Responsive \| After Parent \| Lightbox	Controls how the editor is displayed. Lightbox mode uses the dedicated Lightbox section below.
Maximum Width, Resize Width	Finite number ≥ 0 (CSS pixels) \| percentage string in lightbox mode	Maximum editor width and width at which automatic scaling starts. Lightbox values such as `'90%'` are relative to browser width.
Maximum Height, Minimum Height	Finite number ≥ 0 (CSS pixels) \| percentage string in lightbox mode	Maximum and minimum editor heights. Lightbox values such as `'90%'` are relative to browser height.
Canvas Width, Canvas Height	Finite number ≥ 0 (canvas pixels)	Fallback canvas size when the active view does not contain its own canvas dimensions.
Initialize When Visible	On \| Off	When true, initialization waits until the editor enters the viewport.
Automatic Scaling	On \| Off	Scales the editor height with its responsive width.
Unit	Millimeters \| Centimeters \| Inches \| Pixels	Fallback working unit for measurements and production information. A unit saved with the active product overrides this default. The ruler temporarily uses pixels while Bounding Box Editable is enabled.
Default Bleed	Finite number ≥ 0, in millimeters	Global physical bleed per edge. A Bleed value saved in View Options overrides it; a value of 0 disables bleed.
Ruler Position	Canvas \| Printing Box	Places ruler zero around the entire canvas or the active printing box.
Ruler Initially Visible	On \| Off	Starts the ruler visible. The Ruler action can still hide it.
Currency	Currency symbol or code	Currency used for base, layer and library prices on non-WooCommerce pages. WooCommerce supplies its store currency automatically.
Background	Color picker, including transparency	Main editor background.
Drop Shadow	Shadow value \| None	Outer editor shadow.

Lightbox

Products Manager > Edit Product > General > Lightbox

Configure the full-browser viewer, Customize button and close button. Closing the lightbox hides it without clearing the customer's current design. Full-width and full-height layouts place the close control in the action bar so it does not cover the editor.

Backend field	Available values	Description
Button Label	Non-empty string	Text displayed in the generated launch button. Defaults to `'Customize'`.
Background	Color picker, including transparency	Background covering the browser while the lightbox is open.
Button Background, Button Background Hover	Color picker, including transparency	Customize button background in its normal and hover states.
Button Text, Button Text Hover	Color picker, including transparency	Customize button text in its normal and hover states.
Close Width, Close Height	Finite number >= 24 (CSS pixels)	Close-button width and height.
Close Background, Close Background Hover	Color picker, including transparency	Close-button background in its normal and hover states.
Close Icon, Close Icon Hover	Color picker, including transparency	Close icon in its normal and hover states.

Bounds and snapping

Products Manager > Edit Product > General > Bounding Box

Control object boundaries, clipping, editable printing boxes and center-snapping behavior.

Backend field	Available values	Description
Bounding Box Mode	None \| Inside \| Clipping \| Existing layer	Fallback bounds for newly added objects when an item/module does not define its own mode. Each WordPress product stores one value; product categories do not use a positional array.
Bounding Box Color	Color picker, including transparency	Printing-box guide and editable bounding-box color.
Show Printing Box	On \| Off	Shows the dashed printing-box guide. Hiding it does not change clipping, stored geometry or production export.
Bounding Box Editable	On \| Off	Controls whether the current view printing box can be selected, moved and resized. Its dimensions are normalized to the physical print ratio in both states. When enabled, the ruler is forced to pixels so it matches the X, Y, W and H inputs.
Bounding Box Inputs	On \| Off	Shows X, Y, width and height inputs while the editable box is selected. All four values use whole canvas pixels.
Bounding Box Inputs Background, Bounding Box Inputs Text	Color picker, including transparency	Bounding-box input panel background and text.
Bounding Box Inputs Field Background, Bounding Box Inputs Border, Bounding Box Inputs Border Focus	Color picker, including transparency	Bounding-box field background, normal border and focused border.
Toggle Snap To Center	On \| Off	Initial global center-snapping state. The action bar toggle can change it on the frontend.
Snap Color	Color picker, including transparency	Vertical and horizontal snap-guide color.
Snap Threshold	Finite number ≥ 0 (canvas pixels)	Distance from center at which objects and editable bounds snap.

Supported Bounding Box Mode values

Value	Behavior
None	No boundary restriction or clipping is applied. The object can be moved and rendered anywhere on the canvas.
Inside	Uses the current view's rectangular printing box as a movement boundary and keeps the object's transformed bounds inside it. Content is not masked.
Clipping	Uses the current view's rectangular printing box as a clipping area. Parts of the object extending outside the box are hidden.
An element title, such as `Bounding Box` or `Overlay`	Finds that element in the active view and uses its visible SVG shape or PNG alpha as the clipping mask. Title matching is case-insensitive. If no matching element exists in a view, no element-based mask can be applied there.

Guide precedence: when the active view has a printing box, the red dotted guide always represents that rectangle. An object-title mode can still use an SVG shape or PNG alpha as the actual clipping mask, but it does not replace the visual printing-box guide. Without a printing box, the guide falls back to the selected object's applicable bounds.

Fallback: an empty or invalid mode falls back to Clipping. A valid layer-title mode is applied only while that layer exists in the active view.

Keyboard settings

Products Manager > Edit Product > General > Keyboard

Enable keyboard controls and configure movement, rotation and scaling increments.

Backend field	Available values	Description
Add Keyboard Support	On \| Off	Enables editor shortcuts. Transform shortcuts are ignored when no editable object is selected.
Keyboard Move Nudge Amount	Finite number ≥ 0 (pixels)	Arrow-key movement. The misspelled key is retained for compatibility.
Keyboard Large Move Nudge Amount	Finite number ≥ 0 (pixels)	Shift + Arrow movement.
Keyboard Rotate Amount	Finite number ≥ 0 (degrees)	Alt + Left/Right rotation step.
Keyboard Large Rotate Amount	Finite number ≥ 0 (degrees)	Shift + Alt + Left/Right rotation step.
Keyboard Scale Amount	Finite number ≥ 0, typically `0.001 to 0.1`	Normal keyboard scale increment.
Keyboard Large Scale Amount	Finite number ≥ 0, typically `0.01 to 1`	Large keyboard scale increment.

Loader and fonts

Products Manager > Edit Product > General > Loader and Fonts

Customize the loading screen and define the system, web and custom fonts available for text.

Backend field	Available values	Description
Text	String, including an empty string	Text shown while product assets and fonts load.
Background, Icon Background, Icon	Color picker, including transparency	Loader overlay, icon background and icon color.
Default Font	Font-family string matching a configured or installed font	Default family used when a text item does not specify another font.
Available Fonts	Managed system, Google and custom font lists	Fonts shown in the text toolbar. Supports system fonts, CSS URLs and custom font files with multiple weights/styles.

WordPress font workflow: enter common operating-system fonts under System Fonts, select hosted families under Google Webfonts, and upload site-specific files through the Custom Fonts Manager. The plugin builds the frontend font list automatically.

Font loading: configured web and custom fonts are prepared before editing so each dropdown item can be previewed in its actual family. Keep the list intentional; hundreds of remote fonts will increase startup time.

Dialog settings

Products Manager > Edit Product > General > Dialog

Customize confirmation, error and information dialogs, including their content, colors and buttons.

Backend field	Available values	Description
Ok	Non-empty string	Default acknowledgement button label.
Overlay, Background, Text	Color picker, including transparency	Full overlay, dialog panel and content text colors.
Primary Button Colors	Normal and hover colors: `#hex` \| `rgb(a)` \| `hsl(a)` \| named \| `transparent`	Primary dialog button states.
Close Icon Colors	Normal and hover colors: `#hex` \| `rgb(a)` \| `hsl(a)` \| named \| `transparent`	Close-icon states.
Delete Confirmation	Show or hide, message and button label	Delete confirmation visibility, message and button label.
Reset Confirmation	Show or hide, message and button label	Object/product reset confirmation visibility, message and button label.
Info	Maximum width and custom HTML fields	Custom help/info window. HTML, links, images and structured shortcut lists are accepted.

Interface tab

Builds the visible customer interface and controls the order, labels, colors and behavior of its bars, windows and tools.

Action bar

Products Manager > Edit Product > Interface > Action Bar

The composer divides the action bar into equal Left, Center and Right lists. Drag actions to arrange them, and remove an action when it should not appear.

Backend field	Available values	Description
Navigation	Sortable Left, Center and Right action lists	Drag actions between the three areas and arrange them in the required display order.
Background	Color picker, including transparency	Action bar background.
Icon, Icon Hover, Icon Disabled	Color picker, including transparency	Normal, hover and disabled button colors.
Background, Text	Color picker, including transparency	Document-level tooltip colors.
Left List, Right List	On \| Off	Forces a File/More dropdown. Even when false, a side automatically becomes a list if its buttons do not fit.
Leftlist Label, Rightlist Label	String, including an empty string	Labels next to the left menu and right more icons.
Left List Background, Right List Background	Color picker, including transparency	Dropdown window backgrounds.
Left List Icon, Left List Icon Hover, Right List Icon, Right List Icon Hover	Color picker, including transparency	Dropdown trigger and item colors.
Left List Border, Right List Border	Color picker, including transparency	Dropdown borders.

Available actions: Save Design, Saved Designs, Preview, Print, Download, Production Export, Undo, Redo, Ruler, Zoom, Fullscreen, Snap To Center, Previous View, Next View, Reset, Information, Export and Total. Fullscreen expands the complete designer to the browser viewport and returns to the configured size when fullscreen closes.

Views

Products Manager > Edit Product > Interface > Views

Configure the navigation used to switch between product views, including its position, colors and thumbnail grid.

Backend field	Available values	Description
Position	Top Left \| Top Center \| Top Right \| Bottom Left \| Bottom Center \| Bottom Right	View navigation position.
Background, Border	Color picker, including transparency	Navigation background and button border.
Icon, Icon Hover	Color picker, including transparency	Normal and hover icon colors.
Maximum Width, Height	Finite number ≥ 0 (CSS pixels)	Navigation maximum width and height.
Bottom Gap, Top Gap, Side Gap	Finite number ≥ 0 (CSS pixels)	Navigation offsets.
Background, Item Background, Item Background Hover	Color picker, including transparency	Full view-grid window and thumbnail colors.

The view navigation is automatically hidden when the selected product contains only one view.

Modules

Products Manager > Edit Product > Interface > Modules

Configure the module bar, its position and the tools customers can open while customizing a product.

Backend field	Available values	Description
Module Buttons	Sortable list of available modules	Add Products, Saved Designs, Layers, Text, Images, Shapes or Artwork Library, then drag them into the required order.
Position	Left \| Bottom	Desktop module-bar position.
Allow Toggle	On \| Off	Allows the active module button to show/hide its content window.
Toggled	On \| Off	Initial module content visibility.
Background, Border, Panel Background	Color picker, including transparency	Bar, shared border and content panel backgrounds.
Icon, Icon Hover	Color picker, including transparency	Module icon and label normal/hover colors.
Button Background, Button Background Hover	Color picker, including transparency	Module button normal/hover backgrounds.

Products and saved designs

Products Manager > Edit Product > Interface > Products and Saved Designs

Configure product selection and saved-design management, including thumbnails, titles and removal controls.

Logged-in customer designs are stored in the plugin database and loaded securely for their owner.

Backend field	Available values	Description
Background, Item Background, Item Background Hover	Color picker, including transparency	Products window and preview-card colors.
Title Color, Title Background	Color picker, including transparency	Product title text and strip background.
Title Size	Finite number ≥ 0 (CSS pixels)	Product-title font size.
Price Color, Price Background	Color picker, including transparency	Optional price badge colors.
Button Background, Button Background Hover, Button Text, Button Text Hover	Color picker, including transparency	Shared product action button states.
Close, Close Hover	Color picker, including transparency	Optional item close button states.
Saved Design Records	Managed automatically	WordPress loads the current logged-in customer's saved designs. No file path needs to be entered.
Input Placeholder, Button Text	Strings, including an empty placeholder	Optional title placeholder and Save Design label.
Can Save	Managed automatically	Saving is available to logged-in customers. Logged-out visitors see the configured login message.
Cooldown Seconds	Integer ≥ 0	Seconds before another design can be saved. The default is 10.
Login Text, Disabled Text	Text	Messages shown when login is required or while the save cooldown is active. The remaining seconds are inserted automatically.
Removable	On \| Off	Global fallback for close and delete buttons; individual saved items can override it.
Background, Item Background, Item Background Hover	Color picker, including transparency	Window and thumbnail states.
Button Background, Button Background Hover, Button Text, Button Text Hover	Color picker, including transparency	Save button states.
Close, Close Hover	Color picker, including transparency	Delete icon states.
Title Color, Title Background	Color picker, including transparency	Multiline title/date overlay colors.
Title Size	Finite number ≥ 0 (CSS pixels)	Saved-design title/date font size.
Input Background, Input Text, Input Border, Input Border Focus	Color picker, including transparency	Saved-design title input states.

Layers

Products Manager > Edit Product > Interface > Layers

Configure the layers panel, layer editing and the visual states of layer items and controls.

Backend field	Available values	Description
Background	Color picker, including transparency	Layers window and text-editor background.
Can Edit	On \| Off	Allows layer names to be edited on double click. Text-layer content remains synchronized with canvas text.
Item Background, Item Background Hover	Color picker, including transparency	Layer normal and selected/hover backgrounds.
Icon, Icon Hover	Color picker, including transparency	Layer action normal and hover colors.

Canvas

Products Manager > Edit Product > Interface > Canvas

Configure the canvas appearance, object controls, dimensions, zoom behavior and ruler styling.

Backend field	Available values	Description
Show Dimensions	On \| Off	Shows rounded selected-object dimensions without covering canvas controls.
Dimensions Background, Dimensions Text	Color picker, including transparency	Dimension badge background and text colors.
Object Background, Background	Color picker, including transparency	Selected-object control accent and canvas background.
Icon, Icon Hover, Icon Background, Icon Background Hover	Color picker, including transparency	Canvas move/rotate/resize/delete control states.
Zoom Levels	Selectable list of positive zoom values	Add and arrange the zoom levels available to the viewer. The normal 100% level is included automatically.
Zoom Step	Finite number ≥ 0, typically `0.01 to 0.25`	Zoom slider and Space + wheel increment.
Toggle Ruler	On \| Off	Shows the rulers when the designer starts. The Ruler action can still toggle them.
Ruler Background, Ruler Text, Ruler Tick, Ruler Tick Major, Ruler Border	Color picker, including transparency	Ruler panel, labels, minor/major ticks and border colors.

Object toolbar

Products Manager > Edit Product > Interface > Object Toolbar

Configure the actions and editing panels shown for selected objects, including colors, transforms and text tools.

Backend field	Available values	Description
Buttons	Sortable selected controls	Choose and arrange the main Color, Transform, Text, Curved Text, Align, Reset, Duplicate and Remove controls.
Align	Sortable alignment controls	Choose and arrange Top, Middle, Bottom, Left, Center and Right.
Curve	Sortable curved-text controls	Choose the curved-text modes and adjustment controls available to customers.
Color	Sortable color and text controls	Choose the fill, transparency, shadow, stroke and typography controls available to customers.
Transform	Sortable transform controls	Choose the scale, rotate, skew and flip controls available to customers.
Object Toolbar Mode	Floating \| Fixed	Choose a floating toolbar near the selected object or a fixed toolbar integrated into the modules panel.
Toggled	On \| Off	In Fixed mode, opens the first available editing panel when an object is selected. The saved Buttons order determines which compatible panel opens first.
Maximum Width, Text Max Width	Finite number ≥ 0 (CSS pixels)	Normal and text-object toolbar maximum widths.
Max Scale	Finite number ≥ 0	Maximum scale value available in the toolbar.
Max Skew	Finite number from `0` to `89` (degrees)	Positive and negative skew limit.
Default Radius	Number from `0` to `300`	Default curved-text radius.
Background, Icon, Icon Hover	Color picker, including transparency	Toolbar window and primary icon colors.
Slider Background, Slider Border, Slider Fill, Slider Handle, Slider Input, Slider Handle Border	Color picker, including transparency	All object-toolbar sliders and inputs.
Back	String, including an empty string	Back button label in floating subwindows.
Secondary Background, Secondary Background Hover, Secondary Icon, Secondary Icon Hover, Secondary Border	Color picker, including transparency	Align, format, flip and other secondary button states.

Permission-driven UI: toolbar buttons and canvas controls are hidden automatically when the selected element does not allow the related action. Disabling resize hides scale controls, while disabling rotation hides rotation controls.

Content tab

Creates the reusable text, image, shape and artwork libraries available to customers for this product.

Add Text

Products Manager > Edit Product > Content > Add Text

Configure text templates, default typography, object permissions, pricing and module appearance.

Create, edit and sort text templates directly in Content > Add Text. They are stored with the selected product.

Backend field	Available values	Description
Text Templates	Visual template manager	Create, edit, delete and sort reusable text items stored with this product.
Button Text	Non-empty string	Add Text button label.
Price	Number ≥ 0 \| currency-free numeric string	Default price inherited by text templates that have Use Default Price enabled.
Template Price	Use Default Price \| explicit number ≥ 0	Use Default Price inherits the global Add Text price. Disable it to set an exact template price; `0` makes that template free.
Removable	On \| Off	Default removal permission for text templates.
Color Picker	On \| Off	Allows the custom color picker. When false, preset swatches remain available.
Colors	Sortable color-swatch list, or no swatches	Default fill swatches for newly added text. Colors saved with an individual template override this default palette.
Can Duplicate, Can Reset, Can Move, Can Rotate, Can Resize, Can Delete, Can Reorder	Each permission: On \| Off	Default permissions for text created from the module.
Font	A font available in the product Fonts list	Default text family.
Font Weight	`'normal'` \| `'bold'` \| numeric weight such as `400`, `700`, `900`	Text template font weight. For custom fonts, select a weight available for that uploaded font family.
Size	Finite number ≥ 0	Default font size.
Line Height	Finite number ≥ 0	Default line-height multiplier, for example `1.2`.
Letter	Finite number	Default Fabric character spacing; negative, zero and positive values are accepted.
Curve Type	Normal \| Curved Up \| Curved Down \| Oblique \| Bridge	Default text geometry.
Radius	Number from `0` to `300`	Default curved-up/down radius.
Curve	Number from `-100` to `100`	Default oblique/bridge deformation.
Offset	Number from `0` to `100`	Default internal oblique/bridge offset.
Fill	Color picker, including transparency \| no color	Default text fill; an empty string requests no fill.
Stroke	Color picker, including transparency \| no color	Default text stroke.
Stroke Width	Finite number ≥ 0	Default stroke width; `0` disables the stroke.
Background, Price Color, Price Background	Color picker, including transparency	Window and price badge.
Button Background, Button Background Hover, Button Text, Button Text Hover	Color picker, including transparency	Add Text button states.
Input Background, Input Text, Input Border	Color picker, including transparency	Live text-area styling.
Close, Close Hover, Item Background, Item Background Hover	Color picker, including transparency	Template close icon and thumbnail states.

Add Images

Products Manager > Edit Product > Content > Add Images

Configure the image library and upload area, including defaults, permissions, pricing and visual states.

Image templates are created in Content > Add Images and embedded in the saved product settings. Media is selected from the WordPress Media Library.

Backend field	Available values	Description
Image Templates	Visual template manager	Create, edit, delete and sort reusable media items stored with this product.
Button Text	Non-empty string	Browse button label.
Price	Number ≥ 0 \| currency-free numeric string	Default price inherited by image templates that have Use Default Price enabled.
Image Price	Use Default Price \| explicit number ≥ 0	Use Default Price inherits the global Add Images price. Disable it to set an exact image price; `0` makes that image free.
Removable	On \| Off	Default removal permission for image-library entries.
Color Picker	On \| Off	Allows the custom color picker. When false, preset swatches remain available.
Colors	Sortable color-swatch list, or no swatches	Default tint/fill swatches for added PNG, JPG and SVG media. Colors saved with an individual image override this default palette.
Can Duplicate, Can Reset, Can Move, Can Rotate, Can Resize, Can Delete, Can Reorder	Each permission: On \| Off	Default permissions for added media.
Background, Drop Background, Drop Border, Drop Color	Color picker, including transparency	Window, drop-area background, border and text colors.
Drop Text	String, including an empty string	Text displayed inside the fixed drag/drop area.
Price Color, Price Background	Color picker, including transparency	Price badge.
Button Background, Button Background Hover, Button Text, Button Text Hover	Color picker, including transparency	Browse button states.
Close, Close Hover	Color picker, including transparency	Removable library-item close icon.
Item Background, Item Background Hover	Color picker, including transparency	Thumbnail holder and animated overlay.

Add Shapes

Products Manager > Edit Product > Content > Add Shapes

Configure the shape library, default colors, permissions, pricing and thumbnail appearance.

Shape templates are created in Content > Add Shapes and embedded in the saved product settings, including their SVG data, prices, colors and permissions.

Backend field	Available values	Description
Shape Templates	Visual template manager	Create, edit, delete and sort reusable shapes stored with this product.
Price	Number ≥ 0 \| currency-free numeric string	Default price inherited by shape templates that have Use Default Price enabled.
Shape Price	Use Default Price \| explicit number ≥ 0	Use Default Price inherits the global Add Shapes price. Disable it to set an exact shape price; `0` makes that shape free.
Removable	On \| Off	Default removal permission for shape-library entries.
Color Picker	On \| Off	Allows the custom color picker. When false, preset swatches remain available.
Fill	Color picker, including transparency \| no color	Default canvas shape fill.
Colors	Sortable color-swatch list, or no swatches	Default fill swatches for added shapes. Colors saved with an individual shape override this default palette.
Can Duplicate, Can Reset, Can Move, Can Rotate, Can Resize, Can Delete, Can Reorder	Each permission: On \| Off	Default shape permissions.
Background, Item Fill, Item Background, Item Background Hover	Color picker, including transparency	Window, preview-shape fill and thumbnail states.
Price Color, Price Background, Close, Close Hover	Color picker, including transparency	Price and removable button states.

Artwork Library

Products Manager > Edit Product > Content > Artwork Library

Configure categorized artwork, search behavior, object defaults, pricing and library appearance.

Artwork categories and items are managed in Content > Artwork Library and embedded in the saved product settings. Category order, item order and category membership are preserved.

Backend field	Available values	Description
Artwork Items	Visual category manager	Create, edit, delete and sort artwork and its categories inside this product.
Search Placeholder, All Categories Label, Not Found Text	Strings, including empty strings	Search and category UI labels.
Price	Number ≥ 0 \| currency-free numeric string	Default price inherited by artwork items that have Use Default Price enabled.
Artwork Price	Use Default Price \| explicit number ≥ 0	Use Default Price inherits the global Artwork Library price. Disable it to set an exact artwork price; `0` makes that artwork free.
Removable	On \| Off	Default removal permission for artwork entries.
Color Picker	On \| Off	Allows the custom color picker. When false, preset swatches remain available.
Colors	Sortable color-swatch list, or no swatches	Default tint/fill swatches for added artwork. Colors saved with an individual artwork item override this default palette.
Can Duplicate, Can Reset, Can Move, Can Rotate, Can Resize, Can Delete, Can Reorder	Each permission: On \| Off	Default artwork permissions.
Background, Item Background, Item Background Hover	Color picker, including transparency	Window and artwork-card colors.
Price Color, Price Background, Close, Close Hover	Color picker, including transparency	Price and removal button states.
Search Background, Search Text, Search Border, Search Border Focus	Color picker, including transparency	Category search field.
Category Background, Category Background Hover, Category Text, Category Text Hover	Color picker, including transparency	Category buttons.

Production tab

Configures preview downloads, file formats and the full-browser preview. Physical print sizes and crops are configured in each view.

Download and preview

Products Manager > Edit Product > Production > Download and Preview

Configure how customers preview the product and download the current view or all available views.

Backend field	Available values	Description
Title, Text	Strings, including an empty string	Download dialog title and introduction.
Scope	All Views \| Current View	Initially selected view scope.
All, Current	Non-empty strings	Scope button labels.
Maximum Width	Finite number ≥ 0 (CSS pixels)	Maximum download dialog width.
Background, Background Hover	Color picker, including transparency	Format/scope button normal and hover backgrounds.
Formats	Sortable PNG, JPG, SVG and PDF list	Add, remove and reorder the formats offered in the customer download window.
Overlay	Color picker, including transparency	Full-browser preview overlay.
Title, Item Text	Color picker, including transparency	Preview title and view label colors.
Item Background	Color picker, including transparency	View preview card background.
Close, Close Hover, Scrollbar	Color picker, including transparency	Close icon and responsive scrollbar colors.

Working with Colors

Manage interface colors, product-layer fills and customer palettes visually in Products Manager. The WordPress color pickers support solid colors and transparency. Save the product after changing product settings and save the view after changing a layer.

No code required: every option in this section is configured through Products Manager fields, color pickers, toggles and sortable palettes.

Interface theme

Products Manager > Edit Product > General, Interface, Content or Production

Color controls are grouped with the interface area they affect. Update the related normal, hover, selected and disabled states together to create a consistent theme.

Action Bar and ModulesInterface tab

Configure backgrounds, icons, labels, hover states, borders and selected controls.

Object Toolbar and CanvasInterface tab

Configure toolbar actions, sliders, selected-object controls, ruler colors and the canvas background.

Content WindowsContent tab

Configure Text, Images, Shapes and Artwork window backgrounds, item states, prices and removal buttons.

Dialogs and PreviewGeneral and Production tabs

Configure overlays, buttons, text, close controls, preview cards and responsive scrollbars.

Complete theme changes: changing one background is not enough. Update hover icons, selected states, slider fills, focused input borders, canvas controls and dialog buttons to match the new accent.

Content palettes

Products Manager > Edit Product > Content

Open Add Text, Add Images, Add Shapes or Artwork Library.
Use Add Color to create preset swatches and drag them into the required order.
Enable Color Picker when customers may choose colors outside the presets.
Edit an individual template or library item when it needs its own palette.
Click Update Product to save the library settings.

The first palette color is not applied automatically. Presets are choices for the customer, while the saved fill or tint remains active until another color is selected.

SVG and image colors

SVG: editable fills stay sharp at every size. Multi-path files can retain their original colors while offering additional choices.
White PNG: works as an accurate tint mask and displays the selected color cleanly.
Shaded PNG: tinting can preserve dark shading and texture, but the result depends on the source pixels.
JPG: use mainly for photographs because recoloring affects the complete rectangular image.

Upload source assets through the WordPress Media Library. Color selections are stored with the design element; the original media file is not modified.

Color precedence

Priority	Source	Behavior
1	Saved view layer	The color stored on the current product-view element is used first.
2	Template or library item	An item-specific fill, tint or palette overrides its module default.
3	Content module	The Add Text, Images, Shapes or Artwork defaults apply to new items.
4	Product fallback	The general product setting is used when no more specific value exists.

Content-template defaults affect newly added customer items. Existing layers in a saved view keep their own values. Select a layer in View Designer, change its color settings and click Save View when that layer itself must be updated.

Frontend Placement

Assignment metabox

Supported posts and pages receive an Iza Product Designer metabox. Choose Product or Category, drag one or more selections into the active list and save the post. Non-WooCommerce assignments are appended automatically unless the same page contains an Iza shortcode.

WooCommerce products use a dedicated Enable Product Designer assignment and accept one Iza product. Variation assignments can override it. The shortcode generator is hidden for WooCommerce products because automatic product placement is the intended flow.

Shortcode

Use readable product or category titles, separated with | when several are needed:

[iza_product_designer products="Shirt"]
[iza_product_designer products="Shirt | Cap"]
[iza_product_designer categories="Apparel | Mugs"]

The designer is rendered exactly where the shortcode block appears. When a shortcode exists on a non-WooCommerce page, it takes precedence over automatic metabox output so the designer is not duplicated at the beginning or end of the content.

Multiple instances

Multiple shortcode blocks create independent holders and instances. Multiple assigned categories also initialize independently. Within one category instance, products share the Products module but each product loads its own views, libraries and UI configuration.

Performance: several live canvases, large raster images and many webfonts increase memory and startup cost. Prefer one designer per page unless the layout genuinely needs several independent editors.

Automatic frontend loading

The plugin creates every frontend designer automatically after WordPress renders an assignment or shortcode. It prepares the product data, unique holder, media URLs, saved designs and WooCommerce integration before showing the editor.

Do not manually initialize another designer for the same holder. Use Products Manager, the assignment metabox or a shortcode to control what appears on the page.

Responsive layout

The designer measures its actual WordPress content container as well as the browser viewport. At compact sizes, module windows use the available editor area and selected-object tools move to a touch-friendly bottom layout.

Set Maximum Width, Resize Width, Maximum Height and Minimum Height in the product's General tab.
Use percentage dimensions when a lightbox should fill the available browser space.
Choose Left or Bottom for the Modules position. Compact mode is selected automatically only when both the viewport and designer are small enough.
Each view keeps its own canvas dimensions, while the outer designer scales to the page or WooCommerce product layout.
Test the final page with the active theme because columns, galleries and page builders determine the real container width.

WooCommerce

Iza Product Designer works with the normal WooCommerce product, variation, cart, checkout, payment, stock and order flow. WooCommerce remains responsible for selling the item, while Iza Product Designer stores the customer customization and any configured design surcharge.

WooCommerce setup: assign the designer from the WooCommerce product editor, then configure its storefront behavior from the selected Iza product.

WooCommerce product editorEnable the designer and choose the Iza product attached to the purchasable item. Iza product WooCommerce tabChoose placement, lightbox behavior, pricing, cart behavior and the customized thumbnail.

Product assignment

WooCommerce > Products > Edit Product > Iza Product Designer

Enable Product Designer, then choose one Iza product for the WooCommerce product. The selected Iza product supplies the views, content libraries, interface settings and production data shown to the customer.

Enable Product DesignerOn or Off

Controls whether the designer appears on this WooCommerce product.

Assigned Iza ProductOne saved Iza product

Connects the WooCommerce item to the product configuration created in Products Manager.

Why only one product: a WooCommerce product has one active price, stock state and order identity. Use WooCommerce variations when different purchasable choices need different Iza products.

Variations

WooCommerce > Products > Edit Variable Product > Variations

Each variation can use the product assigned to its parent or select another Iza product. The frontend switches the designer after WooCommerce resolves the selected variation and keeps a separate temporary design state for every variation.

Use Assigned ProductDefault choice

Uses the Iza product selected in the main product assignment.

Select Another Iza ProductVariation override

Loads a different designer product only when that variation is selected.

No Default VariationCustomer selection required

The designer waits and shows the choose-options message until WooCommerce resolves a valid variation.

Variation AvailabilityWooCommerce controlled

The variation must be enabled, purchasable and available according to its WooCommerce stock settings.

Placement and lightbox

Iza Product Designer > Products Manager > Edit Product > WooCommerce

These controls determine where the designer appears on a WooCommerce product page. They do not change shortcode placement on normal WordPress pages.

Product-page placement

Product Designer PositionReplace Product Image | Replace Product Image Full Width | After Product Title | After Summary

Selects the WooCommerce area where the inline designer is inserted.

Hide Product ImageOn or Off

Hides the normal WooCommerce gallery when the designer is placed elsewhere on the product page.

Full Width SummaryOn or Off

Lets the remaining product summary and designer use the width released by the hidden gallery.

WooCommerce lightbox

Iza Product Designer > Products Manager > Edit Product > WooCommerce > Lightbox

Enable WooCommerce LightboxOn or Off

Shows a Customize button and opens the existing designer in a full-browser overlay.

Customize Button PositionAfter Short Description | Before Add to Cart | After Add to Cart

Places the Customize button in the selected WooCommerce product-summary location.

Update Product ImageOn or Off

Updates the visible WooCommerce product image with the customized preview when the customer finishes.

Add to Cart on DoneOn or Off

Uses the normal WooCommerce add-to-cart action after the design has been prepared.

Closing the lightbox only hides it, so reopening it preserves the current edits. WooCommerce lightbox settings override the general display mode only on WooCommerce product pages.

Pricing

Iza Product Designer > Products Manager > Edit Product > WooCommerce

The WooCommerce product or selected variation supplies the base price and store currency. Prices assigned to text, images, shapes and artwork are added as design surcharges and the displayed WooCommerce price updates when the design changes.

Disable Designer Price CalculationOn or Off

When enabled, content surcharges are ignored and WooCommerce keeps its original product or variation price.

Library Item PricePositive number or 0

A positive item price overrides its module price. A value of 0 inherits the module fallback price.

Price entry: enter numbers without a currency symbol. WooCommerce supplies the active store currency automatically.

Cart and add-to-cart behavior

Iza Product Designer > Products Manager > Edit Product > WooCommerce

After Add to CartKeep Customized Product | Restore Default Product

Choose whether the browser keeps the current customized state or reloads the original saved product after WooCommerce completes add to cart.

Customized Product ThumbnailOn or Off

Shows a generated preview of the customer design as the cart item thumbnail.

Customer-uploaded images are saved to WordPress before the cart item is accepted, so later order viewing does not depend on temporary browser URLs. The plugin does not force AJAX, change redirects or replace the theme's normal purchasing flow.

Saved designs

Iza Product Designer > Products Manager > Edit Product > Content > Saved Designs

Saved designs use the WordPress database and are available only to logged-in customers. A successful save starts a ten-second countdown that prevents repeated submissions. Each record belongs to its WordPress user and includes a thumbnail and the complete editable product state.

WooCommerce Orders

Every customized cart item carries its own design snapshot into the WooCommerce order. Future changes made in Products Manager do not alter an existing customer's ordered design.

Design capture

Before WooCommerce creates the cart item, Iza Product Designer prepares the current views, layers, selected product or variation, persistent uploaded images and preview information. WordPress validates this information and copies it into the final order item during checkout.

Order independence: the saved snapshot belongs to that order item. Editing or deleting the catalog product later does not rewrite the stored order design.

View customization

WooCommerce > Orders > Open an order

Find the customized product in the order items and click View Customization beneath that product. The full-browser window is titled Ordered Design and lets administrators inspect or adjust the saved views and layers without changing the original catalog product.

Orders created without a captured design cannot reconstruct one later and therefore do not show the View Customization button.

Order exports

Download PreviewCustomer-facing mockup

Downloads the normal rendered product preview and respects each layer's Exclude From Export setting.

Download ProductionPrint-ready output

Crops to the printing box, applies physical size, DPI and bleed, and omits layers marked Exclude From Production Export.

Export ProductEditable ZIP package

Exports the ordered design snapshot and its referenced assets as a portable Iza product.

Mockup layers: product bases, shading and overlays normally remain visible in previews but should be excluded from production output so print files contain only printable customer content.

Editable Printing Box

The printing box marks the exact part of a product view that can be customized and sent to production. Create, size and position it visually in the View Designer.

Where to configure it: open Iza Product Designer > Products Manager, choose a product, open its Views section, then click Design on the required view.

1. Set the print and canvas sizes

Products Manager > Product > Views > Design > View Options

Open View Options before positioning the box. These values define the real production size and the working canvas used by the editor.

Print SizePreset size or Set Custom Size

Select a standard paper or card size, or enter a custom physical size.

Print Width and Print HeightMillimeters

Enter the real finished size of the printable area, not the complete physical product.

DPIWhole number, including 0

Controls the raster resolution used by production downloads.

BleedMillimeters

Adds extra printable space around every side of the production crop.

Canvas Width and Canvas HeightPixels

Define the editor workspace used to position the product artwork and printing box.

Auto-Calculate SizeOptional helper

Creates a canvas with the selected print ratio and makes the printing box cover that canvas.

Start with the real print area: obtain the printable width and height from the printer, manufacturer or production template. Do not use the complete product dimensions unless the entire surface is printable.

2. Enable visual editing

View Designer > Canvas header > Edit Printing Box

Click Edit Printing Box in the canvas header. The printing box becomes selectable and its position and size fields appear. While editing is active, normal product layers cannot be selected accidentally.

Active editing stateCrop Off icon

The printing box remains visible and receives canvas interaction.

Inactive editing stateCrop icon

The box returns to its normal guide state and product layers can be selected again.

Position and size fieldsX, Y, Width and Height in pixels

Use whole canvas pixels for precise placement and sizing.

Ruler behaviorPixels while editing

The ruler temporarily switches to pixels so it matches the printing-box controls.

3. Position, resize and save

Select: click the printing box while Edit Printing Box is active.
Move: drag it, change X and Y, or use the Arrow keys. Hold Shift for the configured larger step.
Resize: drag a resize control or change Width and Height. The box keeps the physical print-size ratio automatically.
Center: enable Snap To Center when the box should align with the horizontal or vertical canvas center.
Recover: if the box is released completely outside the canvas, it returns to the canvas center so it cannot be lost.
Finish: turn off Edit Printing Box, click Save View, then update the product if the Update Product button is active.

Ratio protection: the box width and height remain proportional to the Print Width and Print Height entered in View Options. Changing one visual dimension adjusts the other, preventing a stretched production crop.

Two different controls: Bounding Box Mode controls how customer-added objects are constrained or clipped. Edit Printing Box controls the rectangular production area for the current product view.

Production Export

Production Export creates files for printing or manufacturing. It uses the printing box, physical print size, DPI and bleed saved in View Options, then renders only the layers intended for production.

No calculations are required: enter the real print dimensions in View Options and position the printing box visually. Iza Product Designer calculates the output pixels automatically.

Prepare a production view

Products Manager > Product > Views > Design > View Options

Choose the physical print size: select a preset or enter the real Print Width and Print Height supplied by the printer.
Set the canvas: enter Canvas Width and Canvas Height, or use Auto-Calculate Size as a starting point.
Set DPI: use the resolution required by the print provider. A common high-quality value is 300.
Set bleed: enter the extra millimeters requested around each edge, or use 0 when no bleed is required.
Position the printing box: use Edit Printing Box in the View Designer and align it with the exact customizable area.
Save the view: verify the crop visually, then save the view and update the product.

How the generated output is sized

Printing BoxCanvas pixels

Defines the rectangular source area taken from the editor.

Print Width and HeightMillimeters

Define the real finished size represented by that printing box.

DPIRaster resolution

Determines how many pixels are generated for the physical print size.

DPI set to 0Editor-pixel output

Exports using the printing-box pixel dimensions without physical DPI scaling.

The editor keeps the printing-box shape proportional to the physical Print Width and Print Height. The displayed ruler unit can change without changing the real production dimensions.

Printing-box crop and bleed

Bleed expands the production crop beyond the printing box by the configured physical amount on every side. It does not resize or stretch the artwork inside the trim area.

No Bleed0 mm

The production crop follows the printing box exactly.

Bleed EnabledPrinter-supplied millimeters

The crop expands evenly around the printing box.

Transparent AreasPNG output

Areas outside irregular product artwork remain transparent unless an exportable background layer is present.

White BackgroundJPG and PDF output

Formats without the same transparent-canvas behavior use white for empty areas.

Mockup layers: product bases, shading and overlays can remain visible in previews while Exclude From Production Export keeps them out of print-ready files.

Download production files

Customers can use the Production Export action when it is included in the action bar. Administrators can open a customized WooCommerce order, click View Customization and use Download Production.

PNGTransparent raster output

Best when transparent pixels must be preserved.

JPGCompressed raster output

Best for opaque artwork when a smaller file is preferred.

PDFPrint document

Combines the generated production views into a PDF document.

Multiple ViewsZIP or multi-page PDF

Raster files are packaged together, while PDF combines the selected views.

Production Export and Product Export are different: Production Export creates print-ready files. Export Product creates an editable ZIP for backup, transfer or reuse.

Production validation checklist

Confirm that Print Width and Print Height match the printer's real customizable area.
Confirm that the printing box covers the intended product area and keeps the same shape as the physical print size.
Use source images large enough for the selected print size and DPI.
Confirm the required bleed with the print provider.
Mark bases, shadows and overlays as excluded from production output when they are only mockup layers.
Download a production test and inspect the crop, transparency, dimensions and view order before publishing.

Product Data and Portability

Products are created and edited visually in Products Manager. WordPress stores the complete configuration and rebuilds it automatically when a product is displayed, duplicated, exported or imported.

What WordPress stores

Product InformationTitle, thumbnail, price and starting view

Defines how the product is identified and initially opened.

ViewsCanvas, print settings and thumbnail

Stores every product side or variation of the design surface.

LayersImages, text and editable properties

Stores the objects created in each View Designer.

Content LibrariesText, images, shapes and artwork

Stores the reusable items offered to customers.

Interface SettingsGeneral, Interface, Content and Production

Stores the product-specific customer interface and behavior.

Production InformationPrint size, DPI, bleed and printing box

Stores the data required to generate production files.

Product ZIP import and export

Iza Product Designer > Products Manager

Use Export Product on a product thumbnail to create a portable ZIP containing the saved configuration and referenced assets. Use Import Product to create a new product from a compatible ZIP.

Export ProductBackup or transfer

Collects the product configuration and only the media files referenced by that product.

Import ProductSelect a compatible ZIP

Validates the archive, extracts supported assets, rewrites their URLs and adds the imported product to Products Manager.

Choose YesAdd to Media Library

Registers PNG, JPG, JPEG, GIF, WebP and SVG assets as WordPress attachments.

Choose NoUse plugin uploads only

Stores the assets permanently without adding entries to the WordPress Media Library.

Existing MediaReused automatically

Matching Media Library attachments are detected by file content and reused instead of duplicated.

Save the ProductClick Update

The imported product remains an unsaved Products Manager change until Update is clicked.

Starter TemplatesCreate from an included product

Copies a bundled product into WordPress so it can be edited independently.

Views and layers

Use the Views area to add, edit, duplicate, delete and reorder product views. Open Design to add layers, arrange their order and configure each element through the Selected Element panel.

Layer titles, visibility, lock state, permissions, pricing, colors, transforms, bounding behavior and export exclusions are stored when the view is saved.

Content libraries

Products Manager > Product > Content

Add Text, Add Images, Add Shapes and Artwork Library are managed inside the selected product. Each library supports its relevant thumbnails, colors, prices, permissions, removable state and sorting.

Price precedence: Use Default Price stores no item-specific price and inherits the section price. When it is disabled, the entered value takes precedence, including 0 for a free item. Items already added to a view keep the price captured when they were added.

Independent products: changing one product's content library does not change items already stored in another product.

Saved designs and ordered designs

Customer saved designs and WooCommerce ordered customizations store complete snapshots. They remain independent from later product edits, allowing an administrator to reopen the exact customer state that was saved or purchased.

WordPress Workflows

Preview download

The configured Download action renders the current view or all views as PNG, JPG, SVG or PDF. It is a visual/customer preview and can include the product mockup.

Product ZIP export

Use Export Product from Products Manager or the order viewer to create an editable ZIP containing the current product state and only its referenced assets.

Saved designs

Logged-in customers save designs to WordPress. Each database record contains its owner, title, timestamp, thumbnail and complete product snapshot.

Keyboard Shortcuts

Shortcut	Requirement	Action
Arrow keys	Movable object selected	Move by the configured normal movement step.
Shift + Arrow keys	Movable object selected	Large movement.
Arrow keys	Editable printing box selected	Move the printing box in whole-pixel steps.
Ctrl/Cmd + Arrow keys	Editable printing box selected	Resize by the configured normal movement step while preserving the physical print ratio. Up/Right enlarge; Down/Left shrink.
Ctrl/Cmd + Shift + Arrow keys	Editable printing box selected	Ratio-locked resize using the configured large movement step.
Alt + Left / Right	Rotatable object selected	Rotate by the normal configured step.
Shift + Alt + Left / Right	Rotatable object selected	Large rotation step.
Ctrl/Cmd + Up / Down	Resizable object selected	Uniform scale up/down.
Ctrl/Cmd + Left / Right	Resizable object selected	Scale X down/up.
Ctrl/Cmd + Shift + Up / Down	Resizable object selected	Scale Y up/down.
Delete / Backspace	Deletable object selected	Request object deletion.
Ctrl/Cmd + D	Duplicable object selected	Duplicate object.
Ctrl/Cmd + Z	History available	Undo.
Ctrl/Cmd + Y	Redo available	Redo.
Ctrl/Cmd + Shift + Z	Redo available	Redo.
Escape	Any editor mode	Close picker/toolbar mode and deselect the object.
Shift while rotating	Canvas rotate handle	Snap rotation in 90-degree increments.
Space + drag	Pointer inside editor and ruler visible	Temporarily disable object interaction and pan the zoomed canvas.
Space + mouse wheel	Pointer inside editor and ruler visible	Zoom the canvas.

Input safety: normal shortcuts do not take over typing in inputs, textareas or active canvas text editing. Space navigation is available only when the ruler is enabled.

WordPress Developer Hooks

Normal plugin setup does not require code. Developers can use the available WordPress filters when the font catalogs need to be extended before they reach Products Manager.

Font catalog filters

add_filter('fwdipd_google_webfonts', function($fonts){
    // Add or modify Google font definitions.
    return $fonts;
});

add_filter('fwdipd_custom_fonts', function($fonts){
    // Add or modify custom font-family definitions.
    return $fonts;
});

Use standard WordPress filter callbacks and return the updated font list. Product administrators can then select those fonts from the normal Fonts interface.

Storage and Security

Data locations

Products and CategoriesWordPress database

Stores product settings, views, layers, libraries and category assignments.

Page and Product AssignmentsWordPress content metadata

Connects saved Iza products to pages, posts and WooCommerce products.

Variation AssignmentsWooCommerce variation data

Stores the Iza product selected for each variation.

Saved DesignsPlugin database table

Stores each logged-in customer's private saved-design records.

Ordered DesignsWooCommerce order items

Stores the design snapshot attached to each customized purchase.

Media and FontsWordPress uploads

Stores imported assets, custom fonts, customer uploads and generated previews.

Localization

Administrator and integration strings are translation-ready through standard WordPress language files. Product-defined labels can be edited directly in each product's settings.

Security

Administrative changes require the appropriate WordPress capability and verified requests. Uploaded files are validated and normalized before they are stored. Saved designs are restricted to their owner, while WooCommerce order customizations are available only to administrators who can edit shop orders.

Troubleshooting

Problem	Check
Viewer is blank	Confirm the assigned product exists, contains a saved view, and that required media URLs load directly. Clear page/plugin/CDN caches.
Designer is absent on a WooCommerce product	Enable Product Designer, select one Iza product, verify variation assignment/default availability, and check the selected Product Designer Position.
Shortcode appears in the wrong place	Use a Shortcode block containing the shortcode itself. Its presence suppresses automatic non-Woo metabox placement on that page.
Only one of several instances appears	Use separate shortcode blocks and unique generated holders; avoid copying cached rendered HTML from another page.
HTTP font/image blocked on HTTPS	Set WordPress Address and Site Address to HTTPS, resave/reselect affected media, and clear caches containing old absolute URLs.
Uploaded image breaks in an order	Confirm WordPress uploads is writable and the prepare/upload request completes before add to cart. Order data must contain a persistent URL, never a browser-only `blob:` URL.
No View Customization button	The order item must come from a completed customized cart submission. Old or normal WooCommerce orders do not contain a recoverable design snapshot.
Production crop or aspect ratio is wrong	Confirm that the printing box has the same shape as Print Width and Print Height, then verify DPI and bleed in View Options.
Saved Designs says Log in to save	Confirm the frontend request carries the current WordPress login cookies and is not served from a cache created for logged-out visitors.
Theme styles alter buttons/icons	Clear minification caches and inspect theme rules with higher specificity. Do not duplicate plugin CSS or load an outdated bundled stylesheet.

Support

For product assistance, configuration questions or technical support, email tibi@fwdapps.net or tibi_diablo@yahoo.com.

Include your Iza Product Designer version, WordPress and WooCommerce versions, the affected page URL, and clear steps for reproducing the issue. Do not send administrator passwords or other sensitive credentials by email.

WordPress / WooCommerce Documentation

Getting Started

Requirements

Choosing the right image format

Prepare SVG and PNG assets

Installation

Create the first product

Updates

Products Manager

Products and starter templates

Product ZIP import and export

Views

View Designer

View Options

Content libraries

Fonts

Product categories

Settings

General tab

Core settings

Lightbox

Bounds and snapping

Supported Bounding Box Mode values

Keyboard settings

Loader and fonts

Dialog settings

Interface tab

Action bar

Views

Modules

Products and saved designs

Layers

Canvas

Object toolbar

Content tab

Add Text

Add Images

Add Shapes

Artwork Library

Production tab

Download and preview

Working with Colors

Interface theme

Content palettes

SVG and image colors

Color precedence

Frontend Placement

Assignment metabox

Shortcode

Multiple instances

Automatic frontend loading

Responsive layout

WooCommerce

Product assignment

Variations

Placement and lightbox

Product-page placement

WooCommerce lightbox

Pricing

Cart and add-to-cart behavior

Saved designs

WooCommerce Orders

Design capture

View customization

Order exports

Editable Printing Box

1. Set the print and canvas sizes

2. Enable visual editing

3. Position, resize and save

Production Export

Prepare a production view

How the generated output is sized

Printing-box crop and bleed

Download production files

Production validation checklist

Product Data and Portability

What WordPress stores

Product ZIP import and export

Views and layers

Content libraries