EPD Product Designer

Lightweight Product Designer for WordPress

Version 1.4.1

1. Introduction

Welcome to EPD Product Designer! This documentation will help you get started and make the most of the plugin.

What is EPD Product Designer?

EPD Product Designer is a lightweight, user-friendly product customization plugin for WordPress. It allows your customers to personalize products by adding custom text and images using an intuitive drag-and-drop canvas editor.

Drag & Drop Editor

Intuitive canvas-based editor powered by Fabric.js for smooth interactions.

Flexible Masks

Rectangle and ellipse shapes for precise editable areas. Custom SVG shapes available with Pro.

Mobile Friendly

Fully responsive design with touch support for mobile devices.

CF7 Compatible

Integrates seamlessly with Contact Form 7 or uses built-in form.

Product Colors

Let customers preview products in different colors with real-time tinting.

Google Fonts

Optional Google Fonts integration with 25+ curated font choices.

Keyboard Shortcuts

Copy, paste, duplicate, and delete with familiar keyboard shortcuts.

Download & Print

Let customers download or print their design directly from the browser.

Layer Controls

Move objects up/down with floating layer toolbar for precise layering.

CSV Export

Export all submissions to a spreadsheet for easy order management.

Translation Ready

Fully translatable with Loco Translate, Polylang, WPML, and more.

Mask Coloring

Optional feature to let users fill editable areas with custom background colors.

Pro Features

Upgrade to Pro for advanced functionality:

Custom SVG Mask Shapes

Use any SVG shape as an editable area — hearts, stars, badges, logos, or any custom outline. Go beyond rectangles and ellipses.

Product Bundles

Design multiple perspectives of a product (front, back, sleeve) — each with its own editable areas, shapes, and constraints. Submit everything as one order.

Synchronized Colors

Sync product colors across all items in a bundle for consistent designs.

Customer SVG Uploads

Let customers upload their own SVG files (with automatic security sanitization).

Image Quality Checks

Warn customers when their images are too low resolution for printing.

Per-Area Image Source

Control each area independently: library only, upload only, both, or none. Works with the free Image Library feature.

WooCommerce Addon (Sold Separately)

Connect EPD Product Designer to your WooCommerce store:

Cart Integration

Customers add customized designs directly to their WooCommerce cart.

Design Fees

Charge extra for design customization based on areas used.

Order Design Preview

Composite design images, individual uploaded files, and fonts used are visible in WooCommerce orders.

Variable Products

Full support for WooCommerce variable products including all variations.

2. Requirements

Requirement Minimum Recommended
WordPress 5.8+ 6.0+
PHP 7.4+ 8.0+
MySQL 5.6+ 8.0+
Browser Chrome, Firefox, Safari, Edge (latest versions)

Optional

3. Installation

Method 1: WordPress Admin (Recommended)

1

Upload Plugin

Go to Plugins → Add New → Upload Plugin in your WordPress admin.

2

Select ZIP File

Click "Choose File" and select the epd-product-designer.zip file you downloaded.

3

Install & Activate

Click "Install Now" and then "Activate Plugin".

Method 2: FTP Upload

  1. Unzip the downloaded file on your computer
  2. Upload the epd-product-designer folder to /wp-content/plugins/
  3. Go to Plugins in WordPress admin and activate "EPD Product Designer"
Success! After activation, you'll see a new menu item called "EP Designer" in your WordPress admin sidebar.

4. Quick Start Guide

Get your first product designer running in 5 minutes:

1

Create a Product

Go to EP Designer → Add New Product. Enter a title like "Custom T-Shirt".

2

Upload Base Image

Click "Upload Image" and select your product photo. The canvas dimensions will auto-fill.

3

Add Editable Area

Click "+ Add Area" and use the sliders to position the mask where customers can add designs.

4

Publish & Copy Shortcode

Click "Publish", then copy the shortcode shown (e.g., [epdesigner product_id="123"]).

5

Add to Page

Paste the shortcode into any page or post. Done!

5. Creating Products

Admin Interface

The product editor features a clean, organized layout with collapsible sections:

Tip: Click any section header to expand or collapse it. Most settings sections are collapsed by default to reduce clutter. Hover over option labels to see helpful tooltips.

Product Settings

Base Image

