Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. Every screenshot below is a live capture from the nbdesigner.cmsmart.net demo running that version — not a mockup.

In short

  • Outcome: Buyers design their own product on your WooCommerce store — text, art, size, quantity — and see the final price before they add it to the cart, instead of emailing you for a quote.
  • How it works: Cmsmart Product Designer (NBDesigner) adds a browser-based editor, a rules-based price list, and an order-side approval and print-ready PDF workflow on top of your existing catalog.
  • What it takes: A WooCommerce store with the plugin on the products you choose, a short setup pass on templates and pricing, and — for anything the plugin doesn't do out of the box — a scoped custom-development project with Cmsmart.

What's the real cost of handling product customization by hand?

Cmsmart Product Designer replaces manual quoting with a self-serve flow: the buyer picks options, watches the price update, and builds or uploads their art directly on the product page, so your team stops re-typing the same request into an email or spreadsheet.

Most of the stores we work with recognize this list before we finish reading it to them:

  • Every custom order starts as a conversation. A buyer emails a logo and a size, someone on your team re-keys it into a quote, and the buyer waits — often overnight — before they can even pay.
  • Pricing is a spreadsheet, not the product page. Size, material and quantity combinations live in someone's head or a price sheet, so the website price and the real price only match by luck.
  • Reprints eat the margin. A file arrives in the wrong size, color mode or resolution, and the shop finds out after it's already on press.
  • Approvals happen over email threads. Nobody can say, at a glance, which proof the customer actually signed off on.
  • The cart abandons before the buyer ever sees their design. Without a preview, "customizable" is just a word on the product page.

What would an always-on design studio look like on your site?

With Cmsmart Product Designer, the product page itself becomes the design studio: a buyer opens it at any hour, picks or uploads artwork, watches the price recalculate as they change options, and leaves with a finished design attached to their order — no staff member in the loop until it's time to print.

Product customization software on a WooCommerce product page, with a Start and upload design button and live price
The product page is the entry point: price, options and the "Start and upload design" button sit together, no separate quote step.

Example scenario. A buyer opens your store at 10pm, picks a product, drags their own artwork and a line of text onto the design area, watches the price update as they bump the quantity, and checks out. By the time your team logs in the next morning, the order is sitting in "Awaiting review" with the design already attached — no email to find, no file to chase.

Letting buyers see and shape their own design before they pay isn't a nice-to-have for the segment that wants it: in a Deloitte-commissioned consumer survey, 36% of shoppers said they were interested in personalized products, and 71% of that group said they would pay a premium for them (Deloitte, 2015).

How does Cmsmart's product customization software turn requests into a repeatable system?

Cmsmart Product Designer is built from a small set of connected pieces — a browser editor, a price list, an approval step and a print-ready output — so every product you turn it on for follows the same repeatable path from design to production instead of a one-off process per order.

The building blocks, in the order a design actually moves through them:

  • Storefront entry: the product page itself, with configurable options and a "Start and upload design" or "Design Online" button — no separate quote form.
  • Browser-based designer: templates, text, layers, photos and clipart that a buyer uses without installing anything.
  • Price list: Printing Options turn choices like size, quantity or material into a price that updates live on the product page — see our price matrix walkthrough for dimension-based pricing.
  • Order-side approval: the Customer Design box on the order screen, where staff accept or decline artwork and notify the buyer from one place.
  • Print-ready output: Create PDF on demand, or automatic export through the Cmsmart Cloud renderer once an order reaches the status you choose.
  • Product Manager: a single screen to turn the designer and templates on or off per product, across your whole catalog.
Cmsmart Product Manager listing 34 designer-enabled WooCommerce products with templates, base price and status
Product Manager: every product with the designer turned on, its templates, base price and status, in one list.
Cmsmart Printing Options list controlling which products carry paid, priced options
Printing Options: each row is a priced option group applied to specific products or categories.
Customer Design approval box on a WooCommerce order with accept, decline and notify-mail controls
The Customer Design box: accept or decline the artwork and send the buyer a note, from the order screen.

Cmsmart insight: most of the reprint disputes we see trace back to a design that was approved, then quietly edited before it went to press. Lock the artwork the moment it's approved — don't rely on staff remembering not to touch it. Since 2.17, Cmsmart refuses any further save on an approved order item and shows a clear message, whatever link or editor tab the save comes from.

