Translate WooCommerce Product Designer for Global Buyers

Applies to Cmsmart Product Designer (NBDesigner) 2.17.0 · Updated October 2026. This guide shows how to translate WooCommerce product designer screens on both the Modern/Visual layout (a standard WordPress string-translation plugin) and the Classic layout's built-in Frontend Translate screen, now marked deprecated in Settings.

In short

  • A product designer that speaks your buyer's language keeps them in the editor instead of bouncing to a competitor who already sells in it.
  • On the Modern layout (the 2.17.0 default), every label, button and panel in Cmsmart Product Designer is a normal WordPress string, so a translation plugin like Loco Translate or WPML can translate it the same way it translates your theme.
  • It takes a layout decision, one translation plugin, and roughly an hour per language the first time; after that, new strings only appear when you add new printing options or product copy.

A shopper who cannot read your design tool will not finish a design in it, no matter how good your product catalogue is. Here is how to translate WooCommerce product designer screens on Cmsmart Product Designer (NBDesigner), so your editor sells in the buyer's own language, not just your theme's checkout text.

What does it cost you when your design tool only speaks English?

An English-only design tool loses international buyers mid-edit, generates support tickets asking what a button does, and pushes customers to competitors whose storefront already matches their language. Cmsmart Product Designer removes that cost once its UI strings are translated through a standard WordPress translation plugin.

If you sell product customization to more than one country, a handful of pains show up in your analytics and your inbox:

  • Mid-design drop-off. A buyer opens the editor, hits an English-only Process button or printing-option label they don't recognize, and closes the tab instead of ordering.
  • Support load. Staff field the same what-does-this-button-mean message by email or chat in every market where the designer is still English-only.
  • Lost reorders. A returning customer who struggled through the editor once is less likely to come back for a second design.
  • Manual relays. Someone on your team re-explains the design flow by phone or chat instead of the interface explaining itself.
  • Competitive gap. Local web-to-print competitors whose storefronts are fully localized win the buyer who gave up on your English-only editor.

The scale of this is not a guess: in a CSA Research survey of 8,709 online shoppers across 29 countries, 66% chose the product listed in their own language over an identical one described only in English (CSA Research, 2020). And English still covers only about half the open web — W3Techs measured it at 49.5% of all websites as of October 2026 — so most of your potential buyers are reading a second language every time they shop with you.

What would a fully localized design experience look like?

Picture a buyer who never notices they are using translated software: templates, toolbar labels, the printing-option form and the order confirmation all read in their language, so the only thing standing between them and checkout is the design itself. That is what Cmsmart Product Designer delivers once its strings are translated.

Example scenario. A buyer in Lyon opens a sticker product on a French-language WooCommerce store. The Start and upload design button already reads Démarrer et importer un design, because the shop translated the designer's strings months ago. They drop a logo, adjust the text panel — also in French — pick a print option from a localized price list, and check out without ever switching the page to English or opening a support chat.

That is the whole promise: the buyer's attention stays on their design, not on decoding your interface.

How does Cmsmart Product Designer handle translation?

Cmsmart Product Designer ships every interface string as standard, translatable WordPress text, so the same tools that translate your theme — Loco Translate, WPML, or any .pot/.mo workflow — translate the designer too, with no code changes required.

Three building blocks make up the translated experience, and which ones you touch depends on the layout a product uses:

  • Storefront strings — your theme and WooCommerce's own checkout, cart and account text, translated the same way you already translate the rest of the store.
  • Designer UI strings (Modern/Visual layout) — every button, panel heading, tooltip and error message inside the editor is a translatable WordPress string, pulled from the plugin's own .pot template (regenerated to 4,107 strings as of the 2.12.2 translation release). A plugin such as Loco Translate — 1M+ active installs on WordPress.org — edits these in-browser; WPML works the same way across language directories or subdomains.
  • Frontend Translate (Classic layout only) — a dedicated admin screen (Cmsmart → Frontend Translate) that lets you add a language and overwrite individual on-screen strings without touching .pot files at all. It still works in 2.17.0, but the General settings screen below now marks Classic layout as deprecated, with no new features planned for it.
NBDesigner Settings General tab: Default design editor layout picker, Modern marked recommended, Classic marked deprecated
Settings → General → Default design editor layout: Modern is the recommended, actively developed layout; Classic is deprecated but still usable for stores that already depend on Frontend Translate.