Upload the product photo that customers will see. This becomes the background of the design canvas. Recommended dimensions: 800x800 to 1200x1200 pixels.

Canvas Size

The canvas dimensions are automatically set from your uploaded image. You can adjust them manually if needed. The canvas scales responsively on mobile devices.

Visual Preview

The preview area shows your product with all editable areas overlaid. Use the toggle button to switch between views:

Tip: Use 1:1 mode for precise mask positioning, especially when working with complex shapes or when pixel-perfect alignment matters.

Editable Areas (Masks)

Masks define where customers can place their designs. Multiple editable areas per product are supported in both the free and Pro versions.

The Editable Areas section uses a tabbed interface for easy navigation:

Setting Description
Name Label shown to customers (e.g., "Front", "Back", "Sleeve")
Image Source (Pro) Controls which image tools customers see for this area: Both, Library Only, Upload Only, or None
Shape Rectangle, Ellipse, or Custom SVG (Pro)
X / Y Position Position from top-left corner (use sliders for precision)
Width / Height Size of the editable area
Rotation Rotate the mask from 0° to 360°
Corner Radius Round the corners of rectangle masks (0 = sharp corners). Only visible for rectangle shapes.
SVG File Upload a custom SVG shape file. Only visible when "Custom SVG" shape is selected.
Tip: Use the live preview to see exactly how your masks appear on the product image. The preview updates in real-time as you adjust settings.

Custom SVG Shapes (Pro)

With Pro, you can upload custom SVG files for unique mask shapes beyond rectangles and ellipses:

SVG Requirements:
  • Use solid filled shapes (the fill color is ignored - only the shape matters)
  • Avoid stroke-only shapes without fills
  • Avoid complex features like gradients, filters, or embedded images
  • If using text in your SVG, convert it to outlines first

Tip: In Illustrator or Inkscape, create a shape with a solid fill and export as SVG.

Image Library

The Image Library lets you assign a set of predefined images to each product. Customers can browse and select from these images using the “Choose Design” button in the frontend designer, which opens a modal gallery.

Tip: The image library works well for offering pre-made design templates, brand logos, or approved artwork that customers can place on their products. SVGs are ideal for logos and vector artwork since they stay crisp at any size.

Per-Area Image Source (Pro)

With Pro, you can control which image tools are available for each editable area independently:

Option Description
Both (Upload + Library) Customers can upload their own images and choose from the library (default)
Library Only Only the library is shown — customers cannot upload their own images
Upload Only Only the upload button is shown — the library is hidden for this area
None No image tools available for this area (text only)
Example: On a t-shirt with front and back areas, set the front to "Both" so customers can upload or pick from the library, and set the back to "Library Only" if you only want to allow pre-approved designs there.

Upload Settings

Allowed Fonts

Select which fonts customers can use for text:

Product Colors

Enable color options to let customers preview the product in different colors. This uses a color tinting system that works best with white or light-colored product images with transparent backgrounds (PNG).

Best Practice: For product colors to work well, use a white or light-gray product image with a transparent background (PNG format). The color tinting multiplies with the base image, so lighter base colors produce more vibrant results.
When to use each mode: Use Predefined Swatches when you only offer specific colors (e.g., branded colors, available inventory). Use Free Color Picker when customers can order any color (e.g., custom printing, made-to-order items).

Font Colors

Restrict text colors to specific options. Useful for print shops with limited ink colors (e.g., black-only printing, or specific PMS colors).

