WooCommerce Product Designer Tutorial: Manage Design Tools

Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. Covers the admin Design Tool, Upload design and Output tabs, plus the per-product Designer config that controls what a WooCommerce buyer can do on the canvas.

Cmsmart Product Designer gives a WooCommerce store a single place to make that call per product: what the buyer can add to a design, what files they can upload, and what a "finished" print file has to look like before it reaches your press. This tutorial walks through the actual admin screens on a live 2.17.0 install and shows what's standard today versus what Cmsmart builds as custom work.

What's the real cost of leaving your product designer's tools unmanaged?

Most shops that skip this configuration step run into the same handful of problems:

• Low-resolution uploads that look fine on screen and blurry on paper. A photo saved for Instagram is usually well under the 300 DPI that print production needs at normal viewing distance — below that threshold, individual pixels become visible once the file is enlarged to print size, according to print industry guidance on resolution.
• Manual proofing on every single order — staff open the full-size file to eyeball it, because nothing in the editor stopped the wrong file type or size from being accepted in the first place.
• A design tool loaded with options that don't apply to the product — a free-draw panel on a business card, or a clipart library built for apparel showing on stationery — which slows buyers down instead of helping them finish.
• Reprints and refunds once a low-quality file is approved by habit rather than checked, and the physical product doesn't match what the customer saw in the browser.

What does a well-tuned design tool look like for your store?

Example scenario: a buyer opens a door-hanger product at 9 p.m., picks a template, swaps in their own text and a clipart icon, and checks out. Because the product's Designer config only allows the file types and resolution the press actually needs, the design that lands in Orders the next morning is already within spec — no email asking for a bigger file, no guessing whether the customer's upload will print clean.

That outcome isn't about adding more tools to the editor. It's about matching the right tools, and the right file rules, to each product — and personalization itself is worth protecting: Deloitte Digital's 2026 research found that 52% of consumers say they're more likely to buy from brands that personalize their experience, and those buyers spend 30% more with them. A design tool that's too restrictive loses that upside; one that's too open loses it to reprints and refunds instead.

How does Cmsmart control what customers can design?

On a current 2.17.0 install, four admin screens work together:

• Design Tool tab (wp-admin → Cmsmart → Design Tool). Sets the default editor layout — Modern, Visual or Classic — and lets you specify a layout per product. The Modern layout is what buyers see on the storefront: Templates, Text, Cliparts, Photos, Elements (shapes, icons, frames, grid frames, QR code and free draw) and Layers panels.
• Upload design tab. Controls allowed and disallowed file extensions, minimum and maximum upload size, and the minimum resolution (DPI) accepted for JPG/JPEG uploads — the setting that stops a web-resolution photo from ever reaching your print queue.
• Output tab. Governs what happens to the finished design: watermarking before checkout, bleed display, the fonts embedded in exports, and where AI preflight is configured.
• Printing Options and the product's own Designer config. Printing Options holds your price-matrix rules per product category; each product's Designer config turns the Online Designer on or off and sets sides, pricing and print options for that specific item.

Two of these matter because they cut manual policing. AI preflight — configured from Cmsmart Cloud → AI Tools, linked from the Output tab — checks a design against DPI and other rules before it reaches production, instead of relying on a human to catch a bad file. And the approved-artwork lock refuses any save over an approved design, from any link or open editor tab, so a customer can't quietly swap in an unapproved file after you've signed off.

What's the business value of tuning these settings?

Benefit	How it shows up in your business	KPI to track
Fewer bad uploads reach your queue	Staff stop opening files just to reject them	% of orders flagged "not checked" or low-DPI in Files
Faster buyer completion	Editor shows only the tools relevant to the product	Cart-to-checkout completion rate per product
Fewer reprints	Minimum DPI and approved-artwork lock stop bad files going to press	Reprints per 100 orders
Less proofing labor	AI preflight catches issues before a human has to	Minutes of staff review per order

A WooCommerce product designer tutorial: how do you set up the Design Tool, upload and output settings?