StepManual processCmsmart Product Designer
Getting a priceBuyer emails specs; staff calculates it by handPrinting Options price the combination live on the product page
Submitting artworkBuyer emails a file or describes what they wantBuyer designs in the browser or uploads the file types you allow
Reviewing the designBack-and-forth emails, no single source of truthCustomer Design box: accept, decline and notify, in one thread per order
Locking the final fileAnyone can re-save or replace the file after approvalApproved-artwork lock refuses further saves on an approved design
Producing the print fileStaff rebuild a press-ready file by handCreate PDF or automatic export build a print-ready PDF that matches the order
Video thumbnail for Cmsmart's WooCommerce product customization and web-to-print UI demo
Video: Modern WooCommerce product customization and web-to-print UI (Cmsmart on YouTube)

What's the ROI of giving buyers this much control?

Cmsmart Product Designer turns quoting, proofing and file prep into steps the system handles on its own, so the business value shows up as fewer staff hours per order and fewer reprints rather than a single headline percentage you can promise every store.

WooCommerce still runs roughly a third of the world's tracked online stores, so a self-serve designer built for it reaches buyers who are already shopping on that platform (StoreLeads data via Redstag Fulfillment, 2025). The category itself is growing fast: the global print-on-demand market was valued at $10.8 billion in 2025 and is projected to reach $57.5 billion by 2033 (Grand View Research, 2025) — stores that make customizing easy now are positioning for that growth rather than catching up to it later.

BenefitHow it shows up in your businessKPI to track
Fewer quote emailsBuyers see the price the moment they change an optionQuote-to-order time; cart abandonment on configurable products
Fewer reprintsThe print-ready PDF matches the order's size, options and placement automaticallyReprint rate; cost per reprint
Faster sign-offAccept/decline and buyer notes live in one Customer Design box, and the artwork lock stops late editsAverage revision cycles per order
Less manual setup per SKUProduct Manager turns the designer on per product or category instead of rebuilding pagesDesigner-enabled SKUs added per month

Rough-cut ROI worksheet — use your own numbers:

  • Manual quotes handled per month × minutes per quote ÷ 60 = staff hours spent quoting
  • Staff hours spent quoting × your fully loaded hourly cost = monthly cost of manual quoting
  • Reprints per month × average cost per reprint = monthly cost of file and approval mistakes
  • Compare both totals against the setup time, and any custom-development cost, before you commit
Mobile WooCommerce product page showing the customization entry point on a phone
The same product page on a phone — useful when your buyer is a freelancer finishing a job between meetings, not just a desktop shopper.

How do you set up product customization on your WooCommerce store?

Setting up Cmsmart Product Designer means turning the designer on for a product, building its price list, and configuring upload and output rules once — then every order for that product follows the same design-to-print path automatically.

  1. Install and activate Cmsmart Product Designer, and confirm the version shown on the WordPress Plugins screen.
  2. Open Product Manager in the Cmsmart admin menu and turn the designer on for the product you want buyers to customize.
  3. Attach a starting template to the product, or leave it blank so buyers design from an empty canvas.
  4. Open Printing Options and add a priced option group (size, material, quantity breaks) for the product or category — the price recalculates on the product page as soon as a buyer changes an option.
  5. Under Settings → Upload design, set the allowed file types (for example jpg,pdf,psd) and the maximum upload size for buyers who bring their own artwork instead of designing from scratch.
  6. Under Settings → Output, turn on Auto export design to PDF and choose the order status that should trigger it, so a print-ready PDF renders automatically once an order reaches that status.
  7. Preview the product page as a buyer: pick options, choose Start and upload design or Design Online, build the design in the browser editor, and click Process to save it as "Your artwork" before adding it to the cart (our frontend walkthrough covers this step in more depth).
  8. When the order arrives, open it in Cmsmart admin — the timeline shows Placed → Paid → Awaiting review → In production, and the Customer Design box lets you accept the artwork or send the buyer a note.
  9. Use Create PDF on the design's detail screen to generate a print file on demand, or check the Print-ready PDF status panel to see when the cloud renderer has already built one, with a Regenerate button if anything changes.
