NextXen Designer v2.0.0

Overview

NextXen Designer adds a fully interactive Fabric.js canvas to your WooCommerce product pages, letting customers personalize products with text, images, shapes, and graphics before purchasing.

Requirements

Installation

Automatic (Recommended)

1. In your WordPress admin, go to Plugins → Add New.
2. Search for NextXen Designer.
3. Click Install Now, then Activate.

Manual Installation

1. Download the plugin .zip from WordPress.org.
2. In your admin, go to Plugins → Add New → Upload Plugin.
3. Select the downloaded .zip and click Install Now.
4. Click Activate Plugin.

Installing the Pro Version

1. Purchase a license at nextxentech.com.
2. Download the Pro .zip from your Freemius account dashboard.
3. Upload and activate it the same way as above — it replaces the free version automatically.
4. Go to NX Designer → Account and enter your license key to activate Pro features.

Initial Setup

Go to NX Designer → Settings to configure global defaults that apply across all products.

General Settings

Display Settings

Google Fonts

Pro Settings Pro

Setting Up a Product

The designer can be enabled on any Simple or Variable product individually.

1. In your WP admin, open the product editor (Products → Add/Edit Product).
2. In the Product data panel below the editor, click the Product Designer tab.
3. Check Enable Product Designer for this product.
4. Click Select Image to choose a product mockup — this becomes the canvas background customers design on. Use a product photo, a blank template, or a transparent PNG.
5. Set the Canvas Width and Canvas Height in pixels. Match the aspect ratio of your mockup image for the best result.
6. Optionally check Require customer to design before adding to cart to enforce a design on this product specifically.
7. Click Update / Publish to save.

What the customer sees

After saving, visit the product on the storefront. You'll see a Customize Product button below the standard Add to Cart button. Clicking it opens the full-screen designer modal.

The Designer Canvas

The canvas is a full-screen modal overlay powered by Fabric.js. Customers can:

Tools (left sidebar)

Canvas toolbar (top)

Footer buttons

• Clear All — removes every element from the canvas (confirmation required).
• Save Design Pro — saves the design to the customer's account for later use.
• Add to Cart — snapshots the canvas as a JPEG thumbnail, saves the design JSON, and adds the product to the WooCommerce cart with the design attached.

Cart, Checkout & Order Display

Cart page

If Show Design Thumbnail in Cart is enabled (Settings → Display), the design preview appears alongside the product thumbnail in the WooCommerce cart table. A "Custom Design: Yes" label is also shown in the item meta.

Checkout page

The design thumbnail appears inline below the product name in the order summary on the checkout page.

Order confirmation & emails

If Show Design Thumbnail in Emails is enabled, a design preview is embedded in the WooCommerce order confirmation email sent to the customer (and the admin new-order email).

My Account → Orders

If Show Design in Order Details is enabled, the design thumbnail appears when the customer views their order on the My Account page.

Admin order screen

When viewing a WooCommerce order in the admin, the design thumbnail and a Download Design (PNG) button appear inline under the relevant order line item. Pro users also see a Download PDF button.

Google Fonts

The plugin ships with a default list of 10 Google Fonts (Roboto, Open Sans, Lato, etc.). You can customise this list at NX Designer → Settings → Google Fonts.

• Enter one font name per line exactly as it appears on fonts.google.com (e.g. Playfair Display).
• Fonts are loaded via the Google Fonts API on-demand when the designer opens — not on every page load.
• Fonts appear in the font-family dropdown in the text properties panel.

Order Designs Admin Page

Go to NX Designer → Order Designs to see every design snapshot captured at checkout.

Each row shows:

• A design thumbnail preview
• A link to the related WooCommerce order (HPOS-compatible)
• The order line item ID and product name
• The date the snapshot was captured
• Export buttons: PNG (free) and PDF Pro

Downloading a design

PNG — downloads the design thumbnail as a PNG image directly from the order designs page or from the WooCommerce order screen.
PDF Pro — generates and downloads a print-ready PDF with the design scaled to the configured paper size.

Multiple Design Surfaces Pro

