WooCommerce Product Designer Setup for Every Product

Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. This guide covers the admin side: how a store owner configures a WooCommerce product so customers can design it, including design area, price matrix and print-ready output.

In short

  • Outcome: turn any WooCommerce product into a design-ready one in minutes, with the right print area, pricing and output settings, instead of hand-coding a one-off page.
  • How it works: Cmsmart Product Designer (NBDesigner) adds a Designer Canvas, print options and output rules to the standard WooCommerce product editor, so the storefront, the price matrix and the print-ready PDF all read from one configuration.
  • What it takes: a product with a template or blank canvas, a defined print area and resolution, a priced option set, and an output profile (bleed, CMYK, watermark) you set once per product type.

Every new SKU a print shop adds means measuring the print area, pricing the options, and making sure the PDF reaching the press matches what the customer saw. A WooCommerce product designer setup from Cmsmart turns that into a repeatable process inside the product editor, so a manager adds a design-ready mug, tote bag or business card without a developer.

What does it cost to get products ready for online design by hand?

Cmsmart Product Designer replaces ad-hoc product setup with one configuration screen per product, so a store stops losing staff hours to mismatched print areas, hand-written price rules and PDFs that don't match the design preview the customer approved before checkout.

  • Design area guesswork. Without a defined print area and safe zone, artwork gets placed off-center or bleeds past the trim line, and the shop only finds out when a reprint is needed.
  • Manual price rules. Quantity breaks, size upcharges and add-on options that live in a spreadsheet or a developer's custom code are slow to change and easy to get wrong at checkout.
  • Inconsistent output. One product exports sRGB, another CMYK, a third has no bleed line — the press team spends time fixing files instead of printing them.
  • Staff time per SKU. A print shop adding 20 new product variants a month pays for that setup time every month, whether or not a developer is on retainer.
  • Slow catalogue growth. If every design-enabled product needs a custom build, the catalogue grows only as fast as the dev queue allows.

A rough formula for the status quo: products added per month × setup hours per product × your loaded hourly rate = the monthly cost of manual product setup, before counting a single reprint.

What would it look like if every product were design-ready in minutes?

With Cmsmart Product Designer, a manager opens the product editor, turns on the Designer Canvas, sets the print area and price matrix, and the product is live with the same proofing and print-ready pipeline as the rest of the catalogue — no separate build per SKU.

Example scenario. A promotional-products reseller wants to add a new tote bag style before a trade show. A manager duplicates an existing bag's designer configuration, uploads the new mockup, adjusts the print area to the new bag's dimensions, and sets a price matrix for small/medium/large. The product goes live the same afternoon. The first order's print-ready PDF is generated automatically and waiting in the order detail screen the next morning — no one on staff touched a CMYK setting or a PDF export tool.

How does Cmsmart turn a plain WooCommerce product into a design-ready one?

Cmsmart Product Designer adds a Designer Canvas, Printing Options and Output tabs to the WooCommerce product editor, so design area, pricing and print output are configured in the same place a merchant already manages stock and price — in the plugin today, with custom work available for anything store-specific.

The building blocks, and what's built-in versus what Cmsmart adds as custom development for a specific catalogue:

  • Product & production specs (in the plugin) — material, bleed area, print resolution (DPI) and color profile live on the product's general settings, next to price and stock.
  • Designer Canvas toggle (in the plugin) — a one- or two-sided canvas is switched on per product; the full design area, templates and layers are configured in the Designer config editor.
  • Printing Options & price matrix (in the plugin) — reusable option sets (size, material, quantity breaks) are built once and applied to one or many products or categories.
  • Upload & output rules (in the plugin) — allowed file types, minimum DPI, watermarking, bleed display and CMYK/ICC export are set centrally and apply to every design-enabled product.
  • Catalogue-specific pricing logic, ERP-fed product data, or a bulk product importer (custom development) — when a catalogue is too large or too specific for manual setup, Cmsmart builds the automation around the plugin instead of asking staff to configure hundreds of SKUs by hand.
WooCommerce product designer setup screen showing production specs and the Online Designer toggle in Cmsmart Product Designer
Material, bleed, DPI and color profile sit next to the Online Designer toggle on the product's own settings screen.

Cmsmart insight: In our delivery work, most early reprints trace back to a design area that doesn't match the product's real print dimensions, not to anything the customer did wrong in the editor. Measure the finished product first, then set the design area and bleed from that measurement — not the other way round.

At a glance, products enabled for the designer and how many have templates attached are summarized on one screen, which is the fastest way to audit a growing catalogue:

Cmsmart product manager list showing designer-enabled products, templates and status for a WooCommerce store
The product manager lists every designer-enabled product with its template count and status, useful once a catalogue passes a few dozen SKUs.

