Install the NBDesigner Plugin for WooCommerce (2.17)

Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. Requirements are read from the plugin README and header; every screen below is from a live 2.17.0 install.

In short

  • The outcome: your WooCommerce store lets a customer design their own product and pay, and the order arrives at your end with the artwork already attached.
  • How it works: install the NBDesigner plugin, connect a license in the setup wizard, tick Enable Design on a product, and the storefront gets a design button; orders then flow into Cmsmart > Orders with a print-ready PDF.
  • What it takes: WordPress 5.6+, PHP 8.0+, WooCommerce 8.0.0+ and MySQL 5.7, plus about one working session for your first product. Cmsmart can do the whole setup for you.

Installing the NBDesigner plugin on a WooCommerce store changes what "order received" means for a personalized product. A buyer designs their own invitation, business card or t-shirt on the product page, approves the preview and checks out, and your team opens the order to find a finished design file attached, not an email thread. This guide covers what the plugin needs, how to install and activate it end to end, and what the first order looks like once it is live.

Without it, most shops still run personalization by hand: a customer emails a logo, someone mocks up a proof in an image editor, the file goes back and forth for approval, and the order sits in a queue while a staff member rebuilds what the customer could have built themselves. This guide, and the plugin it covers, exist to close that gap.

What does a manual proofing process cost your print business?

Every personalized order that goes through email costs staff minutes: reading the request, building a mock-up, waiting for approval, and re-keying the final file into production. Cmsmart Product Designer (NBDesigner) moves that work onto the WooCommerce product page, so the customer designs and approves their own artwork and your team starts from a file they already confirmed.

You are not alone in carrying this cost on WooCommerce: the platform itself says it powers 4M+ online stores, representing 31% of the top one million ecommerce sites (Store Leads data, as published by WooCommerce; accessed 2026-10-05) — most of them still without any way for a shopper to design before they buy.

  • Manual proofs. A human has to open the file, check it against the product's safe zone, and send a preview back before the order can move.
  • Slow quoting on custom work. Pricing a one-off design by hand adds a reply cycle most buyers won't wait for.
  • Reprints from bad files. Art without bleed or the wrong color mode (RGB instead of CMYK) looks fine on screen and wrong off the press.
  • Abandoned carts. A buyer who can't see what they're ordering before paying often leaves instead of emailing a file and waiting — checkout abandonment already runs high across ecommerce in general (70.22% on average, compiled from 50 studies, Baymard Institute, 2025), and a design step a buyer can't preview only adds friction.
  • Staff time spent on repeat work instead of production, purchasing or sales.

A simple way to size this: personalized orders per month × minutes a staff member spends per proof × hourly labor cost. Put your own numbers in; the point is to know what the status quo already costs before you compare it to a one-time setup.

What would a self-service design-and-order flow look like?

Picture a buyer opening your store at 10pm, designing a door hanger with their own logo, approving the preview and paying before bed. Cmsmart Product Designer captures that design with the order as it's placed, so your morning queue already holds a production-ready file instead of an email you still have to answer.

Example scenario. A small print shop sells door hangers and business cards online. Today, a buyer clicks Start and upload design on the product page, picks a template, swaps in their own wording, and watches the price update as they resize the design area. They add it to the cart, see their exact artwork in the order review at checkout, and pay. By the time the shop opens, the order is sitting in Cmsmart > Orders with the design attached — no inbox, no back-and-forth, no guessing what the customer meant.

How would you like to design your product chooser with Upload a full design and Design here online options
The first click of that scenario: a buyer picks "Upload a full design" or "Design here online" before the editor ever opens.

How does Cmsmart Product Designer connect design, order and production?

Cmsmart Product Designer wires four things together on a standard WooCommerce product: a storefront design tool, your pricing and print options, order capture, and a print-ready PDF for your production team. What exists in the plugin today and what Cmsmart builds as a custom layer on top are two different things, and this guide marks each one.

  • Storefront designer. A "how would you like to design" chooser (upload a finished file, or design online with templates, text, cliparts and photos) opens from the product page. In the plugin today.
  • Pricing and print options. Printing Options and a price matrix calculate the line price from the choices a buyer makes. In the plugin today.
  • Order capture. The design is saved to the cart line item and carried through to checkout and the order record, with no separate upload step for the buyer. In the plugin today.
  • Approval and production output. Your team approves or declines the artwork from the order screen, then Create PDF produces the print-ready PDF that matches the order. Once a design is approved, Cmsmart locks it on the server (the approved-artwork lock, 2.17), so a customer or a stray tab can't quietly change the file production already saw. In the plugin today.
  • Your pricing rules, your MIS, your brand. Custom price formulas, ERP/MIS sync and brand-specific editor tools are not shipped features — Cmsmart builds them as a project on top of the plugin.