Allow customers to design multiple sides of a product (e.g. Front, Back, Left Sleeve) — each with its own mockup and canvas size.

1. Open a product, go to the Product Designer tab.
2. Under Design Surfaces, click + Add Surface.
3. Give each surface a name (e.g. Front), upload a mockup image, and set the canvas width and height.
4. Repeat for each surface. Drag to reorder if needed.
5. Save the product.

In the designer, customers see a tab bar at the top of the modal for each surface. Each surface maintains its own independent canvas — switching tabs preserves the design on the previous surface.

Price Modifiers Pro

Automatically add extra cost to a product based on what the customer adds to the design.

Configure per product in the Product Designer tab under Design Price Modifier:

Price adjustments are calculated in real-time as the customer adds elements and are reflected in the cart price for the product.

Font Library Pro

Upload custom fonts (TTF, OTF, WOFF, WOFF2) and make them available to customers in the designer's font selector.

1. Go to NX Designer → Font Library.
2. Enter a Font Name (this is what customers see in the dropdown, e.g. My Brand Font).
3. Click Choose File and select a font file (TTF, OTF, WOFF, or WOFF2).
4. Click Upload Font. The font appears in the list with a live preview.

Custom fonts are served from your own server and appear in the font family dropdown in the designer alongside any Google Fonts you've configured.

To remove a font, click Delete in the font list. This removes both the database record and the uploaded file.

Clipart Library Pro

Upload SVG or PNG clipart for customers to browse and insert into their designs with one click.

1. Go to NX Designer → Clipart Library.
2. Enter a Name for the clipart item.
3. Select an SVG or PNG file and click Upload Clipart.

In the designer, customers open the Clipart panel (left sidebar), can search by name, and click any item to place it on the canvas.

Design Templates Pro

Create pre-built design starting points that customers can load into the canvas as a starting point.

Creating a template (admin)

1. Go to NX Designer → Templates.
2. Enter a template name and optionally upload a thumbnail image.
3. Paste the Fabric.js JSON for the template design into the JSON field, or use the designer on a product page, click Save Design as a template.
4. Click Save Template.

Customers can also save their own work as a template directly from the designer if they have the manage_woocommerce capability (i.e. shop managers and admins).

Using templates (customer)

In the designer, clicking the Templates tool opens a grid of available templates with thumbnail previews. Clicking one loads it into the canvas (a confirmation prompt appears if the canvas is not empty).

Print-Ready PDF Export Pro

Generate a print-ready PDF from any order's design snapshot directly from the admin.

Manual download

Go to NX Designer → Order Designs and click the PDF button on any row. You can also click Download PDF from the WooCommerce order screen.

Auto-email print files

Enable Auto-email print files to admin on order in Settings → Pro Settings. When a new order containing a designer product is placed, the plugin automatically sends an email to the store admin with download links for all design files in that order.

PDF settings

Configure the paper size (A4, A3, Letter, Legal) and bleed margin (mm) in Settings → Pro Settings. The design is centred on the page and scaled to fit within the printable area.

Saved Design Library Pro

Logged-in customers can save, name, and re-use their designs from their My Account page.

Saving a design

In the designer, the customer clicks the Save Design button in the footer. A prompt asks for a design name. The design is saved to wp_nxd_designs linked to the customer's user account.

My Account → My Designs

Customers visit My Account → My Designs to see all their saved designs with thumbnails. From there they can:

• Edit & Re-order — opens the product page with the design pre-loaded and the designer auto-opened.
• Delete — removes the saved design record.

Design sharing

Customers can generate a shareable link for any saved design. Anyone with the link can open the product page with that design pre-loaded. Share tokens are stored in a WordPress option and do not expire.

QR Code Tool Pro

Customers can generate a custom QR code and place it directly on the canvas.

1. In the designer, click the QR Code button in the left sidebar.
2. Enter a URL or any text in the input field.
3. Click Generate. The QR code is rendered as a canvas image object.
4. Resize and position it like any other element.

QR codes are generated entirely in the browser using the bundled qrcode.min.js library — no external service is called.

REST API Pro