Cmsmart browser-based online designer open with a template loaded on the canvas
The browser-based designer with a starting template already on the canvas — no software to install.
Adding a text layer in the Cmsmart online product designer
Adding text on top of a template — fonts, layers and the canvas ruler are all buyer-facing controls.
WooCommerce order detail screen showing the production timeline, line items and design file for a customized order
Order detail: the production timeline, the line item's design file, and a Download print PDF shortcut.
Print-ready PDF status panel showing Ready, rendered by the cloud renderer, with a Regenerate button
Print-ready PDF status: Ready, rendered by the Cmsmart Cloud renderer, with Regenerate on hand if the design changes.

What does custom development add on top of the standard product designer?

Cmsmart extends the Product Designer with custom development whenever a store's workflow goes further than templates, options and a price list — from per-brand design tools to pricing engines and system integrations — so the designer fits how your business already runs instead of the other way around.

Four extensions we build most often for stores with more than one kind of buyer:

  • Agencies and multi-brand sellers. One company, several client brands, each needing its own look without duplicating the whole store. Cmsmart builds white-labeled designer skins and separate template libraries per brand inside a single WooCommerce backend.
  • Businesses running an ERP, MIS or CRM. Specs, approvals and production schedules already live in another system. Cmsmart builds API integrations that push finished designs and order data into it automatically, instead of someone re-typing them.
  • B2B buyers who negotiate pricing. Standard Printing Options can't express tiered, negotiated or purchase-order-approval pricing. Cmsmart builds custom pricing engines on top of the designer for exactly this case.
  • 3D on mobile and complex configurators. The standard designer already includes a per-product 3D preview on desktop. On mobile, or for multi-part products that need a full 3D configurator rather than a single preview, Cmsmart builds that layer as custom development on top of the standard canvas.

These extensions sit alongside the rest of a web-to-print setup — pricing, proofing and production — not instead of it. Every custom build follows the same delivery model: discovery, solution design, sprints, QA, launch and ongoing support — the same process behind our published ecommerce projects. Talk to an ecommerce expert about which of these fits your store before you scope anything.

Get a custom product designer quote

Why work with Cmsmart on your product customization project?

Cmsmart has built and supported WooCommerce product customization as a Netbase JSC division since 2012, with the Product Designer plugin and the custom development behind it delivered by the same team — so the people who set up your designer are the same ones who can extend it.

  • 6,300+ client projects and 4,600+ projects delivered since 2012, across 80+ countries.
  • 1,800+ live stores running Cmsmart products right now, including 500+ custom development projects since 2012.
  • Rated 4.2 on Trustpilot (404 reviews).

As one buyer put it in a verified Trustpilot review: "NBDesigner has lots of variable options, including colour and image swatches and pricing tables and much much more." — Ray Barlow, Trustpilot.

See related work on Cmsmart's project case studies, or start with the Cmsmart Product Designer plugin page if you haven't installed it yet.

Frequently asked questions

Does every order get a print-ready PDF automatically?

Yes, once Auto export design to PDF is turned on in Output settings. Cmsmart renders a print-ready PDF — through the Cmsmart Cloud renderer or your own server — when the order reaches the status you choose, and the order's Print-ready PDF status panel shows Ready, Rendering or Failed with a Regenerate button.

Can a customer still edit their design after we've approved it?

No. Once an order item is approved, Cmsmart refuses further saves on that design and shows a clear message, whatever link or editor tab the save comes from. A developer can widen this behavior with a filter if your workflow needs it.

Can Cmsmart connect the designer to our ERP, CRM or print MIS?

Not out of the box — that's custom development. Cmsmart builds API integrations between the designer, your order data and whatever system runs your production floor; see the custom development section above.

Does the online designer work on phones and tablets?

Yes. The product page and the browser-based designer are responsive, so a buyer — or your own design team — can start on a laptop and finish on a tablet.

How long does it take to set up on an existing WooCommerce store?

Turning the designer on for a handful of products and building a price list usually takes a few hours once your templates and print options are ready. Store-wide rollouts across a full catalog, or custom pricing rules, are scoped as a short project.

What if the plugin doesn't have the option or workflow we need?

That's where custom development comes in. Cmsmart extends the designer, adds new printing-option types, or connects it to your existing systems — see the custom development section above for the kinds of projects we take on.

Written by

Cmsmart Product Designer Plugin Engineer

Builds and supports the Cmsmart Product Designer (NBDesigner) for WooCommerce.

  • NBDesigner
  • WooCommerce
  • Product customizer
  • Release notes
More from this expert →