Example: If you only offer black and white printing, add "Black" (#000000) and "White" (#FFFFFF) as the only font color options. Customers will only see these two choices instead of a full color picker.

Object Constraints

Control how customers can position, scale, and style their designs (located in the "Object Constraints" section):

These settings are useful for different product types - for example, pens need minimal overflow, t-shirts need more flexibility, and textured products benefit from lower layer opacity.

Mask Appearance

Customize how editable areas look in the designer (located in the "Mask Appearance" section):

These settings help you match the designer appearance to your site's design or make editable areas more visible for complex product images.

Tip: Use "Hide Strokes" for a cleaner look when your product image already has clear visual boundaries, or when combined with mask coloring to create a seamless appearance.

Mask Coloring (Frontend Feature)

When enabled per-product (in the Mask Appearance settings), users see a color picker next to the mask selector:

Use Case: Great for products where customers might want a colored background behind their text or image, such as badges, labels, or promotional items.

Shortcode & Output

Located in the "Shortcode & Output" section at the bottom of each product. All settings default to your global configuration but can be overridden per product:

Setting Description Available in
Shortcode Copy-ready shortcode to embed this product's designer Free & Pro
Image Upload Override the global image upload setting (Global / Enabled / Disabled) Free & Pro
Custom Text Override the global text setting (Global / Enabled / Disabled) Free & Pro
Layout Override the global layout (Global / Two Columns / Stacked / Compact) Pro
Form Override which form to use: Global setting, Fallback form, No Form, or a specific Contact Form 7 form Pro
Min. Resolution Override the global minimum image resolution per product (Global / No minimum / Custom e.g. 800x800) Pro
Flexibility: Per-product overrides let you configure each product differently. For example, a business card product might need text-only (image upload disabled), while a photo canvas product needs image-only (custom text disabled). Pro users can also assign different forms or layouts per product.

6. Shortcode Usage

Basic Shortcode

[epdesigner product_id="123"]

Displays the designer for a specific product. Replace 123 with your product's ID.

Layout Override

[epdesigner product_id="123" layout="compact"]

Override the layout for this specific shortcode. Options: beside (Two Columns), below (Stacked), compact.

Layout Priority: Shortcode attribute → Product setting (Pro) → Global setting. The shortcode attribute always wins if specified.

Product Selector (All Products)

[epdesigner]

Lets customers choose from all published products. The display style can be configured in plugin settings:

Filtered Product Selector

[epdesigner products="123,456,789"]

Show a selector with only specific products. Use comma-separated product IDs. Products appear in the order you specify them.

Product Order: By default (without the products attribute), products are sorted alphabetically by title. When using the products attribute, they appear in the exact order you list them.

Product Category Filter

[epdesigner category="t-shirts"]

Show products from a specific product category. Use the category slug or ID. Categories can be created and managed in EP Designer → Products → Categories.

[epdesigner products="123,456" category="apparel"]

Combine with products to further filter specific product IDs within a category.

Bundle Shortcode (Pro)

[epdesigner bundle_id="123"]

Display a specific product bundle (Pro feature). Customers can design all products in the bundle and submit them together.

Bundle Selector (Pro)

[epdesigner bundles="true"]

Display a selector showing all published bundles. Customers choose a bundle before designing. Uses the same display style (dropdown or grid) as the product selector.

Filtered Bundle Selector

[epdesigner bundles="5,8,12"]

Show a selector with only specific bundles. Use comma-separated bundle IDs.

Bundle Category Filter

[epdesigner bundles="true" bundle_category="uniforms"]

Filter bundles by category. Use the category slug or ID. Categories can be created in EP Designer → Bundles → Categories.

Bundle Display: For best results with the grid display, add a Featured Image and Excerpt to your bundles (via the standard WordPress sidebar when editing a bundle).

Finding Product ID

The product ID is shown in the shortcode box when editing a product. You can also find it in the URL when editing: post.php?post=123&action=edit

Page Builder Usage

The shortcode works with all major page builders:

Product Selector Navigation

When using the product selector shortcode ([epdesigner]), customers who select a product will see a "← Change Product" link above the designer canvas. Clicking it returns to the product selector. The same applies for bundles ("← Change Bundle").

Admin Bar Quick Edit

When a logged-in administrator or editor views a page with the designer, an "Edit Designer" (or "Edit Bundle") link appears in the WordPress admin bar. This provides one-click access to edit the product's settings directly.

Limitations

One Designer Per Page: Only one product designer can be displayed per page. If you add multiple shortcodes with different products on the same page, only the first designer will load. The additional shortcodes will show a notice: "Only one designer can be displayed per page."

This limitation exists to prevent JavaScript conflicts between multiple canvas instances. If you need customers to design multiple products, use separate pages or the product selector shortcode ([epdesigner]) to let them switch between products.

7. Plugin Settings

Access settings via EP Designer → Settings.

Designer Layout

Option Description
Two Columns Canvas on left, form on right (desktop default)
Stacked Form appears below the canvas (better for narrow layouts)
Compact Canvas left, controls in a row on right with form below - 50/50 split (great for sidebars or constrained spaces)

Designer Features

You can disable features if your use case only requires specific functionality.

Product Selector Style

When using [epdesigner] without a product ID:

Form Settings

Choose the default form for design submissions:

Notifications

Redirects

Spam Protection (Fallback Form Only)

Note: These spam protection features only apply to the built-in fallback form. If using Contact Form 7, configure spam protection through CF7's own settings (reCAPTCHA, Akismet, etc.).

Translation

EPD Product Designer is fully translation-ready. All frontend text strings use WordPress's internationalization system and work with popular translation plugins:

8. Pro Features

The Pro version unlocks powerful features for professional use.

Product Bundles

Bundles let you offer multiple perspectives of a product — or a set of related products — as a single design experience. Each perspective is its own designer product with its own base image, editable areas, mask shapes, and constraints. Customers design each one and submit everything together.

Why Bundles?

A single designer product shows one view. But real products have multiple sides. A t-shirt has a front and a back. A mug has a wrap-around surface. A uniform set has a shirt, pants, and cap. Bundles solve this by combining separate products into one seamless flow — each with fully independent editing areas.

Example: Create a "T-Shirt Front" product with a large rectangle mask on the chest area, and a "T-Shirt Back" product with a smaller ellipse mask between the shoulders. Bundle them together. Your customer sees two tabs — "Front" and "Back" — and designs both sides before submitting a single order.

Creating a Bundle

  1. Go to EP Designer → Bundles → Add New
  2. Give your bundle a title (e.g., "T-Shirt Front & Back")
  3. Add products to the bundle using the dropdown
  4. Optionally customize tab names and enable color sync
  5. Publish and use the shortcode: [epdesigner bundle_id="123"]

Bundle Settings

Setting Description
Navigation Override the global navigation position for this bundle. Options: Use Global Setting (default), Top only, Bottom only, Top and Bottom, or Disable Navigation. Disabling navigation hides all navigation controls (tabs, prev/next arrows) — useful for single-product bundles that should behave like standalone products.
Synchronize product colors When enabled, the color selected in the first product applies to all products in the bundle. Works with both predefined color swatches and the free color picker.
Form Position With Controls - form appears beside/below canvas based on layout setting. Below Bundle - form appears full-width at the bottom (legacy behavior).
Submission Form Choose which form to use for submissions. Ignored when WooCommerce addon uses "Add to Cart" mode.
Tip: Create individual products first (Front, Back, Sleeve), then combine them into a bundle. Each product keeps its own per-product settings (layout, form, image upload, etc.), while the bundle adds its own layer of overrides for navigation, color sync, form position, and submission form.

Customer SVG Uploads

Allow customers to upload their own SVG files (logos, vector artwork):

How to Enable

  1. Go to EP Designer → Settings
  2. Enable "Allow Customer SVG Uploads" under Pro Features
  3. Optionally set a separate max file size for SVG uploads
Note: Only simple, well-formed SVGs work reliably. The plugin warns customers if their SVG appears too complex.

Image Quality Warnings

Help customers avoid low-quality prints by warning them about low-resolution images:

Per-Area Image Source Control

Fine-tune which image tools are available for each editable area. This works in combination with the product-level Image Library (available in the free version).

How to Use

  1. Open a designer product in the admin
  2. In the Editable Areas section, click on an area tab
  3. Set the “Image Source” dropdown to your preferred option
  4. Repeat for each area as needed
Note: The product-level “Image Upload” setting (in Shortcode & Output) acts as a master switch. If it is set to “Disabled”, no image tools appear regardless of per-area settings.

WooCommerce Addon (Sold Separately)

The WooCommerce Addon is a separate plugin that connects EPD Product Designer to your store:

What Store Owners See in Orders

When a customer places an order with a customized design, the order details include:

Note: The WooCommerce Addon is sold separately from the Pro version. You can use EPD Product Designer (Free or Pro) without WooCommerce - designs are submitted via the built-in form or Contact Form 7.

Add to Cart Position

The WooCommerce product settings include an "Add to Cart Position" dropdown that controls where the pricing box and "Add to Cart" button appear:

Option Description
Below Designer (full width) The Add to Cart section appears below the entire designer as a full-width section. This is the default.
With Controls (follows layout) The Add to Cart section appears inside the controls panel, following your layout setting (Two Columns, Stacked, or Compact). This creates a more integrated look.

This setting works consistently for both single designer products and bundles. When a WooCommerce product is linked to a bundle, this setting overrides the bundle's own "Form Position" setting for that specific WooCommerce product page.

Tip: The bundle's "Form Position" setting still applies when the bundle is used outside WooCommerce (e.g., via shortcode with CF7 or fallback form).

9. Contact Form 7 Integration

EPD Product Designer works seamlessly with Contact Form 7 for advanced form customization.

Setup Steps

  1. Install and activate Contact Form 7
  2. Create a new CF7 form with your desired fields
  3. Go to EP Designer → Settings
  4. Select your CF7 form from the "Default Form" dropdown
  5. Save settings

Recommended CF7 Fields

<label>Your Name
    [text* your-name]</label>

<label>Your Email
    [email* your-email]</label>

<label>Message
    [textarea your-message]</label>

[submit "Submit Design"]
Important: Use field names your-name, your-email, and your-message for best compatibility. These three fields are automatically captured and stored in the Submissions list.

Flexible Field Names

The plugin automatically recognizes several common CF7 field name variants:

Purpose Recognized Field Names
Customer Name your-name, name, customer-name, full-name
Customer Email your-email, email, customer-email
Message your-message, message, comments, notes

You can use any of these names in your CF7 form — the plugin will find and store the values automatically.

How It Works

Note about custom fields: If your CF7 form includes additional fields (dropdowns, checkboxes, etc.), these values are included in the CF7 email notification but are not stored in the EP Designer Submissions list. For full form data storage, consider using a CF7 database plugin like Flamingo alongside EP Designer.

10. Managing Submissions

All design submissions are stored in EP Designer → Submissions.

Submission Details

Status Workflow

Status Use Case
Pending Review New submissions (default)
In Progress Being processed/manufactured
Completed Order fulfilled
Trash Archived/deleted

Email Notifications

When a submission is received:

CSV Export

Click the "Export CSV" button on the submissions list to download all submissions as a spreadsheet. The export includes submission ID, date, status, customer name, email, product, message, design URL, and form source. The export is UTF-8 encoded (Excel-compatible) and protected against spreadsheet formula injection.

11. Customization

CSS Styling

Add custom CSS to your theme's customizer or a custom CSS plugin. All elements use the .epdesigner- prefix.

Main CSS Classes

.epdesigner-designer-wrapperMain designer wrapper
.epdesigner-canvas-wrapperCanvas area container
.epdesigner-canvas-containerCanvas element container
.epdesigner-controls-wrapperControls panel wrapper
.epdesigner-control-groupIndividual control section
.epdesigner-tools-rowRow containing tool groups
.epdesigner-tool-imageImage upload tool section
.epdesigner-text-optionsText input and styling section
.epdesigner-btnAll buttons
.epdesigner-btn-secondarySecondary buttons (reset, clear)
.epdesigner-btn-submitForm submit button
.epdesigner-upload-btnUpload button (icon + text)
.epdesigner-product-selectorProduct selector wrapper
.epdesigner-product-gridVisual grid selector
.epdesigner-grid-itemGrid product card
.epdesigner-color-swatchesProduct color swatches
.epdesigner-color-swatchIndividual color swatch
.epdesigner-mask-tabsEditable area tabs
.epdesigner-mask-tabIndividual area tab
.epdesigner-layer-toolbarFloating layer controls
.epdesigner-form-rowForm field row
.epdesigner-successSuccess message
.epdesigner-errorError message
.epdesigner-noticeNotice/info message

Layout Classes

.epdesigner-form-besideTwo-column layout (default)
.epdesigner-form-belowStacked layout
.epdesigner-form-compactCompact layout
.epdesigner-mobile-tabsMobile tab mode enabled

Bundle Classes (Pro)

.epdesigner-bundle-wrapperBundle main wrapper
.epdesigner-bundle-navigationBundle tab navigation bar
.epdesigner-bundle-tabsBundle product tabs container
.epdesigner-bundle-tabIndividual bundle product tab
.epdesigner-bundle-productSingle product within bundle
.epdesigner-bundle-form-wrapperBundle shared form wrapper

Use browser Developer Tools to inspect elements for additional classes.

Example Overrides

/* Change primary button color */
.epdesigner-btn {
    background: #your-color;
}

/* Style the canvas container */
.epdesigner-canvas-container {
    border: 2px solid #your-color;
    border-radius: 10px;
}

/* Customize the upload button */
.epdesigner-upload-btn {
    background: #f8f8f8;
    border-color: #your-color;
}

/* Style color swatches */
.epdesigner-color-swatch {
    border-radius: 50%;
}

/* Customize bundle tabs (Pro) */
.epdesigner-bundle-tab.active {
    background: #your-color;
}

Developer Hooks

For developers, the plugin provides filters and actions:

// Modify product data before rendering
add_filter( 'epdesigner_product_data', function( $data, $product_id ) {
    // Your modifications
    return $data;
}, 10, 2 );

// Add content before designer
add_action( 'epdesigner_before_designer_render', function( $product_id ) {
    echo '<div class="my-custom-header">...</div>';
} );

// Add content after designer
add_action( 'epdesigner_after_designer_render', function( $product_id ) {
    echo '<div class="my-custom-footer">...</div>';
} );

// Add content inside the controls panel (after tools, before form)
add_action( 'epdesigner_controls_after', function( $product_id ) {
    echo '<div class="my-inline-content">...</div>';
} );

// Modify system fonts
add_filter( 'epdesigner_system_fonts', function( $fonts ) {
    $fonts[] = 'Comic Sans MS';
    return $fonts;
} );

// Modify Google Fonts list
add_filter( 'epdesigner_google_fonts', function( $fonts ) {
    $fonts[] = 'Caveat';
    $fonts[] = 'Satisfy';
    return $fonts;
} );

// Control user access
add_filter( 'epdesigner_user_can_use_designer', function( $can, $product_id ) {
    // Only logged-in users
    return is_user_logged_in();
}, 10, 2 );

// Control upload permission
add_filter( 'epdesigner_can_upload_image', function( $can ) {
    // Restrict uploads to logged-in users
    return is_user_logged_in();
} );

// Trust proxy headers for client IP detection (e.g. behind Cloudflare)
add_filter( 'epdesigner_trust_proxy_headers', '__return_true' );

// Override CF7 form per product (use a different form for specific products)
add_filter( 'epdesigner_cf7_shortcode', function( $shortcode, $product_id ) {
    if ( $product_id === 42 ) {
        return '[contact-form-7 id="99"]';
    }
    return $shortcode;
}, 10, 2 );

// Hook into submissions
add_action( 'epdesigner_before_submission', function( $data ) {
    // $data contains: product_id, customer_name, customer_email
} );

add_action( 'epdesigner_after_submission', function( $submission_id, $data ) {
    // Runs after a single-product submission is saved
}, 10, 2 );

// Bundle submission hooks
add_action( 'epdesigner_before_bundle_submission', function( $data ) {
    // $data contains: bundle_id, customer_name, customer_email
} );

add_action( 'epdesigner_after_bundle_submission', function( $submission_id, $data ) {
    // Runs after a bundle submission is saved
}, 10, 2 );

// Add content before/after bundle rendering
add_action( 'epdesigner_before_bundle_render', function( $bundle_id ) {
    echo '<div class="my-bundle-header">...</div>';
} );

add_action( 'epdesigner_after_bundle_render', function( $bundle_id ) {
    echo '<div class="my-bundle-footer">...</div>';
} );

// Override bundle form position (e.g., force inline for a specific bundle)
add_filter( 'epdesigner_bundle_form_position', function( $position, $bundle_id ) {
    return $position; // 'inline' or 'below'
}, 10, 2 );

// Extend admin script data (add custom data to admin JS)
add_filter( 'epdesigner_admin_script_data', function( $data ) {
    $data['myCustomKey'] = 'value';
    return $data;
} );

JavaScript Events

The designer dispatches custom events on the document for frontend integration:

// Designer initialized (canvas ready)
document.addEventListener('epdesigner_designer_initialized', function(e) {
    console.log('Product ID:', e.detail.productId);
    console.log('Canvas:', e.detail.canvas);
});

// Design content changed (image/text added, modified, or removed)
document.addEventListener('epdesigner_design_changed', function(e) {
    console.log('Area:', e.detail.areaIndex);
});

// Content added to an area
document.addEventListener('epdesigner_area_content_added', function(e) {
    console.log('Type:', e.detail.contentType); // 'image', 'text', 'svg', 'fill_color'
});

// Content removed from an area
document.addEventListener('epdesigner_area_content_removed', function(e) {
    console.log('Area cleared:', e.detail.areaIndex);
});

// All areas reset
document.addEventListener('epdesigner_design_reset', function(e) {
    console.log('Design was reset');
});

// Bundle: product tab switched
document.addEventListener('epdesigner_bundle_product_switched', function(e) {
    console.log('Switched from', e.detail.fromIndex, 'to', e.detail.toIndex);
});

REST API Endpoints

The plugin exposes REST API endpoints under the epdesigner/v1 namespace:

Method Endpoint Description
GET /wp-json/epdesigner/v1/products List all published designer products (public, used by the product selector)
GET /wp-json/epdesigner/v1/product/{id} Get a single product's configuration (public)
POST /wp-json/epdesigner/v1/save-draft Save a design draft (requires nonce authentication)

12. Frequently Asked Questions

General

Q: Does this work with WooCommerce?

A: Yes! The WooCommerce Addon (sold separately) lets you link designs to WooCommerce products, add design fees, and let customers add customized products to cart. Without the addon, you can still use the designer shortcode on WooCommerce product pages for quote requests via form submission.

Q: Can customers save their designs and come back later?

A: Currently, designs are submitted immediately. Draft saving may be added in a future version.

Q: What image formats can customers upload?

A: JPG and PNG files are supported in the free version. Pro users can also enable SVG uploads for customers.

Q: Is there a limit to how many products I can create?

A: No, create unlimited products.

Q: How do product colors work?

A: The color tinting uses a multiply blend mode. For best results, use a white or light-colored product image with a transparent PNG background. The selected color will tint the product, and you can adjust the intensity with the opacity slider.

Q: Can customers rearrange layers?

A: Yes! When multiple objects are on the canvas, a floating toolbar appears with up/down arrows to change the layer order.

Q: How do I make text bold or italic?

A: Next to the font color picker, there are B (bold) and I (italic) toggle buttons. Click them before adding text to apply the style.

Q: Can I have multiple designers on the same page?

A: No, only one designer can be displayed per page due to JavaScript limitations. Use the product selector shortcode ([epdesigner]) to let customers switch between products, or create separate pages for each product.

Q: What are Product Bundles? (Pro)

A: Bundles combine multiple designer products into one session — typically different perspectives of the same item (front/back of a t-shirt, multiple sides of a box) or a matching set (shirt + cap). Each product in the bundle keeps its own base image, editable areas, mask shapes, and constraints, so you have full control over what customers can design on each side. All designs are submitted together as one order.

Q: Can customers upload vector files? (Pro)

A: Yes, Pro users can enable SVG uploads. All SVGs are automatically scanned and sanitized for security. Complex SVGs may show a warning.

Technical

Q: The designer looks broken or doesn't load

A: Check for JavaScript conflicts with other plugins. Try disabling other plugins temporarily. Ensure your theme doesn't have conflicting CSS.

Q: Images are not attaching to emails

A: Check your server's upload directory permissions. The wp-content/uploads folder must be writable.

Q: Can I use Google Fonts?

A: Yes! Enable Google Fonts in EP Designer → Settings → Designer Features. Once enabled, you can select from 25+ popular Google Fonts per product. Fonts load dynamically only when needed.

Q: Does it work with caching plugins?

A: Yes, but exclude the designer page from caching if you experience issues with nonces.

13. Support

Getting Help

If you need assistance:

  1. Check this documentation first
  2. Review the FAQ section above
  3. Contact us at help@easypluginswp.com

When Contacting Support

Please include:

Support Policy

14. Changelog

Version 1.4.1

Version 1.4.0

Version 1.3.9

Version 1.3.8

Version 1.3.7

Version 1.3.6

Version 1.3.5

Version 1.3.4

Version 1.3.3

Version 1.3.2

Version 1.3.1

Version 1.3.0

Version 1.2.2

Version 1.2.1

Version 1.2.0

Version 1.1.0

Version 1.0.6

Version 1.0.5

Version 1.0.4

Version 1.0.3

Version 1.0.2

Version 1.0.1

Version 1.0.0 (Initial Release)