What's the business value of setting products up correctly?

Cmsmart Product Designer turns product setup from a developer task into a repeatable admin workflow, so the business value shows up as fewer reprints, faster catalogue growth, a consistent price matrix and a print file the press can trust without manual checking.

BenefitHow it shows up in your businessKPI to track
Fewer reprintsDesign area and bleed match the physical product from the first order, not after a customer complaintReprint rate per 100 orders
Faster catalogue growthA manager adds a new design-ready SKU without a dev ticketNew design-enabled SKUs per month
Consistent price matrixSize, material and quantity pricing is built once and reused across similar productsTime to price a new SKU
Print-ready confidenceOutput settings (CMYK, DPI, bleed) apply the same way to every product, so the press team stops re-checking filesFiles rejected by production

ROI worksheet (use your own numbers):

  • Setup time saved per SKU (old process minus Cmsmart setup) × new SKUs added per month × your loaded hourly rate = monthly staff-time saved.
  • Current reprint rate − expected reprint rate after correcting design area and output settings, × average cost per reprint × orders per month = monthly reprint cost avoided.

Cart abandonment is a real cost worth weighing against setup time: the Baymard Institute's running average across 50 studies puts cart abandonment at 70.22%, and a product page where the design preview or pricing looks broken because of a setup mistake gives a hesitant buyer one more reason to leave.

How do you set up a WooCommerce product for online design in NBDesigner 2.17?

Cmsmart Product Designer walks a merchant through product specs, the Designer Canvas, printing options and output settings in the same WooCommerce product editor already used for price and stock, so a new design-ready SKU can go live in one sitting without a separate build.

  1. Install and activate Cmsmart Product Designer (NBDesigner) 2.17.0 or later on a WooCommerce store, then confirm the active version under Plugins.
  2. Open the WooCommerce product you want to make design-ready (or add a new one) and fill in the standard name, price and category fields first.
  3. In the product's production specs, set Material, Bleed area, Print resolution (DPI) and Color profile to match how the item is actually produced.
  4. Turn on Designer Canvas for the product and choose a one-sided or two-sided layout.
  5. Open Designer config for the product to set the exact print/design area, add a starter template if you have one, and confirm the safe zone against the real product dimensions.
  6. Under Printing Options, create or reuse a price-matrix option set (size, material, quantity) and apply it to the product or its category.
  7. Under Upload design, confirm the allowed file types and minimum upload DPI customers can bring their own artwork in at.
  8. Under Output, set the watermark rule, PDF password policy (if any) and whether bleed lines show, so every export from this product follows the same house rules.
  9. Save the product, then open it on the storefront and run a test design through Process to confirm the live preview matches the print area you configured.
  10. Place a test order (or use a sandboxed one) and check the order's print-ready PDF status before switching production over to the new product.
NBDesigner upload design settings showing allowed file types, max upload size and minimum DPI for customer uploads
Upload design settings control which file types and minimum DPI customers can upload, store-wide.
Cmsmart Printing Options list showing reusable price-matrix option sets applied to products and categories
Printing Options are built once and applied to one product or a whole category, which is what keeps a price matrix consistent as the catalogue grows.
NBDesigner output settings showing watermark, PDF password and bleed line options for print-ready exports
Output settings set the watermark, PDF password policy and bleed-line display that every print-ready export from the store follows.

Once a product is configured correctly, the payoff shows up on the order screen: the print-ready PDF that matches the order (2.17) is generated automatically on Process, using the same page geometry as Create PDF, and its status — Ready, Rendering, Failed or Not rendered — is visible before the file ever reaches production.

NBDesigner order screen showing a Ready print-ready PDF rendered by the Cmsmart Cloud renderer, with a Regenerate button
A correctly configured product produces a print-ready PDF the cloud renderer marks Ready, with a one-click Regenerate if a design changes.
Video thumbnail: creating an area design shape for an online design product in NBDesigner
Video: How to create an area design shape for online design (Cmsmart on YouTube).

Already have products live and want to see the buyer's side of what you just configured? Our tutorial on how customers design a product with Cmsmart Product Designer walks through the storefront editor your setup here feeds into.

How can Cmsmart go further with custom product configuration?

