Introduction: Why Settings Matter in Product Customization
If you're running an online store using WooCommerce and want to offer custom products—like T-shirts, mugs, business cards, or signage—then configuring the WooCommerce Product Designer plugin properly is essential.
This plugin turns your store into a live customization platform where customers can design their own products before purchasing. With the right settings, you can create a better experience, streamline operations, and grow your business.
Configure Layout and Output Settings for a Better Design Experience
The plugin allows you to choose between different layout styles that control how the design editor appears on the frontend:
-
Modern Layout is clean, responsive, and optimized for mobile. It’s recommended for most use cases.
-
Standard Layout is a basic version suitable for legacy users or simpler product types.
Output resolution should be set to 300 DPI for high-quality print production. This ensures exported designs are clear and professional.
You can also define measurement units—centimeters, millimeters, or inches—based on your production or regional standards. This ensures dimensions in the editor align with your real-world product sizes.
Use Case: A print-on-demand T-shirt business sets the editor to Modern Layout and 300 DPI with centimeters to match their heat transfer printing specs. Customers can easily design and export print-ready artwork without needing extra support.
Enable Customer Artwork Uploads for Professional Buyers
Allowing customers to upload their own design files is a must-have for businesses that serve corporate clients or experienced designers.
To support this, enable uploads of common file types like PDF, SVG, PSD, PNG, and AI. You can also set file size limits to protect your server from overload and apply validation to filter out unsupported formats.
Use Case: A B2B customer uploads their logo and tagline in PDF format to order 100 custom notebooks for an upcoming event. This saves design time and ensures brand consistency.
Set Up Design Download Options for Better Transparency
Giving customers the ability to download their design file increases trust and reduces order disputes. You can enable file downloads in formats like PNG, JPG, SVG, and PDF.
Decide whether downloads are available only after checkout, or anytime during the design process. You can also choose between exporting full designs or exporting individual layers.
Use Case: A customer designing wedding invitations downloads a PDF preview to confirm the layout with their partner before placing the final order.
Configure Email Notifications to Streamline Communication
The plugin lets you automate notifications to both store admins and customers—eliminating manual follow-up and ensuring fast turnaround times.
Enable:
-
Customer notifications when they save a design
-
Admin alerts when a new design is submitted
-
Custom email content using tags like
Use Case: A design confirmation email is automatically sent to the customer, giving them peace of mind and reducing customer service inquiries about design status.
Connect External Sources for Creative Flexibility
WooCommerce Product Designer integrates with several media platforms, allowing users to bring in their own content easily.
You can activate integration with:
-
Instagram and Facebook to import personal or brand images
-
Google Drive and Dropbox to upload logos or designs directly
-
Unsplash to provide free stock images right within the design tool
Use Case: A customer creates a personalized photo mug using their Instagram vacation picture and overlays a quote using your design template—making the product more emotional and shareable.
Assign Pages to Guide the Customer Journey
To offer a frictionless experience, the plugin requires dedicated pages for each part of the workflow.
Set up:
-
A Design Editor Page where the customization happens
-
A Design Gallery Page where users can access past designs
-
A Download Page for retrieving completed files
-
Redirect pages to guide customers after saving or completing a design
Be sure to customize these page names and links to reflect your store’s tone and branding—for example, use “My Projects” instead of “Design Gallery” for a more user-friendly experience.
Use Case: An online poster shop renames its design pages to “Create Your Print” and “Saved Posters” to match the brand’s tone and make the navigation more intuitive for first-time users.
Use System Tools to Improve Performance and Stability
The WooCommerce Product Designer plugin includes several tools to help your store run smoothly and scale reliably.
-
Log Mode: Records system behavior and plugin actions to help diagnose bugs or performance issues.
-
Auto Image Resize: Automatically resizes uploaded images to prevent server strain and reduce frontend load times.
-
Font-to-SVG Conversion: Ensures that text is exportable as vector graphics for precise printing.
-
WebSocket Support: Enables real-time updates in collaborative environments.
Use Case: If you're working with a remote design assistant or production partner, real-time updates reduce miscommunication and delays.
Common Business Use Cases for These Settings
Custom Apparel Stores
Let shoppers design front and back zones, upload art, and preview in real-time. Offer variable pricing for different print areas and file uploads.
Use Case: A local sportswear brand allows customers to upload player names and numbers to the back of shirts, increasing unit price while giving full personalization.
Promotional Product Sellers
Enable bulk orders for mugs, notebooks, and calendars. Allow clients to upload logos or personalized names, and send downloadable proofs before fulfillment.
Use Case: A promotional company uses the plugin to fulfill a 500-unit custom mug order by enabling batch personalization and admin-side file approval.
Print Shops and Marketing Agencies
Support PDF and SVG uploads for brochures, flyers, and cards. Let clients download and review designs before placing large print orders.
Use Case: A print agency sets up the plugin to allow clients to upload AI files and download design previews, streamlining client approvals and speeding up project timelines.
Configure Appearance Settings for a Better Frontend Experience
The Appearance tab controls how the design editor looks and behaves. These options impact usability, especially for first-time customers or mobile users.
Design Editor Options
Use Case: A printing business enables bleed lines for brochure designs to prevent cutting important content during trimming.
Modern Layout Enhancements
These options apply only when using the Modern layout:
-
Show color/palette: Show or hide the color selector in the design tool.
-
Show ruler: Display vertical and horizontal rulers to aid alignment.
-
Show product dimensions: Show or hide product dimensions visually.
-
Show grid: Enable gridlines for easier layout control.
-
Show layer dimensions: Display size of each design element.
-
Show warning out of safe zone: Alert when a design element crosses the safe printing boundary.
-
Show warning image low resolution: Warn if the uploaded image isn't suitable for print.
Use Case: A business offering custom wall prints enables both the grid and warning alerts to help non-designers create properly aligned, print-safe artwork.
Interface Customization
You can choose which tabs and features to show/hide to simplify the UI:
-
Show/hide design area border
-
Hide Templates / Elements / Typography / Layers tabs
-
Enable/disable button for changing product
-
Show/hide template information below thumbnails
-
Display template mode: Choose “Flatlist” or “Categories”
-
Browse templates button: Show a shortcut for template browsing
Use Case: A store that offers a limited number of curated templates hides the Layers and Typography tabs to streamline the design tool for casual users.
Brand Integration
Use Case: A creative agency adds their logo to reinforce branding when clients design custom merchandise through their storefront.
Product Settings: Where and How Customers Access the Design Tool
Display Options
-
Show design tool: Choose whether to launch the editor on the product page or in a popup.
-
Auto add to cart and redirect: Automatically redirect users to the cart after saving their design.
-
Position of design button: Customize placement of the “Start Design” button.
Use Case: A WooCommerce store selling personalized phone cases places the design button before product variations, ensuring customers personalize before choosing size or model.
Button Customization
-
Add custom class for design button (e.g., md-btn for Tailwind or Bootstrap)
-
Hide Add to Cart button until design is complete
Use Case: A store that offers highly customized products hides the Add to Cart button to ensure designs are submitted first—reducing order issues and chargebacks.
Cart, Checkout, and Order Settings
Use Case: An online gift shop enables design previews in the cart and order to give customers peace of mind and reduce refund requests.
Misc Features
Use Case: A busy customer browsing gift templates clicks “Let us design for you” to have your team handle it—unlocking a new upsell and service revenue stream.
Configure Text Tools to Enhance Typographic Customization
The Design Tool tab lets you control how users interact with the design editor. This includes what tools they can access, default fonts, color options, alignment behavior, and even zoom limits. Tailoring this to your store’s needs helps improve usability and prevent design mistakes.
The text tool is the heart of many customized products. Whether customers are adding names, messages, or quotes, having flexible and intuitive text settings ensures a better experience and print outcome.
-
Enable Add Text Tool: Allows users to add text directly onto the product.
-
Default Font Subset: Support all languages or restrict to your local language set.
-
Enable Check Text Language: Warns if selected font can’t render certain characters.
-
Default Text Color: Define a pre-set color to align with your branding or limited color palette.
-
Enable Curved Text: Allow creative text shapes for advanced designs.
-
Enable Unproportional Transform: Let users resize text height and width freely.
-
Default Font Sizes: Define a list of allowed font sizes.
-
Force Min/Max Font Size: Lock font scalability to safe ranges.
-
Show/Hide Frontend Text Features: Enable or disable text formatting options like bold, italic, underline, alignment, spacing, opacity, rotation, etc.
Use Case: A mug store uses curved and size-limited text to avoid distortion, helping customers create beautiful, production-safe typography designs without guesswork.
Enable and Control Clipart, Icons, and Elements
Allow customers to decorate their designs with vector graphics, icons, and shapes. These options are especially useful for non-designers who want to enhance their product without uploading custom graphics.
-
Add Clipart Tool: Enable customers to insert clipart.
-
Clipart Feature Visibility: Show/hide color control, rotation, opacity.
-
Enable Shapes, Icons, Flaticon, Storyset: Add visual elements from various sources.
-
Enable Frames: Use grid and photo frames to structure designs.
-
Enable Static Google Maps: Let users include map visuals (needs API key).
Use Case: A real estate firm orders personalized folders with their logo and office location map printed. The team uses the Google Map and clipart features to build a professional design in-browser.
Image Upload and Source Integration Settings
Image uploads are core to personalized products. WooCommerce Product Designer supports both uploads and third-party image sources.
-
Enable Add Image Tool
-
Enable Uploads: Allow customers to upload images from their device.
-
Auto-Fit Image to Stage: Automatically resize uploads to canvas dimensions.
-
Login Required: Restrict image upload to logged-in users.
-
Multiple Uploads: Allow more than one file at a time.
-
Image Size and DPI Settings: Define upload size limits and DPI requirements.
-
Enable Resolution Warning: Alert users about poor-quality images.
-
Enable External Sources: Google Drive, Pixabay, Unsplash, Pexels, Freepik, Facebook, Instagram, Dropbox (requires API keys).
-
Enable SVG Uploads and Webcam Capture
-
Enable Image Filters
-
Generate Thumbnails for Uploads
-
Show Terms and Conditions: Add custom terms before uploading images.
Use Case: A print shop working with corporate gifts enables Dropbox and Instagram integrations so clients can easily pull branded content into their designs without file transfers or email chains.
Draw Tools for Artistic and Interactive Products
Free drawing tools let users add artistic flair or create hand-drawn designs. Useful for creative gifts, kids’ art products, or art-related ecommerce.
-
Enable Free Draw Tool
-
Choose Drawing Modes: Brush, pencil, spray, pattern, geometric shapes (circle, triangle, line, hexagon…)
-
Show/Hide Drawing Features in Frontend
Use Case: A gift shop selling “Kids Art T-Shirts” enables drawing tools so children can sketch directly on a virtual shirt before parents place the order.
QR Code Generator for Smart & Trackable Products
Add a functional twist by enabling customers to generate and place QR codes in their designs.
Use Case: A business card printing service uses the QR tool to let customers add direct links to their LinkedIn or website, creating modern, scannable cards on the fly.
Misc Settings for Template Behavior and Design Controls
These settings help you control how templates load and how layers behave, which is especially useful for advanced product builders or high-volume stores.
-
Enable Centered Scaling
-
Always Show Layer Corner Actions
-
Disable Auto Load Template: Load blank canvas unless template is selected
-
Lazy Load Templates: Improve performance for heavy template files
-
Auto Fill Template Placeholders: Automatically apply selected images to templates
-
Limit Photos by Placeholders
-
Prevent Deleting Layers or Adding New Layers
-
Enable New Template Loading Method (Beta)
-
Enable Template Mapping: Auto-fill template fields from structured content
-
Enable vCard: Add digital business card functionality
Use Case: A digital printing agency uses template mapping and lazy load to speed up loading on complex brochure templates, streamlining B2B workflow and improving editor performance.
Configure Color Settings for Creative Control and Brand Consistency
The Colors tab allows you to control how your customers interact with colors in the design editor. This is crucial for maintaining print compatibility, enforcing brand colors, or allowing full freedom depending on your business model.
Use Case: A print-on-demand business targeting corporate clients disables the full color picker and uses only a predefined palette to ensure all colors used match CMYK print values and avoid unexpected output differences.
Configure Upload Settings for Safe and Flexible File Management
The Upload Settings section allows you to control how users upload files, what formats are supported, and whether they must log in to do so. These settings are crucial for security, file compatibility, and overall user experience.
Access Control
Use Case: A corporate merchandise portal requires user login to upload branded content—ensuring only authorized marketing teams can submit artwork.
Allowed and Disallowed File Types
-
Allowed file types: Enter a list of allowed file extensions (e.g., jpg,bmp,pdf,ps). Leave empty to allow all except disallowed types.
-
Disallowed file types: List any restricted file types (e.g., png,gif).
Use Case: A print shop disables PNG and GIF formats to ensure all uploads meet high-resolution and print-safe requirements like PDF or AI.
Upload Limits and File Size
-
Max uploads per user: Limit how many files can be uploaded at once.
-
Min uploads per user: Define a minimum (e.g., 0 or 1).
-
Max file size: Set upload limits in MB (e.g., 128 MB).
-
Min file size: Useful to filter out empty or tiny test files.
Use Case: A wall art store limits uploads to 1 high-quality image at a time to reduce confusion and server load.
Preview Options
-
Create Preview for Images: Generate a thumbnail preview of uploaded images.
-
Preview Width: Set preview width (in px), e.g., 200px.
Use Case: A gift shop enables previews to give customers instant feedback, but restricts preview size to reduce server memory usage.
Resolution Checks
Use Case: A printing company sets a 300 DPI minimum to reject pixelated uploads and reduce complaints about blurry final products.
Upload Mode
-
Simple Mode: Basic upload interface, quick and minimal.
-
Advanced Mode: Required if your store uses templates with photo frames or wallpaper layouts.
Use Case: A canvas print shop uses Advanced Mode so customers can drag uploaded photos into pre-designed frames with automatic cropping.
Social and Cloud Integration
Enable upload from third-party sources for convenience:
Use Case: An online photobook builder integrates Facebook and Google Drive uploads, making it easy for customers to access personal photos from anywhere.
Auto File Cleanup
Use Case: A print-on-demand store sets auto-delete to 14 days to balance user convenience with storage cost, ensuring old test files don’t clog the server.
Configure Output Settings for Production-Ready Files and Secure Delivery
The Output tab controls how designs are exported, watermarked, protected, and synchronized with external storage. These settings are critical for businesses offering downloadable proofs, automated fulfillment, or off-site file handling.
Watermark Settings
Use Case: A print-on-demand art store watermarks preview PDFs before purchase to protect artist designs from being downloaded and reused without paying.
PDF Protection and Bleed
-
Enable PDF Password: Customers must enter a password to edit the downloaded PDF.
-
PDF Password Field: Enter a custom or auto-generated password.
-
Show Bleed:
-
TrueType Fonts: Define fonts to be embedded into PDF exports.
Use Case: A professional print service embeds specific TrueType fonts and applies bleed margins so that customer designs meet print-production quality without manual intervention.
PDF Export Automation
-
Auto Export Design to PDF: Automatically convert designs to PDF upon status change.
-
Order Status Trigger: Choose which order status triggers PDF export (e.g., Completed, Processing, On Hold).
Use Case: A B2B marketing agency uses automatic PDF export at the “Processing” stage to send files directly to the print team once the order is confirmed.
File Synchronization Options
Automatically move exported files to external storage locations after export:
-
Options:
-
FTP
-
SFTP
-
Dropbox
-
Amazon S3
-
Google Cloud Storage
Use Case: A company working with international fulfillment partners syncs exported design files to an Amazon S3 bucket so their printer in another country can instantly access them.
Connection Fields (based on chosen method)
Each service has its own connection settings:
-
FTP/SFTP: Host, port, username, password, private key (for SFTP), and directory path
-
Dropbox: Token and target folder
-
Amazon S3: Credentials, region, bucket name, directory path
-
Google Cloud: Project ID, bucket, service account JSON key, and directory path
Use Case: An online photo printing service uploads completed designs to a Google Cloud bucket, using it as a centralized hub for internal and external production workflows.
JPG Export Settings
-
Default ICC Profile: Choose an ICC color profile (e.g., Coated FOGRA27) to ensure color accuracy in printed JPG exports.
-
Requires Imagemagick + lcms2 support on the server.
Use Case: A signage printer uses the FOGRA27 ICC profile to ensure exported colors match CMYK printing specs for large-format banners.
SVG Export Settings
Use Case: A sticker manufacturer enables this option to avoid font compatibility issues when cutting or printing SVGs in third-party software like Illustrator or CorelDRAW.
Configure Printing Options for Smarter Pricing, Cart Visibility, and Checkout Control
The Printing Options tab fine-tunes how your product customization behaves on the frontend, in the cart, and during checkout. These settings are essential for stores offering custom pricing, dynamic options, and complex product configurations like business cards, t-shirts, labels, and more.
General Settings
-
Number of Decimals: Controls how many decimal places are shown in option prices (e.g., 2 = $19.99).
-
Enable Rich Snippet Price: Allows Google and search engines to detect price even if your base price is 0.
-
Options Display Style:
Use Case: A wholesale store displays pricing in a table to let customers compare quantity breaks and size/print combinations more clearly.
-
Hide Add to Cart Button Until All Required Options Are Chosen: Prevents incomplete submissions for required fields.
-
Hide Summary Options / Float Summary Options: Show/hide the summary box and optionally float it for better UX.
-
Hide Table Pricing: Toggle visibility of pricing table.
-
Table Pricing Type: Choose between quantity range or quantity break formats.
-
Hide Option Swatch Description: Hides visual labels or descriptions from swatches.
-
Change Original Product Price: Overwrites default price dynamically based on selected options.
-
Auto Hide Price If Zero: Keeps the interface clean by hiding “$0” fields.
-
Option Description Tooltip Position: Show tooltips above, below, left, or right of option labels.
-
Advanced Dropdown Sub-List Position: Adjusts the position of sub-options (e.g., below or right).
Use Case: A stationery shop hides all zero-price labels and enables tooltips on the right to simplify pricing while still offering detailed info on hover.
Frontend Behavior
-
Display Product Options On:
-
Map Print Options with Product Attributes: Syncs customization with WooCommerce variable attributes.
-
Show Number of Cart Items in Favicon: Adds a real-time cart count badge on browser tabs.
Use Case: A custom apparel store maps print areas (front, back, sleeve) with variable options like color and size to create a seamless UX.
Catalog Settings
-
Force Select Options: Forces customers to click and review customization before adding to cart.
-
Show Options in Archive Shop Pages: Display swatches or previews directly in product grids or collection pages.
Use Case: A sticker shop allows users to choose size and finish directly from the category page, speeding up the browsing process and boosting engagement.
Cart Behavior
-
Ajax Cart: Adds products to the cart without page reload.
-
Turn Off Persistent Cart: Improves performance if your products have dozens of dynamic options.
-
Clear Cart Button: Gives users an easy way to reset selections.
-
Hide Options in Cart: Prevents option clutter if not necessary.
-
Hide Option Price in Cart: Hide individual customization costs in the cart display.
Use Case: A streamlined gift shop uses Ajax cart with hidden options to focus on the product image and message summary, keeping the cart visually simple and elegant.<
As you know, before deciding to buy a product, especially intellectual products such as software, we must always learn about how to use that product. However, with increasing demand, increasingly diverse customers, having a simple product easy to use and has many features that can be used immediately is extremely difficult. Therefore, before you buy products at CMSmart, we always try and provide the most detailed documentation, video guide for our customers, so that you can use the product simply and the easiest.
WordPress Online Design, as one of our the most outstanding products. The end-user will easily implement the design version she/he likes with our useful and easy-to-use feature. Besides, we also provide many tools to help the user get the quick steps to achieve the wanted features. Therefore, below are some detailed guidelines on using WordPress online design products that we would like to introduce to you. Here we go!
Design product with Woocommerce product designer plugin.
1. How to create a template?
- First, how to go to the designer page? In the frontend, your customer can go to the designer page with some easy steps: Click "Start design" button, then access "Design Here Online"
- Second, select a template you like to design
2. Insert and edit text on the template
- Step 1: Move to Text Menu
- Step 2: Select and click to add Text you like
Then, you can change the text color with document colors
Next, your customers can change the text font type they want.
3. Insert and edit clipart.
There are many interesting clip arts in WordPress online design that you can choose to insert for your design.
Step 1: Click the clipart menu and search: Enter the name of clipart to search.
Step 2: Click or drag&drop to add clipart.
Then, do you want to change color of clipart? Click your clipart on design, choose one color you like in document color.
4. Insert and edit the image.
How to insert a photo?
Step 1: Move to Photos menu
Step 2: Upload image
- Way 1: You can upload files with "Image Upload" Button (Only accept file types have the file size from 0 Mb to 20 Mb)
- Way 2: Use the image URL to insert Photos.
- Another way: Insert photo in the image library.
5. Insert and edit the element.
Shape
Step 1, you move to the Element menu Custom Design Shapes. Then, you click or drag&drop to add shapes
Step 2, you can change the color of shape with document colors
Icons
Move to the Element menu and click "Icon" Button to insert Icon for your design. There are many Icons in the Icon library that you can choose.
Customize drawing with Draw Feature
6. Check the design
How can your customers check their designs in WordPress Online Design tool?
First: Go to your count -> view order
Click on the order number to view detail.
- If display notification “Rejected! Click here to design again!”, the customer will design again.
- If display notification “Approved!”, the customer’s designs are accepted.
Above is my introduction about "How to use Wordpress Online Design plugin in Frontend". I hope that this post, in my opinion, brought you some useful information. If you have any questions, please contact the Support Team or information below. If you want to know more about NB WordPress Design, you can try this product by access Live Demo or nbdesigner.cmsmart.net.
Do you want to receive coupon code from our promotion program? Please access promotion programs. Thank you for reading and keep following us to get more information in the next article! Bye, See you again!
Vincent
Sales Consultant Manager
Skype: live:vincent_4281
Phone/ WhatsApp: +84 355 993 306
Email: [email protected]
