WooCommerce Product Designer Tutorial: Setup to First Order

Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. This guide picks up after installation and covers the settings, pricing and output configuration that turn a freshly activated plugin into a store that is actually ready to take design orders.

In short

  • This WooCommerce Product Designer tutorial configures Cmsmart Product Designer (NBDesigner) so a generic install becomes a store that prices, proofs and produces print-ready files on its own.
  • It works by connecting four admin screens — General, Upload design, Output and Printing Options — to the product catalog, so every design a buyer finishes already carries the right price, file type and print geometry.
  • It takes roughly an afternoon: a short settings pass, one price matrix, a handful of design-enabled products and one end-to-end test order before you flip the store live.

What does an out-of-the-box WooCommerce product designer really cost you?

Cmsmart Product Designer ships with sensible defaults, but a store that skips the General, Upload and Output tabs still makes a buyer design against the wrong DPI, the wrong file types and no real price matrix — so Cmsmart's own setup steps exist specifically to close that gap before launch.

Every one of these gaps shows up as a support ticket or a lost order, not as an error message:

  • Manual pricing. Without a price matrix in Printing Options, every print option (paper weight, size, quantity) has to be quoted by hand or hard-coded into the base product price.
  • Unusable uploads. If Upload design still allows any file type at any resolution, a buyer's 72 DPI phone photo reaches your press the same way a 300 DPI print-ready file does — you find out at the reprint stage.
  • Checkout doubt. A buyer who cannot see a clear price and a clean preview before the cart is a buyer who leaves. Cart abandonment across online stores in general averages 70.22%, the highest documented rate in Baymard Institute's running benchmark of 50 abandonment studies (2025) — a confusing design-to-cart step only adds to that baseline.
  • Inconsistent print files. Without Output settings tuned to your press (bleed line placement, watermarking, auto-export on order status), two orders for the same product can leave the design tool as two differently sized files.

A rough cost-of-status-quo formula: (manual quotes handled per week × minutes per quote × your hourly rate) + (reprints per month × cost per reprint) is money a configured store keeps.

WooCommerce product designer tutorial: product page with the Start and upload design button on an invitation product
Every design starts here — but what happens next depends entirely on how the admin settings behind this button are configured.

What does a smooth, fully working launch look like?

Once Cmsmart Product Designer's settings, pricing and output are configured, a buyer designs, prices and pays in one sitting, and the order lands in your WooCommerce admin already carrying a print-ready file — no manual quote, no follow-up email, no guesswork about the file your press needs.

Example scenario: A print shop owner spends a Friday afternoon working through General, Upload, Output and Printing Options, then adds the price matrix to three products. Over the weekend a buyer opens the store, designs an invitation, watches the price update as they change quantity, and checks out. Monday morning the order already sits in Cmsmart > Orders marked "In production," with a print-ready PDF rendered overnight by Cmsmart Cloud waiting in Create PDF — nobody opened the design tool to make that happen.

That gap between "the plugin is installed" and "the store behaves like that scenario" is exactly the configuration work this tutorial covers.

Cmsmart online product designer open on an invitation template with the Process button
The Modern online designer a buyer sees once design is enabled on a product — templates, text and layers, all driven by the settings covered below.

How does Cmsmart Product Designer turn your settings into a working solution?

Cmsmart Product Designer connects a handful of admin screens into one pipeline: the storefront collects the design, the pricing engine reads your price matrix, the order carries the design to your admin, and the output engine turns it into a print-ready PDF — Cmsmart's cloud renderer does the last step automatically once Output is configured.

Six building blocks make up that pipeline. Some are ready to use the moment you configure them; others only exist as custom development, built for a specific store's workflow:

Building blockIn the plugin today (2.17.0)Custom development
Online designer (templates, text, cliparts, layers)Included — Modern layout—
Pricing via Printing Options price matrixIncludedTiered or company-specific pricing rules
Proof approval with the approved-artwork lockIncluded (2.17)Multi-step approval / purchase-order sign-off
Print-ready PDF output (Cmsmart Cloud, matches the order)Included (2.17)—
Order and file management (Orders, Files)IncludedERP / MIS and print-API sync
3D or AR product previewBasic 3D preview — per-product toggle, desktop onlyAR preview / advanced 3D configurators

Cmsmart insight: configure Output and Upload design before Printing Options, not after. We have seen stores build a careful price matrix on top of upload rules that still accept 72 DPI images, which means the pricing is solid but the files behind it still need a manual check before they go to press.