When a catalogue, pricing model or production workflow goes beyond what one admin can configure by hand, Cmsmart builds the automation on top of Product Designer as custom development, so a growing catalogue doesn't stall on manual product setup or a long developer queue.

  • Bulk product & template import. Business reason: a reseller or franchise needs hundreds of design-ready SKUs at once. Cmsmart builds an importer that reads a spreadsheet or ERP feed and creates the product, design area and price matrix for each row.
  • Catalogue-specific pricing engines. Business reason: quantity breaks, multi-option discounts or B2B price lists that a standard price matrix can't express. Cmsmart builds the pricing logic as a custom module on top of Printing Options.
  • AI preflight tuned to your production line. Business reason: a press has its own DPI and color tolerances. Cmsmart configures AI preflight thresholds and, where needed, extends the check for house-specific rules.
  • ERP/MIS-fed product setup. Business reason: product specs (material, bleed, DPI) already live in an ERP or MIS and shouldn't be re-typed. Cmsmart builds the integration so product setup stays in sync automatically.
  • 3D preview for configured products. Business reason: some product types sell better when the buyer can rotate the design-ready mockup. Cmsmart adds 3D preview to the products that benefit from it.

Our delivery approach is the same for all of these: discovery call, solution design, build in sprints, QA against real orders, launch, then support — see examples on our project case studies.

Get a custom product-setup quote

Why work with Cmsmart on your WooCommerce product designer setup?

Cmsmart has built and supported Product Designer (NBDesigner) for WooCommerce stores since 2012 as a division of Netbase JSC, with thousands of live product configurations behind it, so a merchant gets a plugin and a team that has solved this exact setup problem before.

  • 6,300+ client projects and 4,600+ projects delivered since 2012.
  • 1,800+ live stores running Cmsmart software today, across 80+ countries.
  • Trustpilot rating of 4.2 out of 5 from 404 reviews, verified on Trustpilot.

Adrien Darmon, a Cmsmart customer, wrote on Trustpilot: "The plugin used is really top, time saving and complete features. Ultra easy installation and configuration. And even when I needed specific development in relation to my theme, [support] was very competent and fast."

See how other merchants configured their catalogue in a phone-case business built with Cmsmart's Product Builder, or browse the Cmsmart Product Designer plugin page and the web-to-print solutions hub for the full picture. For hands-on configuration help, our product designer customization service covers everything from a single product to a full catalogue migration.

Frequently asked questions

Do I need a developer to set up a new design-ready product?

No. Material, bleed, DPI, the Designer Canvas toggle, price matrix and output rules are all set from the standard WooCommerce product editor and the plugin's own tabs. A developer is only needed for custom work like bulk imports or a non-standard pricing engine.

Can I reuse the same price matrix across several products?

Yes. Printing Options are built once as a reusable set and applied to a single product or to a whole category, so a new T-shirt style can reuse the same size and quantity pricing as the rest of the apparel category.

What happens if I get the design area wrong the first time?

You can reopen Designer config and adjust the print area, bleed and safe zone at any time. Existing orders keep the files generated under the old settings; new designs use the corrected area. Measuring the physical product before setup avoids most of this.

Does the print-ready PDF automatically match what the customer approved?

From version 2.17, the automatic print PDF and Create PDF read the same page geometry, including custom sizes, so the file a press receives matches the mockup the customer saw during Process — this fixed an earlier mismatch on custom-size products.

Can Cmsmart connect product setup to our ERP or spreadsheet catalogue?

Not out of the box — that is custom development. Cmsmart builds an import or sync layer so your existing product data creates or updates design-ready products automatically, instead of a manual setup per SKU.

What production details does the setup ask for on each product?

Beyond the normal WooCommerce name, price and category fields, the setup has a store owner record the product's material, bleed area, print resolution in DPI and color profile, so the Designer Canvas and the print-ready PDF both follow the same specification for that SKU.

Why does the guide recommend placing a test order before launch?

The last step of the setup is processing a test order and checking the print-ready PDF, which is the only way to confirm the output rules, bleed and DPI settings configured earlier actually produce a file matching what the customer saw in the Designer Canvas.

Where are output rules like watermarks configured?

Output rules such as watermark display and export behaviour are set under the plugin's own settings tabs rather than on each product, and the setup guide has a store owner confirm those rules once before testing the first personalised product on the storefront.

Where are the other Cmsmart Fullstore Quickstart Package tutorials?

Every Cmsmart Fullstore Quickstart Package tutorial is listed on the Cmsmart Fullstore Quickstart Package tutorials page. Customers with a licence can open a support ticket from the Cmsmart dashboard when a step does not match their install.

How do I pay securely?

Contracts and payments go to the company, Netbase JSC: plans are paid through PayPal; services are invoiced by Netbase JSC under a written proposal and paid by bank transfer to Netbase JSC's company account or by PayPal Business. Cmsmart (Cmsmart Ecommerce) is the ecommerce brand of Netbase JSC, a company based in Hanoi, Vietnam.

How do I contact Cmsmart or get a quote?

Message the Cmsmart team on WhatsApp at +84 937 869 689 or email project@cmsmart.net; the contact page at cmsmart.net/contact lists every channel, and Request a quote (cmsmart.net/project-proposal) sends a project brief. Customers with a licence open a ticket from the dashboard.

Further reading