Product Builder WooCommerce Setup: Multi-Part Products

Applies to Cmsmart Product Designer (formerly NBDesigner) 2.18.0-dev · Updated October 2026. Screens and flows below are from a live install on nbdesigner.cmsmart.net, captured October 2026.

In short

  • A product builder WooCommerce setup lets a shopper assemble a multi-part product — pick a component, type text, upload an image — and see one price before they add it to cart, instead of emailing you a spec and waiting for a quote.
  • Cmsmart Product Designer (formerly NBDesigner) ships this as Component, Text and Image fields inside Printing Options, on top of the same per-product production specs, price matrix and print-ready pipeline every designer-enabled product uses.
  • Setup takes a product with the Online Designer turned on, an option set with the right fields applied to it, and ten minutes to test the storefront flow end to end.

Most WooCommerce stores selling configurable, multi-part products still run that quote back-and-forth by hand instead of using a product builder WooCommerce setup that prices the combination on the product page itself. This chapter covers the admin screens that make it work: Manager Products, Printing Options, and the per-product settings that decide what a buyer sees.

Cmsmart Product Designer active plugin row showing version 2.18.0-dev
WP Admin > Plugins: Cmsmart, version 2.18.0-dev.

What does it cost you when customers can't assemble a multi-part product online?

Every multi-part product without an on-page configurator becomes a manual quote: an email thread, a hand-built price, and a wait that costs you the sale. Cmsmart's product builder fields move that configuration onto the product page, so the price and the order happen in one visit instead of a back-and-forth.

If you sell anything built from parts — a gift box with selectable items, signage made of panels, stationery with a name and a photo — the pain shows up the same way on most stores:

  • Manual quoting. Staff price each component by hand and reply a day later, after the customer has checked a competitor.
  • Inconsistent pricing. Without a shared price matrix, two staff members quote the same combination differently.
  • Production specs that drift per product. Bleed, DPI and color profile get set from memory, so one batch prints fine and the next comes back off-color or cropped tight — more on that below.
  • No proof step before the job is cut. A spoken okay over email isn't a recorded approval, so a dispute after production falls on the shop.
  • Catalog sprawl. Every new combination becomes a new, separately listed product instead of one configurable one.

Put a number on it with your own data: (manual quotes per week) × (minutes per quote) × (your fully loaded hourly cost) + (reprint rate on multi-part orders) × (cost per reprint). On a shop doing even 15 manual quotes a week at 20 minutes each, that's 5 hours of staff time before a single order is placed.

What would it look like if buyers could assemble their own product online?

With Cmsmart, a buyer opens a configurable product, picks a component, adds their text or image, watches the price update, and checks out — the way they would for any other variation. No email, no wait, no manual quote.

That experience sits on top of the Online Designer toggle every designer-enabled product uses. Turn it on and the storefront changes from a plain Add to cart button to a design flow — here's the same product before and after a buyer has designed it:

Product builder WooCommerce setup: product page before a design is started, with the Start and upload design button
Cmsmart Product Designer 2.18.0-dev, storefront product page: the Start and upload design button is what the Designer Canvas toggle on the product's admin page turns on.
WooCommerce product page after a design is completed, showing Your artwork preview above Add to cart
Cmsmart Product Designer 2.18.0-dev, storefront product page: once a buyer finishes in the designer, Your artwork shows the saved result right above Add to cart.

Example scenario. A gift-box shop sells a build-your-own stationery set: a Component field for the box size, a Text field for a recipient's name, an Image field for a small photo insert. The shopper picks the box, types the name, uploads the photo, and the price updates with each choice — the price matrix in Printing Options doing the math, not a rule of thumb. They add to cart and pay. On your side, the order lands in Orders with the configuration attached, ready for approval and a print-ready file.

How does Cmsmart's product builder put a multi-part WooCommerce product together?

Cmsmart Product Designer assembles a configurable product from four screens working together — Manager Products, a product's Production specs and Online Designer toggle, the Printing Options editor's Component/Text/Image fields, and the price matrix — all in the plugin today; logic between components is where custom development starts.

Manager Products lists every designer-enabled product with its base price, category and template count:

Cmsmart Manager Products screen listing WooCommerce products including Die cut sticker and a 3D Preview demo product
Cmsmart Product Designer 2.18.0-dev, Manager Products: 34 designer-enabled products, including a Die cut sticker and a dedicated 3D Preview demo product.

Its own configuration page holds Production specs plus the Online Designer toggle and sides preset:

Sticker product configuration page in Cmsmart Product Designer showing Production specs and the Online Designer Designer Canvas toggle
Cmsmart Product Designer 2.18.0-dev, Manager Products > Sticker: Production specs sit above the Online Designer toggle.