The Pro version exposes a REST API at /wp-json/nextxen-designer/v1/ for headless integrations and third-party tools.

All endpoints require authentication. Use WordPress application passwords or the X-WP-Nonce header from a logged-in session. Endpoints that modify data require the manage_woocommerce capability.

Designs

Order Designs

Example: fetch designs with application password

curl -u "admin:xxxx xxxx xxxx xxxx xxxx xxxx" \
  https://yoursite.com/wp-json/nextxen-designer/v1/designs

White Label Pro

Hide NextXen Designer branding from the WordPress admin — ideal for agencies delivering client sites.

Enable White Label at NX Designer → Settings → Pro Settings.

When active:

• The admin sidebar menu label changes from NX Designer to Product Designer.
• All browser tab page titles drop "NextXen Designer" in favour of "Product Designer".
• The dashboard heading shows Product Designer without the version badge.
• The Documentation external link is hidden from the dashboard.

Settings Reference

All settings are stored in a single WordPress option: nxd_options (array). You can read any value in PHP with the helper function:

nxd_get_option( 'button_text', 'Customize Product' );

Hooks & Filters

NextXen Designer exposes hooks for developers to extend behaviour without modifying plugin files.

Actions

Filters

Example: add a custom font via filter

add_filter( 'nxd_custom_fonts_for_designer', function( $fonts ) {
    $fonts[] = [
        'name' => 'My Brand Font',
        'url'  => get_template_directory_uri() . '/fonts/my-brand-font.woff2',
    ];
    return $fonts;
} );

Uninstalling

To completely remove the plugin and all its data:

1. Go to Plugins in your WP admin.
2. Deactivate NextXen Designer.
3. Click Delete.

The included uninstall.php automatically removes:

• Database tables: wp_nxd_designs, wp_nxd_order_designs, wp_nxd_assets
• Plugin options: nxd_options, nxd_db_version, nxd_share_tokens
• All product meta (_nxd_enabled, _nxd_settings) across all products

Frequently Asked Questions

The designer doesn't open when I click "Customize Product".

Check the browser console for JavaScript errors. Most common causes: a JavaScript conflict with another plugin (try disabling them one by one), or Fabric.js failing to load (check the Network tab — fabric.min.js should return HTTP 200).

Cart thumbnails are not showing.

Make sure Show Design Thumbnail in Cart is enabled in Settings. Also confirm you're using the classic WooCommerce cart shortcode — the Block cart is not currently supported.

The design thumbnail is black / blank.

The thumbnail is generated on the client side as a JPEG using the canvas toDataURL() method. This fails if the canvas contains cross-origin images (images loaded from a different domain). Ensure all mockup images are served from your own domain.

Order design shows "order number 0".

This means the snapshot was saved before the order item had a database ID. Update the plugin to v2.0.0+ which uses a two-hook checkout pattern to ensure order item IDs are always valid when the snapshot is created.

PDF download returns an error.

PDF generation requires the design thumbnail to be a JPEG-encoded data URI or a valid image URL reachable from your server. Check that the PHP GD or Imagick extension is enabled. If the thumbnail is a PNG or WebP, the plugin converts it to JPEG using GD — this requires imagecreatefromstring() to be available.

Can I use this with a page builder (Elementor, Divi, Bricks)?

Yes, as long as the page builder renders the standard WooCommerce single product template (which includes the woocommerce_after_add_to_cart_button hook). Most do. Custom product templates that omit this hook will not show the Customize Product button.

Is this compatible with WPML or Polylang?

All user-facing strings use the nextxen-designer text domain and can be translated with any i18n plugin. The plugin doesn't generate product or post content, so no additional WPML configuration is required.

How do I add the designer to a custom post type?

The designer is currently tied to WooCommerce products. The frontend button renders via woocommerce_after_add_to_cart_button and the overlay via woocommerce_before_single_product. Custom post type support would require a custom template integration.

Getting Support

When reporting a bug, please include:

• Plugin version, WordPress version, WooCommerce version, and PHP version
• Browser and OS
• Steps to reproduce the issue
• Any JavaScript console errors (press F12 → Console)
• Any PHP errors from your debug.log