The 2.17.0 release is what makes this pipeline reliable end to end: automatic print PDFs now match the file Create PDF generates even for custom-size products, and approved artwork is locked on the server rather than just hidden behind an Edit button — so a buyer's "approved" status actually means the print file cannot change underneath it. The Customer Design approval box also now works on WooCommerce's High-Performance Order Storage (HPOS) screen, which matters if your store uses WooCommerce's High-Performance Order Storage for order data.

WooCommerce cart line item showing the customer's saved invitation design and an edit-design link
The cart already carries the buyer's design preview and price — the output of the pricing and upload settings below.

What's the business value of getting this configuration right?

A correctly configured Cmsmart Product Designer turns three slow manual steps — quoting, checking files, and chasing proofs — into something the storefront and the admin screens do on their own, which is where the real value sits for a WooCommerce store built on a platform that now runs 4M+ online stores.

BenefitHow it shows up in your businessKPI to track
Fewer abandoned designsBuyers see a live price and a clean preview before checkout instead of waiting for a quoteCart abandonment rate on design-enabled products
Less staff time on quotingThe price matrix in Printing Options answers "how much" instantly, for every size/quantity combinationManual quote requests per week
Fewer reprintsUpload and Output rules reject low-DPI files and enforce bleed before the order is placedReprint rate / cost per reprint
Faster handoff to productionThe print-ready PDF is already rendered when the order reaches your adminTime from order placed to PDF ready

Rough ROI worksheet: (orders per month × minutes of manual quoting saved per order × your hourly staff cost) + (reprints avoided per month × your cost per reprint) = monthly value of a properly configured designer. Plug in your own order volume, staff rate and reprint cost — the point is that both terms move in your favor every month the settings stay correct, not just on launch day.

How to set up Cmsmart Product Designer: a WooCommerce product designer tutorial

Setting up Cmsmart Product Designer means working through five admin screens in order — General, Upload design, Output, Printing Options and Product manager — then testing the full buyer-to-admin flow once before you consider the store live.

  1. Install and activate the plugin if you have not already. Our free-trial download, install and activate guide covers that first step in detail; come back here once it is active.
  2. Open Plugins in wp-admin and confirm Cmsmart Product Designer is active and which version you are running — settings and behavior below assume 2.17.0 or later.
  3. Go to Cmsmart > Settings > General and set the default design editor layout to Modern, your default output DPI, and your dimensions unit (in, cm or mm) to match how your team quotes jobs.
  4. Open the Upload design tab and set allowed file types, maximum upload size and a minimum resolution DPI for JPG/JPEG uploads — this is what stops a low-resolution phone photo from reaching your press undetected.
  5. Open the Output tab and set your bleed line placement, watermark and auto-export-to-PDF options so every print-ready file matches your press's requirements, not just the designer's on-screen preview.
  6. Go to Printing Options and build a price matrix for at least one product (quantity breaks, paper or material choices). Our price matrix setup guide covers the field-by-field detail.
  7. Open Product manager and enable the online designer on the products you want buyers to customize, attaching the printing option set from the previous step to each one.
  8. Place one real test order as a buyer: design a product, watch the price update, add it to cart and reach checkout (stop before payment on a staging store).
  9. Back in Cmsmart > Orders, open the test order and confirm the design, the price and the production status all match what you expected.
  10. In the order's Create PDF tab, confirm the print-ready PDF status reads "Ready" and the paper size matches the product — this is the file your press will actually receive. For the full PDF/output workflow, see our print-ready PDF output guide.
WordPress Plugins screen showing the Cmsmart Product Designer row active, with Settings and Deactivate links
Step 2: confirm Cmsmart Product Designer shows as active in wp-admin → Plugins, then check your own version number against the 2.17.0-or-later behavior described below (this demo store runs an in-development build, so your own version number will read differently).
Cmsmart General settings showing default design editor layout, output DPI and dimensions unit
Step 3: General settings set the defaults — editor layout, output DPI and units — every product inherits unless overridden.
Cmsmart Upload design settings: allowed file types, max upload size and minimum DPI
Step 4: Upload design settings decide which files a buyer can hand you, and at what resolution.
Cmsmart Printing Options list showing option sets with a price matrix applied to specific products
Step 6: each printing option set carries its own price matrix and is applied to one or more products.
Cmsmart Product manager listing design-enabled WooCommerce products with their templates and status
Step 7: Product manager is where you turn the designer — and its attached pricing — on for each product.
Cmsmart Orders dashboard showing test orders with production status and revenue totals
Step 9: your test order should appear here with the right price and status — this is also where every live order lands.
Cmsmart Create PDF tab showing a print-ready PDF status rendered by the cloud renderer
Step 10: a "Ready" status here, rendered by Cmsmart Cloud, means the print file matches the order automatically.
Video thumbnail for how to download and kick-start Cmsmart Product Designer
Video: How to download Cmsmart Product Designer and kick-start your store (Cmsmart on YouTube).