In practice: new stores and anyone building out multiple languages should translate the Modern layout's strings with Loco Translate or WPML. Stores still running Classic-layout products can keep using Frontend Translate, but Cmsmart is not adding features to that path going forward.

Cmsmart Product Designer (NBDesigner) 2.17.0 row in the WordPress Plugins screen, with the native Translate link
The Plugins screen shows the installed version (2.17.0) and WordPress's own Translate link, which opens the plugin's translation project the same way it does for any WordPress plugin.

Cmsmart insight: translate the Modern layout first even if you still have Classic-layout products live. Most of a store's strings — cart text, account pages, your theme — are shared across layouts, so the Loco Translate / WPML work carries over, while Frontend Translate only ever covers the Classic designer itself.

NBDesigner Manage Products screen listing 34 design-enabled products that share the same translated designer strings
Translation is store-wide, not per product: this demo catalogue has 34 design-enabled products, and every one of them uses the same designer strings you translate once.
Manual multilingual workaround vs. translating Cmsmart Product Designer
Manual workaroundTranslating the designer
Staff re-explain buttons over chat in every marketThe interface already reads in the buyer's language
A second, hand-built storefront per languageOne store, one set of translated strings per locale
Re-translation needed after every plugin updateNew strings only appear for genuinely new text; existing translations persist
No shared source of truth for wordingOne .pot file / Frontend Translate list per store as the source of truth

What's the business value of multilingual product design?

Translating Cmsmart Product Designer turns language from a silent drop-off point into a measurable lever: fewer abandoned designs, fewer repeat support tickets, and a storefront that can expand into a new country without a developer re-building the editor.

Business value of a translated designer
BenefitHow it shows up in your businessKPI to track
Fewer abandoned designsBuyers who understand the editor finish the design instead of closing the tabDesigner start → Add to cart rate, by language
Lower support loadFewer what-does-this-mean chats and emails from non-English buyersSupport tickets tagged designer help, by locale
Faster market expansionA new storefront language ships without rebuilding the designerDays from language request to live
Higher reorder rateBuyers who had a smooth first design come back for a second oneRepeat-order rate per locale

Back-of-envelope ROI: take your monthly designer sessions in a given language, multiply by your current abandonment rate in that language, then by your average order value. That is the revenue a translated designer is competing for in that market — compare it to the one-time hour or two of translation work plus the cost of a translation plugin or translator pass.

How to set up and translate WooCommerce Product Designer

Setting up translation starts with the Default design editor layout in Settings → General, then runs through either Loco Translate/WPML (Modern/Visual) or the Frontend Translate screen (Classic), finishing with WordPress's own site-language switch so buyers actually see the result.

Pick the path that matches your products' layout. Most 2.17.0 stores should use the Modern/Visual path below.

Modern or Visual layout (recommended):

  1. Go to Cmsmart → Settings → General and confirm Default design editor layout is set to Modern or Visual — this is also where you'd see Classic marked as deprecated if a product still uses it.
  2. Install and activate a WordPress translation plugin: Loco Translate for a free, in-browser workflow, or WPML if you already run it for the rest of the store.
  3. In Loco Translate, open Plugins and select Cmsmart Product Designer (NBDesigner) from the list.
  4. Click New language, choose the language you're adding, and let Loco Translate create the translation file from the plugin's template.
  5. Work through the string list — toolbar labels, panel headings, button text, error messages — entering the translation for each, then save.
  6. In WordPress Settings → General, add the new language under Site Language (or configure it in WPML/Polylang if you run a multilingual URL structure).
  7. Open the storefront in that language and run through a test design end to end: product page, editor, Process, and cart, to confirm every string you expect to see is translated.

Classic layout (deprecated, still supported):

  1. In Cmsmart → Frontend Translate, click Add New Language and choose the language to translate into.
  2. Use the search box to filter for the on-screen text you want to change, click it, type the translation, and confirm.
  3. Click Save Language once you've worked through the strings that matter for your Classic-layout products.
  4. Switch the Site Language in WordPress → Settings → General the same way as the Modern path, then verify the result on a Classic-layout product page.
