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

• Show bleed: Display bleed lines to help users design with print safety zones in mind.

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

• Logo: Upload your brand logo to display inside the design editor.

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

• 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.

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

• 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.

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.

• Enable QR Code Tool

• Default QR Value: You can predefine default value (e.g., your store homepage or placeholder text)

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.

• 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.

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

• Login Required: Restrict uploads to logged-in users only. This helps prevent spam or malicious uploads.

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

• Minimum resolution DPI for JPG/JPEG: Define a minimum DPI to ensure printable quality. Example: Set to 150 or 300 for professional printing.

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:

• Facebook

• Instagram

• Google Drive (requires Google API Key & Client ID)

• Dropbox (requires Dropbox App ID)

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

• Delete uploaded files after X days: Helps manage server storage by automatically removing old, unused uploads. Leave blank to keep files permanently.

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

• 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.

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:

  • 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.

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

• Convert Fonts to Outlines: Converts text into SVG paths (vector shapes) instead of keeping them editable fonts.

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:

  • Sections: Organized into tabs or segments.

  • Table: Tabular layout for option pricing (ideal for bulk orders).

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:

  • 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.

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.