Going further with custom development: what can Cmsmart build for you?

Once the core settings are configured, some stores need pricing, approval or integration logic the standard screens were never built for — Cmsmart builds that as custom development on top of the same plugin, rather than asking you to replace it.

  • Pricing beyond the standard matrix. Business reason: wholesale or repeat B2B buyers need company-specific rates the built-in quantity breaks cannot express. Cmsmart builds a custom pricing engine layered on top of Printing Options for exactly those rules.
  • Multi-step approval workflows. Business reason: agencies and B2B print buyers often need a second sign-off (account manager, then client) before a design is locked for production. Cmsmart extends the 2.17 approved-artwork lock into a full review chain.
  • ERP / MIS and print-API sync. Business reason: a print shop running an MIS or ERP does not want to re-key orders by hand. Cmsmart builds the integration that pushes orders, files and status both ways.
  • AR and advanced 3D configurators. Business reason: the plugin already offers a basic per-product 3D preview toggle on desktop, but buyers converting on apparel, packaging or vehicle wraps on mobile, or needing an AR try-on, want more than that flat toggle gives. Cmsmart builds AR preview and advanced 3D configurators on top of the designer for exactly those cases.

Every custom build follows the same delivery model described on how Cmsmart runs a project: discovery and scoping, a solution design you approve before code is written, milestone-based sprints, QA, launch and ongoing support. If your use case sits closer to a full web-to-print storefront than a single plugin setup, our web-to-print solutions hub is the wider view of what that looks like.

Get a custom product designer quote

Why work with Cmsmart for your product designer rollout?

Cmsmart has built and supported this product designer since 2012 as a division of Netbase JSC, which is why the setup choices in this guide reflect what actually holds up across thousands of live WooCommerce stores, not just what looks good in a demo.

Cmsmart has delivered 6,300+ client projects since 2012, with 4,600+ delivered and 1,800+ stores live today across 80+ countries, rated 4.2/5 on Trustpilot from 404 reviews. One long-time user summed up what that track record looks like day to day:

"We have had the NB Designer plugin installed for three years and have experienced absolutely no problems during that time. It is wonderful to see their commitment to continuous development... The designer works exceptionally well across all devices... the level of support is outstanding." — Web Developer, Trustpilot review, GB

See our product designer plugin page for the full feature set and live demo, or the product designer customization service if you want Cmsmart to configure or extend it for you.

Frequently asked questions about setting up Cmsmart Product Designer

How long does setup actually take?

Working through General, Upload, Output and Printing Options for a handful of products, plus one end-to-end test order, typically takes a few hours for a store that already knows its print specs and pricing. Stores with complex pricing or many product variants should plan a full afternoon.

Do I need to take my store offline to configure it?

No. The settings screens only affect how design-enabled products behave; the rest of your WooCommerce store keeps running. Test with a staging product or a low-visibility product before enabling the designer store-wide.

Is this different from the free trial install guide?

Yes. Our free-trial download, install and activate guide gets the plugin running on your site. This guide picks up from there and covers the settings, pricing and output configuration that make an active plugin behave like a finished store.

Does the setup work with WooCommerce's High-Performance Order Storage (HPOS)?

Yes, as of 2.17.0. The Customer Design approval box now loads correctly on the HPOS order screen as well as the legacy post-based one, so the approve/decline workflow works whichever order storage your store uses.

What if my pricing or approval process doesn't fit the standard screens?

The built-in price matrix and single-step approval cover most stores. For company-specific pricing, multi-step sign-off, or syncing orders to an ERP/MIS, Cmsmart builds that as custom development on top of the same plugin — see the custom development section above.

Do buyers need an account to design and order?

No. A buyer can design, add to cart and check out as a guest; their design travels with the cart item and the order automatically. An account only matters if you want them to reopen or reorder a saved design later from My Account.