Component, Text and Image fields live one level deeper, in the Printing Options editor's Product builder fields group, beside Online design fields like Area design shape:

Printing option editor showing the Product builder fields group with Component, Text and Image, next to Online design fields including Area design shape
Cmsmart Product Designer 2.18.0-dev, Printing Options > Edit Options: Product builder fields (Component, Text, Image) beside Online design fields, including Area design shape.

An option set applies to specific products or categories, not globally — the list below shows the Die cut sticker and Area Design Shape sets this install runs:

Cmsmart Printing Options list showing option sets including Die cut sticker and Area Design Shape applied to specific WooCommerce products
Cmsmart Product Designer 2.18.0-dev, Printing Options: each option set ties to specific products — Die cut sticker applies to Die cut sticker; Area Design Shape, to Sticker.
Field (as shown)What it doesDefault hereRecommendedShows on storefront as
ComponentBuyer picks one swappable partdefault: as installedPrint shop: one per physical part. B2B: pair with Apply for > Categories.A picker field, priced by the matrix
TextBuyer types a short valuedefault: as installedPrint shop/POD: short personalization only, not a layout tool.A text input next to the other fields
ImageBuyer attaches an image, separate from the main canvasdefault: as installedPOD/B2B: a small photo or logo slot; match Settings > Upload design limits.An upload control on the product page
Area design shapeSets the printable shape for non-rectangular productsdefault: as installed; applied only to Sticker herePrint shop/POD running die-cut stock: match your real cut shape per SKU.The canvas boundary in the Online Designer
Designer CanvasTurns the Online Designer on for the productChecked on the Sticker product here; default: as installed elsewhereAll segments: on for any configurable product, off for simple ones.Switches Add to cart to the design flow above
Print resolution & Color profileSets the DPI and color target the renderer uses72 DPI (web) / RGB (screen) on Sticker — helper text recommends 300 DPI / CMYKAll segments: 300 DPI and CMYK for anything going to press.Not buyer-visible; affects print sharpness and color

Cmsmart insight: this install's own Sticker product reads 72 DPI (web) / RGB (screen), against its own helper text's advice — a real example of the mistake below. Treat Component, Text and Image as building blocks for a price-matrix configuration, not a full 3D swap-this-part configurator; visual swapping is custom development on top.

StepManual multi-part quotingCmsmart product builder
Pricing a combinationStaff member prices each part by handPrice matrix prices every combination the same way
Buyer sees the priceAfter an email round-trip, often a day laterOn the product page, as they pick each field
Production specsSet per order, by whoever builds the jobSaved once per product: material, bleed, DPI, color profile
Proof before productionA spoken okay over email, not recordedCustomer Design approve/decline box, with an approved-artwork lock
Print fileRebuilt by hand per orderCreate PDF / print-ready PDF status, rendered to match the order

What's the ROI of a self-serve product builder for WooCommerce?

A product builder turns a manual quote into a self-checkout: less staff time per order, consistent pricing, and production specs saved once instead of guessed per order — which shows up as fewer reprints and faster turnaround, not just a nicer product page.

BenefitHow it shows upKPI to track
Less manual quotingStaff stop pricing combinations by handManual quote requests per week
Consistent pricingEvery buyer sees the same price for the same combinationPrice-support tickets / disputes
Fewer reprintsProduction specs and approval are recorded, not rememberedReprint rate on configured orders
Higher completionBuyers finish configuring instead of abandoning an email threadAdd-to-cart rate on configurable products

Personalization pays for the setup work: in Deloitte Digital's 2024 personalization survey, consumers reported spending on average 37% more with brands that deliver meaningful, personalized interactions — a self-serve component builder is that kind of interaction, applied to a physical product (Deloitte Digital, 2024). The platform underneath isn't niche either: WooCommerce reports it now powers 31% of the top one million ecommerce sites, so a configurator built on it inherits a well-supported checkout and extension ecosystem (WooCommerce.com).

ROI worksheet (use your own numbers):

  • Staff time saved: (manual quotes/week) × (minutes/quote) × (hourly cost) = weekly hours back
  • Reprints avoided: (current reprint rate − expected rate with recorded specs) × (orders/month) × (cost per reprint)
  • Conversion: (abandonment on email-for-a-quote products) × (traffic) × (average order value) = recoverable revenue

How do you complete a product builder WooCommerce setup?