NBDesigner online designer open on a product with a template on the canvas, left toolbar for templates, text, cliparts and photos, and a Process button
The storefront designer: a buyer customizes a template, then clicks Process to send it back to the product page.
Create PDF tab on a live order showing the print-ready PDF status as Ready, rendered by the cloud renderer
On the order: Create PDF reports the print-ready PDF that matches the order as Ready, rendered by Cmsmart Cloud.
Printing Options list in wp-admin showing option sets such as Business card, T-shirt and Advanced Options with their assigned products
Printing Options: each option set (and its price matrix) is reusable across every product you assign it to.
Customer Design box on a WooCommerce order with the artwork checked and Accept plus GO selected to approve it
Approving from the order screen: tick the design, choose Accept, click GO — the approved-artwork lock takes it from there.
Plugin out of the box (2.17.0)Custom build by Cmsmart
StoreYour existing WooCommerce themePrint-shop store installed and configured from a preset, products and pages ready
EditorModern layout, templates, text, cliparts, photos, layersBrand-specific tools, templates and product rules for your catalogue
PricingPrinting options and price matrixPricing engine for your own formulas, MOQ and B2B price lists
ProductionPrint-ready PDF, file sync to FTP/SFTP/Dropbox/S3/Google CloudSync with your MIS, ERP or production queue

What's the business value of NBDesigner once it's running?

Installing Cmsmart Product Designer turns a WooCommerce product into a self-service design-and-order flow: fewer manual proofs, a shorter path from visit to paid order, and production input that arrives as a file instead of an inbox. Track it with ordinary store metrics, not a new dashboard.

Cmsmart Orders screen listing web-to-print orders with their production status, payment and totals
Cmsmart > Orders: every design order with its production status, no inbox required.
Mobile WooCommerce product page with the Start and upload design button above Add to cart
The same design button on a phone: a personalized product stays orderable outside office hours.
Print-ready PDF status panel showing Ready, rendered by the cloud renderer, with a Regenerate print-ready PDF button
The print-ready PDF that matches the order, rendered and timestamped by Cmsmart Cloud — the file your production team actually opens.
BenefitHow it shows up in your businessKPI to track
Fewer manual proofsCustomers design and preview themselves instead of emailing filesProof emails per order; staff minutes per order
Faster ordersDesign, price and checkout happen in one visitTime from first visit to paid order
Cleaner production inputArtwork and a print-ready PDF are stored with the order, not in an inboxOrders held for missing or wrong files
A product you can sell 24/7Personalized products are orderable outside office hoursShare of personalized orders placed outside working hours

ROI worksheet (use your own numbers):

  • Hours saved per month = personalized orders/month × minutes saved per order ÷ 60
  • Labor value saved = hours saved × your fully-loaded hourly rate
  • Reprint cost avoided = (current reprint rate − expected reprint rate) × orders/month × cost per reprint
  • Compare the total against the one-time setup and the plugin's license cost.

How do I install and configure the NBDesigner plugin on WooCommerce?

Upload the plugin .zip under Plugins > Add New, activate it, and follow the Cmsmart setup wizard: connect a license (or start the free 30-day trial), pick your dimension unit, keep the default NBDesigner pages, then tick Enable Design on a product. The steps below use a live 2.17.0 install.

RequirementMinimum
WordPress5.6
PHP8.0
WooCommerce8.0.0
MySQL5.7
Plugin dependencyWooCommerce must be active

Back up your site first, as with any plugin install. If you are running a release older than 2.15.0, update now: 2.16.1 closes an image-import route that let an unauthenticated visitor upload an executable file, and tightens the script-blocking rules in the upload folders. Nginx servers ignore .htaccess, so add the equivalent rule on Nginx yourself.

  1. Upload. WordPress admin > Plugins > Add New > Upload Plugin, choose the plugin .zip, click Install Now.
  2. Activate. Click Activate Plugin. A new Cmsmart menu appears, and a fresh install opens the setup wizard.
  3. Connect a license. Enter your store email and click Activate my license: it finds an existing Cmsmart license for your store or starts a 30-day trial automatically, with no key to paste. A manual key-paste field remains if you already have one.
  4. General setup. Pick the dimension unit (cm, in, mm, ft or px) used to calculate the design area, and the font subset for your language.
  5. NBD Pages. Keep Create default NBDesigner pages ticked, then finish on the Cmsmart overview.
WordPress Plugins screen showing the active NBDesigner plugin, version 2.17.0, requiring WooCommerce
After activation: the plugin row confirms the version and the WooCommerce requirement.
Video thumbnail for how to activate a license key on the NBDesigner WooCommerce plugin
Video: how to activate your license key (Cmsmart on YouTube).