1. Go to wp-admin → Cmsmart and open the General tab. Choose your default design editor layout (Modern is recommended) and set the default output resolution in DPI.
2. Decide whether to hide the design editor on smartphones, and whether customers may save a design for later or share it — these affect how much of the Design Tool a mobile buyer ever sees.
3. Open the Design Tool tab to review or override the editor layout for specific products, instead of leaving every product on the site default.
4. Switch to Upload design. Set allowed and disallowed file extensions (for example allow jpg,pdf,psd and disallow low-fidelity formats), and set a minimum resolution DPI so a web-sized photo is rejected before it becomes a support ticket.
5. Set max and min upload size in MB to stop both empty files and files too large for your server to process quickly.
6. Open the Output tab. Choose when to watermark exported designs (always, or only before checkout completes), pick a watermark type, and confirm which embedded fonts ship with exported files.
7. From the same tab, follow the AI preflight link to Cmsmart Cloud → AI Tools if you want designs checked automatically before they reach production.
8. Open Printing Options and confirm the price-matrix rules applied to each product or category match what you actually charge for options like paper stock or finish.
9. Inside the product itself (Products → your product → Designer config), confirm the Online Designer is enabled, set 1-sided or 2-sided canvas, and open Designer config to set canvas sides, pricing and print options for that specific item.
10. Open the product on the storefront and run a test design end to end — add text, a clipart, and an upload — to confirm the tools you expect are the only ones showing.

For the deeper settings on each tab — fonts, ICC profiles, FTP/SFTP output sync — see the companion guide on configuring print pricing options on NBDesigner and the walkthrough of using the product designer plugin from the back end.

Going further: what can Cmsmart build beyond the standard options?

The admin screens above cover what ships in the plugin today — including QR codes and free draw in the Elements tab, and groups or step-by-step layouts in Printing Options. Stores with more specific needs ask Cmsmart to build further on top of that foundation:

• Variable data printing from a CSV. For batch jobs like name badges or certificates, Cmsmart builds a CSV-driven merge that fills a template once per row.
• Brand portals with locked templates per company. Franchise and reseller networks that need every location ordering from the same locked templates get a dedicated portal, built as custom development.
• A B2B approval workflow on top of Printing Options. Beyond the standard groups and step-by-step layouts, Cmsmart can add quote-approval steps and sales-team price overrides for accounts that need sign-off first.
• AI preflight rules tied to your approval workflow. The standard toggle checks DPI and basic issues; Cmsmart can extend audience and routing rules so flagged designs go into a B2B approval chain instead of a generic queue.
• ERP/MIS-synced price matrices. If Printing Options needs to pull live pricing or stock from an external system instead of wp-admin, that's an integration Cmsmart's team designs and builds per store.

Delivery follows the same path for all of these: discovery call, solution design, build in sprints, QA against your real catalogue, launch, and ongoing support — see how that plays out in Cmsmart's ecommerce project case studies.

Get a custom design tool quote

Why work with Cmsmart on your product designer plugin?

Cmsmart Product Designer (NBDesigner) is maintained by the same team that takes on custom tool and integration work for print shops, POD brands and B2B suppliers — see the product designer customization service for the scope of that work. The company has run 6,300+ client projects and delivered 4,600+ of them since 2012, with 1,800+ stores live today across 80+ countries — figures Cmsmart publishes on its own platform page. Reviews are tracked publicly on Trustpilot (4.2 out of 5, 404 reviews). For related work, see the Cmsmart Product Designer plugin page and the web-to-print solutions hub.

Frequently asked questions

How long does it take to configure the Design Tool settings for one product?

Reviewing the Design Tool layout, Upload design rules and Printing Options for a single product category usually takes 30–60 minutes once you know your file-type and resolution requirements. A full catalogue with several product types takes longer, mostly because each category needs its own minimum DPI and allowed file types decided.

Can different products use different design tools?

Yes. The Design Tool tab lets you set a default editor layout site-wide, then override it per product, and each product's own Designer config controls sides, pricing and print options independently.

What happens if a customer uploads a low-resolution file?

If the Upload design tab has a minimum resolution DPI set, low-resolution JPG/JPEG uploads are rejected at the point of upload. AI preflight, configured from Cmsmart Cloud → AI Tools, can add a further automated check before the order reaches production.

Does limiting the design tools hurt conversion?

Not when the tools match the product. Buyers still get real personalization — text, cliparts, photo uploads, templates — which research from Deloitte Digital links to higher purchase intent and spend. What limiting tools removes is irrelevant options and file formats your press can't use, not the personalization itself.

Does the editor already include QR codes and a free-draw tool, or does Cmsmart have to build those?

Both ship today — QR code and free draw are already in the Elements tab alongside shapes, icons, frames and grid frames, and groups or step-by-step option layouts are already a Printing Options layout choice. What Cmsmart builds as custom development is work specific to your catalogue, such as a CSV-driven variable data merge for name badges or a locked-template brand portal for a reseller network.

Can the price matrix in Printing Options connect to our own ERP or pricing system?

Not out of the box. Printing Options manages price-matrix rules inside wp-admin; connecting it to an external ERP or MIS for live pricing is an integration Cmsmart's team designs and builds per store.