You configure a WooCommerce product builder in three stages: turn on the Online Designer and Production specs for the product in Manager Products, add the Component/Text/Image fields and price matrix in Printing Options, then apply that option set to the product and test the storefront flow before it goes live.

  1. In Cmsmart > Manager Products, open the product you want to configure as a multi-part build (or Add new).
  2. Under Production specs, set Material, Bleed area, Print resolution and Color profile — 300 DPI and CMYK for press, not the web-oriented defaults shown on this install's Sticker product.
  3. Under Online Designer, check Enable the Online Designer for this product and pick a Sides preset.
  4. Click Open Designer config (or Cmsmart > Printing Options) and add or edit an option set for the product or category.
  5. In Printing fields > Product builder fields, add the Component, Text and/or Image fields your product needs.
  6. Add matching Online design fields too — Side list, Size, Color/Material, or Area design shape for a die-cut product.
  7. Set quantity breaks and the price matrix so every field combination resolves to one price.
  8. Under Apply for, pick Products or Categories and select which ones use this set.
  9. Save, open the product on the storefront, configure it and Process to confirm price and layout.
  10. Open the order, use Customer Design to accept or decline it, then check Create PDF before production.
Video walkthrough: how to create a Component in the Product builder of Cmsmart Product Designer
Video: How to create a Component in the Product builder of NBDesigner (Cmsmart on YouTube)

General upload and output settings (file types, DPI minimums, ICC/CMYK export) live under Settings > Upload design and Settings > Output.

Going further with custom development

The Component, Text and Image fields give you the building blocks; Cmsmart builds the logic and visuals that turn them into a tailored configurator — conditional fields, inventory-aware components, 3D swaps or ERP-linked bundle SKUs — as a custom project on top of your store.

Once a shop runs Component/Text/Image fields in production, the requests we hear most are about logic the fields don't do on their own:

  • Conditional components. One component's choice shows, hides or restricts another field — a box size limiting which inserts are offered.
  • Inventory-aware components. Each component maps to a real SKU with real stock, so an out-of-stock part is hidden instead of ordered.
  • Visual component swaps and 3D configurators. This install's own 3D Preview demo product proves the plugin can switch on a 3D view per product; a Component choice that visibly swaps on that 3D model, instead of a dropdown label, is a custom build on top.
  • ERP/MIS sync for bundle SKUs. Component combinations map to production SKUs in your MIS or ERP, so a configured order routes straight into your existing queue.
  • Tuned preflight for multi-part jobs. Cmsmart Cloud's AI tools run today; we tailor preflight rules to your components.

Every custom build follows the same path — discovery, solution design, build sprints, QA, launch and support — the process behind our ecommerce project work and our product designer customization service.

Get a custom product builder quote

Why work with Cmsmart on your product builder?

Cmsmart has built WooCommerce product customization since 2012 as a division of Netbase JSC, with thousands of delivered projects and a Trustpilot rating buyers can check independently — not a claim made only on our own site.

Cmsmart is a Netbase JSC division building ecommerce customization since 2012, with 6,300+ client projects, 4,600+ projects delivered, 1,800+ live stores running today, and a 4.2 out of 5 rating from 404 reviews on Trustpilot (verify on Trustpilot). One customer who had us extend their product configuration put it this way:

"CMS smart (Selena) have customized NB designer perfectly for us and now work as we like." — Ari van Esch, Trustpilot

See the wider web-to-print hub for related setups, or start from our plugin installation chapter if you haven't installed Cmsmart Product Designer yet.

This chapter is part of the admin settings guide for Cmsmart Product Designer. Related chapters:

Frequently asked questions

What's the difference between Component, Text and Image fields and the Online Designer canvas?

The Online Designer canvas is the full design tool — drawing, layers, clip art, templates. Component, Text and Image are printing-option field types you add on top, for picking a part, typing a short value, or attaching an image as part of pricing an option set.

Can a buyer configure more than one component on a single product?

Yes — an option set can combine multiple Component, Text and Image fields with sides, size and color fields, and the price matrix resolves it to one price. How many fields make sense is a product decision, not a plugin limit.

What's a common mistake when setting up a new product builder product?

Leaving Production specs at their web-oriented defaults. On this install's own Sticker product, Print resolution reads 72 DPI (web) and Color profile reads RGB (screen) — both fields' own helper text recommends 300 DPI and CMYK for print. Check these two before you apply an option set.

Does a configured product still go through approval and print-ready output?

Yes. Every order lands on the Customer Design box for accept/decline, and once approved it's locked on the server; Create PDF and the print-ready PDF status apply the same way regardless of how many fields the buyer filled in.

Where do I set the cut shape for a die-cut product like a sticker?

Area design shape and Custom area design shape, in the Printing Options editor's Online design fields group. The dedicated cutline and bleed workflow for sticker production is covered in the related chapter linked above.

Can Cmsmart add conditional logic between our components?

Not as a built-in setting today — showing or hiding one field based on another's value is custom development we build on top of the existing fields, scoped to your products.