Video thumbnail: managing WooCommerce Online Designer Frontend Translate in the backend
Video: How to manage WooCommerce Online Designer Frontend Translate in Backend (Cmsmart on YouTube).
Invitation product page on the Cmsmart Product Designer demo store with the Start and upload design button
The storefront button text — Start and upload design here — is exactly the kind of string Loco Translate or Frontend Translate lets you overwrite per language.
Translate WooCommerce product designer toolbar and template panel strings in the online editor
Every label in this toolbar and template panel — Templates, Text, Cliparts, Photos, Elements, Layers, Process — is a separate string in the plugin's translation file.
Mobile product page for the WooCommerce product designer at a 390px viewport
Check the mobile layout too — most international traffic to a storefront designer arrives on a phone, where a half-translated button is even more obvious.

For WPML stores specifically: Cmsmart Product Designer's AI tools — AI preflight, upscale, background removal — run through Cmsmart Cloud rendering, and once failed with a license error under WPML's language-directory URLs because the license check used the wrong home URL for a translated page. That was fixed in version 2.12.0, so AI preflight and the other Cmsmart Cloud AI tools now recognize the license correctly on every language directory.

Going further: custom multilingual development from Cmsmart

Beyond string translation, Cmsmart builds merchant-specific multilingual work — automatic buyer-locale detection, translated print-ready output, and right-to-left language support — as custom development on top of the core plugin, scoped to what your store actually needs.

Translating the interface covers most stores. A few requests come up often enough that they are worth planning for as custom development rather than expecting them in the core plugin:

  • Automatic locale detection — switching the designer's language to match the buyer's browser or WPML language automatically, instead of relying on a manual site-language setting.
  • Translated print-ready PDF labels — carrying the buyer's language into the production file's own labels and layer names, not just the on-screen editor.
  • Right-to-left language support — adapting the designer's panels and text tool for Arabic, Hebrew or other RTL markets.
  • Shared glossary across systems — keeping product and printing-option wording consistent between the storefront, the designer and an ERP/PIM feed in multiple languages.
  • Per-market template sets — showing different starter templates by storefront language or region instead of one global template library.

Cmsmart's delivery model for this kind of work runs discovery → solution design → sprints → QA → launch → support, the same process behind the custom ecommerce projects in our portfolio. See the product designer customization service for how this kind of engagement is scoped and priced.

Get a quote for multilingual designer development

Why work with Cmsmart for multilingual commerce?

Cmsmart has built WooCommerce product customization since 2012 as a Netbase JSC division, with 6,300+ client projects and a 4.2 Trustpilot rating, including stores that specifically asked for storefront and designer translation.

Cmsmart (Netbase JSC) has worked on web-to-print and product-customization projects since 2012, with 6,300+ client projects and 1,800+ live stores running today. Reviews on Trustpilot sit at 4.2 out of 5 across 404 reviews, and translation is a recurring theme in them — one reviewer wrote simply: "Thank you very much for my Web site translation." — antonissanchez, Trustpilot, Sep 2022. For a deeper look at the designer itself, see the Cmsmart Product Designer product page.

Frequently asked questions

Does Cmsmart Product Designer support multiple languages out of the box?

Yes. Every interface string on the Modern/Visual layout is a standard, translatable WordPress string, and the Classic layout has its own Frontend Translate screen. Neither requires custom code to add a language.

Which layout should I use for translation, Modern or Classic?

Use Modern or Visual with Loco Translate or WPML for any new work — it's the recommended, actively developed layout. Classic's Frontend Translate screen still functions in 2.17.0, but Cmsmart has stopped adding features to the Classic layout.

Do I need a separate plugin for storefront vs. designer strings?

No. Your theme, WooCommerce and Cmsmart Product Designer's Modern-layout strings all go through the same WordPress translation system, so one plugin like Loco Translate or WPML covers all of them.

Will translating the designer affect my checkout or order emails?

Translating the designer's own strings doesn't touch WooCommerce's checkout or email templates — those are translated separately, the same way you'd translate any WooCommerce store. One related fix in 2.17.0: the admin approval-notification email now checks the order status by its internal key rather than its translated subject line, so approval emails work correctly on translated stores.

Can buyers switch languages themselves on the storefront?

That depends on your language plugin, not the designer. WPML and Polylang both support a visible language switcher; the designer simply follows whatever language WordPress is currently serving.

How long does a full multilingual setup take?

Translating one language's worth of designer strings with Loco Translate typically takes under two hours for a focused pass, since you're working from the plugin's existing translation template rather than writing copy from scratch. Reviewing the result end to end on the storefront adds another short pass.

For more on configuring the designer's admin side, see How to use the WooCommerce product designer plugin in the backend and how to create a component in Product Builder.