If you skip the wizard, activate later under Cmsmart > License. The same area also opens Cmsmart Cloud, one admin page with Overview, AI Tools, Storage and Billing tabs for the plugin's AI preflight tools, managed design storage and token balance — none of that is required to take your first order. Once orders are flowing, tune the back-end options with the NBDesigner settings guide.

Enable the designer on a first product:

  1. Go to Products and edit a product.
  2. In the Setting Cmsmart box, tick Enable Design. Optionally tick Enable Upload Design and Enable Upload Without Design.
  3. Set the Product area and Design area (width, height, top, left), and choose the Modern editor layout (Classic is deprecated).
  4. Update the product and open it on the storefront: a design button now opens the editor for your customers.
WooCommerce Edit product screen with the NBD options box and the Setting Cmsmart box showing Enable Design and Enable Upload Design ticked
The NBD options and Setting Cmsmart boxes at the bottom of a WooCommerce product edit screen.
Storefront product page with design enabled, showing a Start and upload design button next to the price
What a buyer sees once design is enabled: a start-design button beside Add to cart.
Production specs panel for a product showing bleed area in mm, print resolution in DPI and color profile fields
The fields behind that insight: bleed, print resolution and color profile are set per product, not guessed from the photo.

Cmsmart insight: set the design area to the real printable area of the product, with bleed and safe zone, before you launch — not a rectangle copied from the product photo. It looks fine on screen and produces files your printer has to fix by hand. Check it once per product, with your printer's template open beside you, before the first real order.

If something does not work:

  • Warning about max_input_vars on the Printing Options screen: raise that PHP setting so large option groups save.
  • Warning about max_file_uploads in the product box: raise it so multi-side designs save.
  • JPG export needs the PHP Imagick extension; CMYK/ICC conversion needs Imagemagick with lcms2.
  • Status stuck on Expired or LITE after renewing: use Re-sync licence on the License page — the plugin caches license state for up to 6 hours, and this forces a fresh check.

What can Cmsmart build beyond the plugin?

The plugin covers design, pricing and order capture. Cmsmart, a custom development partner since 2012, builds what your business needs on top of it: a ready print-shop store, branded editor tools, your own pricing rules, and production integrations, delivered as a project with discovery, design, sprints, QA, launch and support.

  • Done-for-you install and preset. Business reason: launch without learning the admin yourself. We install, configure and load a print-shop preset (store setup service).
  • Editor customization. Business reason: a design experience that fits your products and brand, not a generic toolset. We build custom tools, templates and layouts.
  • Production integration. Business reason: no re-keying between store and print floor. We connect orders and design files to your MIS, ERP or production queue.

How we deliver: discovery, solution design, sprints, QA, launch and support. See the ecommerce project delivery model and our web-to-print solutions.

Get my store set up by Cmsmart

Why work with Cmsmart?

Cmsmart has built ecommerce and web-to-print stores since 2012 as a division of Netbase JSC, with 6,300+ client projects and 500+ custom development projects behind it. Beyond the published figures, real installs on live stores are where the plugin and the setup advice in this guide actually come from.

Cmsmart has built ecommerce and web-to-print stores since 2012 as a division of Netbase JSC: 6,300+ client projects and 500+ custom development projects (WorkSuite project records, Sep 2026), rated 4.2 on Trustpilot (404 reviews). See real work on our projects page.

“We have had the NB Designer plugin installed for three years and have experienced absolutely no problems during that time,” writes a verified Trustpilot reviewer (Web Developer, GB, 2026 review).

Frequently asked questions

Does NBDesigner work without WooCommerce?

No. WooCommerce is a declared required plugin, and the designer attaches to WooCommerce products.

Does it support HPOS order storage?

Yes. Order queries handle both WooCommerce's High-Performance Order Storage and the legacy post store, and the Customer Design box loads on the WooCommerce Orders screen (fixed in 2.17.0).

Where do I find my license key?

In the email sent when you start the trial or buy, and in your Cmsmart Dashboard under Downloads & license key. Most new installs never need to paste one: Activate my license starts the trial automatically.

Which editor layout should I choose?

Modern. The plugin marks it recommended and has stopped adding features to Classic.

Can Cmsmart install and configure it for me?

Yes. Cmsmart offers store setup and preset installation as a service; request a quote with your store URL and the products you want to personalize.

Can it connect to our MIS or ERP?

Not out of the box. Cmsmart builds that connection as a custom project once your order and file flow is running.

Launch personalized products without the setup work

Tell us your products and your print workflow. We install, configure and customize Cmsmart Product Designer so your first designed orders arrive ready for production.

Plan my store setup Or start the free 30-day trial