That's what one of our clients, Jessica, told us. She was running a small mug store on WooCommerce—sales were okay, but stuck.
Until she discovered personalization.
Until she discovered Cmsmart.
Fast-forward 30 days:
- ✅ Her store was redesigned with AI product options
- ✅ Customers could design their own mugs with 3D preview
- ✅ AOV jumped by 42% — and she finally felt in control
Want to learn how she did it (and how you can too)?
🎓 Join our FREE 30-Day Email Course:
"Personalize, Launch & Scale – The Smart Ecommerce Way"
You'll get:
- ✔ 1 lesson a day, straight to your inbox
- ✔ Real store examples, demos & playbooks
- ✔ No tech jargon. Just strategy that works.
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.
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.
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.
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
,
,
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
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 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.
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.
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.
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.
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
Show bleed: Display bleed lines to help users design with print safety zones in mind.
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.
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
Brand Integration
Logo: Upload your brand logo to display inside the design editor.
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.
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
Cart, Checkout, and Order Settings
Show design preview in cart and checkout: Allow customers to view their customized design before paying.
Show design in order: Display thumbnail of the design in backend and confirmation emails.
Misc Features
Enable service “Let’s design your artwork for you”: Let customers request design help.
Show popup design option in category pages: Allow customers to launch the designer directly from product listings.
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.
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).
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.
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
QR Code Generator for Smart & Trackable Products
Add a functional twist by enabling customers to generate and place QR codes in their designs.
Enable QR Code Tool
Default QR Value: You can predefine default value (e.g., your store homepage or placeholder text)
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
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.
Show All Colors:
Yes – Users can select any color using a full color picker.
No – Users can only pick from a predefined color palette set by your store.
Enable Color Pick Eyedropper:
Yes – Activates an eyedropper tool to let users select colors from anywhere on the screen or uploaded image.
No – Removes this feature from the editor.
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
Login Required: Restrict uploads to logged-in users only. This helps prevent spam or malicious uploads.
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
).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.
Preview Options
Create Preview for Images: Generate a thumbnail preview of uploaded images.
Preview Width: Set preview width (in px), e.g., 200px.
Resolution Checks
Minimum resolution DPI for JPG/JPEG: Define a minimum DPI to ensure printable quality. Example: Set to 150 or 300 for professional printing.
Upload Mode
Simple Mode: Basic upload interface, quick and minimal.
Advanced Mode: Required if your store uses templates with photo frames or wallpaper layouts.
Social and Cloud Integration
Enable upload from third-party sources for convenience:
Facebook
Instagram
Google Drive (requires Google API Key & Client ID)
Dropbox (requires Dropbox App ID)
Auto File Cleanup
Delete uploaded files after X days: Helps manage server storage by automatically removing old, unused uploads. Leave blank to keep files permanently.
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
Watermark: Choose when to apply watermarking:
Always
Before complete order
No watermark
Watermark Type:
Image (upload logo or stamp)
Text (e.g., brand name or copyright notice)
Watermark Image/Text: Upload or define your watermark to prevent unauthorized use or to brand previews.
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:
Show bleed lines above or below the artwork in the exported file for trimming accuracy.
TrueType Fonts: Define fonts to be embedded into PDF exports.
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).
File Synchronization Options
Automatically move exported files to external storage locations after export:
Options:
FTP
SFTP
Dropbox
Amazon S3
Google Cloud Storage
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
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.
SVG Export Settings
Convert Fonts to Outlines: Converts text into SVG paths (vector shapes) instead of keeping them editable fonts.
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:
Sections: Organized into tabs or segments.
Table: Tabular layout for option pricing (ideal for bulk orders).
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).
Frontend Behavior
Display Product Options On:
Popup: Opens a modal editor.
Product Tab: Displays options directly on the product detail page.
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.
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.
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.