General Setup for Fancy Product Designer Plugin

Before diving into item-specific procedures, ensure the plugin is installed and activated in your WordPress
dashboard. Fancy Product Designer integrates with WooCommerce, so WooCommerce must be installed and
set up. The plugin provides a backend interface for creating customizable products, including a Product Builder
for editing views and elements. You can use premium templates (if subscribed to the Genius PREMIUM Plan)
or create from scratch.
Key concepts:
1. Products : These are the customizable items you build in the plugin.
2. Views : Different angles or sides of the product (e.g., front, back).
3. Elements : Items like images, text, or upload zones added to views.
4. Product Builder : A visual editor for setting up initial designs, layers, and customer options.
5. UI & Layout Customizer : For configuring the frontend designer interface.
Once a product is created in the plugin, assign it to a WooCommerce product page for customers to customize.
Now, I'll explain the procedure for each item separately, using examples based on common setups. The steps are
similar across items, but views and elements vary by product shape.
Procedure for Customizing a T-Shirt
1. Create a New Product in the Backend:
a. Log in to your WordPress admin dashboard.
b. Navigate to Fancy Product Designer > Products.
c. Click New to start from scratch, or if you have access to the Template Library (via premium plan), click
Template Library to search for "T-shirt" templates. For example, select a basic T-shirt template with
front and back views.
d. Enter a product name, e.g., "Custom T-Shirt Basic".
e. Save the product. This adds it to your products list. The template might pre-include two views: Front
and Back.
2. Add or Edit Views:
a. In the product editor, you'll see a list of views (e.g., "Front View" and "Back View").
b. If starting from scratch, click New View to add one. For a T-shirt, add at least two: one for the front and
one for the back.
c. For each view, upload a base image (e.g., a blank white T-shirt front PNG with transparent background).
Set the canvas size, e.g., 800x1000 pixels for high resolution.
d. Configure view options like export settings (for print-ready files, e.g., PDF at 300 DPI) and bounding
box (the printable area, e.g., a rectangle covering the chest area).
3. Edit Views in Product Builder:
a. Click Edit View in Product Builder for the Front View.
b. In the builder interface:
c. Layers Section (left sidebar): Add elements. For example, add an SVG image layer for a logo (upload a
sample logo SVG), a text layer (e.g., placeholder text "Add Your Text Here"), and an upload zone (a
dashed rectangle where customers can upload images).
d. Drag layers to reorder them (e.g., base T-shirt image at the bottom).
e. Canvas Section (center): Select an element to edit. Use the toolbar below to resize, rotate, or set colors.
For the T-shirt base, enable colorization so customers can change shirt color (link it to WooCommerce
variations like red, blue).
f. Sidebar (right): Set customization options. For the text layer, allow font changes, curving, or pricing
(e.g., +$2 for custom text). For the upload zone, restrict file types to PNG/JPG and set minimum
resolution.
g. Example: Add a bounding box (printable area) of 300x400 pixels centered on the T-shirt front. Make the
logo layer customizable but locked in position.
h. Repeat for Back View, perhaps with a larger bounding box for full-back prints.
i. Save changes. The initial design (e.g., blank T-shirt with placeholders) is what customers start with.
4. Configure UI and Layout:
a. Go to Fancy Product Designer > UI & Layout Customizer.
b. Customize the frontend: Set top bar for tools like add text/image, change colors. Adjust canvas size to be
responsive (e.g., max 800px width).
c. Add actions like "Reset Design" or "Download Preview". Save as a new layout or overwrite default.
5. Assign to WooCommerce Product:
a. Go to WooCommerce > Products > Add New.
b. Set product type to Variable (for colors/sizes), add attributes (e.g., Size: S/M/L, Color: White/Black).
c. In the "Fancy Product Designer" section, select your created product (e.g., "Custom T-Shirt Basic").
d. Publish the product. On the frontend, customers see the designer: They can add text (e.g., "Family
Reunion 2026"), upload images, change views, and add to cart.
e. Example: A customer designs a front with a photo and text, switches to back for a slogan, selects black
color, and orders.
6. Test and Manage Orders:
a. Preview the product page. Customize as a user and add to cart.
b. In admin, view orders under Fancy Product Designer > Manage Orders to export print-ready files.
Procedure for Customizing a Mobile Phone Case
1. Create a New Product in the Backend:
a. In WordPress admin, go to Fancy Product Designer > Products.
b. Click New or use Template Library to search for "phone case" (e.g., iPhone case template).
c. Name it, e.g., "Custom iPhone Case".
d. Save. Templates often include one main view (the back or wrap-around).
2. Add or Edit Views:
a. Add a single view (e.g., "Back View") since phone cases typically customize the back.
b. Upload a base image: A transparent PNG of the phone case outline for a specific model (e.g., iPhone
14). Set canvas to match case dimensions, e.g., 400x800 pixels.
c. Set bounding box to the printable area (curved edges if wrap-around, avoiding camera cutouts).
3. Edit Views in Product Builder:
a. Open the view in Product Builder.
b. Layers: Add an upload zone covering the entire printable area, a text layer (e.g., "Personalize Here"),
and perhaps a mask layer (SVG to clip designs to case shape).
c. Canvas: Position elements. Enable colorization for case colors (e.g., clear, black edges).
d. Sidebar: For upload zone, allow image scaling/rotation but lock within bounds. Add pricing for complex
designs (e.g., +$5 for multi-layer).
e. Example: Add a pre-set design element like a pattern background that's removable. Use an SVG mask
for rounded corners.
f. Save.
4. Configure UI and Layout:
a. In UI & Layout Customizer, optimize for mobile (responsive canvas). Include tools for adding QR codes
or generating images.
b. Save layout.
5. Assign to WooCommerce Product:
a. Create a new WooCommerce product, set as Variable for phone models (e.g., iPhone 13/14).
b. Link the Fancy Product in the product settings.
c. Publish. Customers can upload photos (e.g., family picture), add text (e.g., name), and preview on the
case shape.
6. Test and Manage Orders:
a. Test customization (e.g., upload a logo, curve text around edges).
b. Export orders as UV-print ready files.
Procedure for Customizing a Cup (Mug)
1. Create a New Product in the Backend:
a. Go to Fancy Product Designer > Products.
b. Click New or search Template Library for "mug" or "cup".
c. Name it, e.g., "Custom Coffee Mug".
d. Save. Templates may include a flat view or 3D preview.
2. Add or Edit Views:
a. Add one or two views: "Front View" (main printable side) and optionally "Wrap-Around" for full
cylinder.
b. Upload base image: A blank mug PNG. For 3D, use plugin's 3D support if available. Canvas size e.g.,
1000x400 for panoramic.
3. Edit Views in Product Builder:
a. In Builder for Front View:
b. Layers: Add text (curvable for mug shape), image upload zone, and perhaps engraving simulation.
c. Canvas: Curve text tools if supported. Set bounding box to mug's curve (e.g., 8x3 inches).
d. Sidebar: Allow color changes (e.g., white/ceramic), restrict designs to non-handle areas.
e. Example: Pre-add a text placeholder "World's Best Dad" that's editable. For wrap-around, link views for
seamless design.
f. Save.
4. Configure UI and Layout:
a. Customize for rotation preview if 3D.
b. Add sublimation export options.
5. Assign to WooCommerce Product:
a. New WooCommerce product, variable for sizes (11oz/15oz).
b. Select the Fancy Product.
c. Publish. Customers design e.g., add photo on one side, text on the other.
6. Test and Manage Orders:
a. Test curving text.
b. Export for sublimation printing.
Procedure for Customizing a Cap (Hat)
1. Create a New Product in the Backend:
a. Navigate to Fancy Product Designer > Products.
b. Click New or Template Library for "cap" or "hat".
c. Name it, e.g., "Custom Baseball Cap".
d. Save. Typically one view for the front panel.
2. Add or Edit Views:
a. Add "Front Panel View".
b. Upload base: Blank cap front PNG. Canvas e.g., 600x400.
c. Bounding box: Trapezoid shape for cap panel.
3. Edit Views in Product Builder:
a. Layers: Add embroidery simulation text, logo upload.
b. Canvas: Position for curved surface.
c. Sidebar: Limit to embroidery-friendly designs (e.g., no gradients).
d. Example: Add placeholder "Team Logo" layer, allow color swap for cap fabric.
4. Configure UI and Layout:
- Add tools for text arching.
5. Assign to WooCommerce Product:
a. WooCommerce product, variable for colors/styles.
b. Link Fancy Product.
c. Publish. Customers e.g., add embroidered name.
6. Test and Manage Orders:
- Test arching text. Export for embroidery.