Quick Start #
This Quick Start guide introduces the basic workflow for creating and selling customizable products with Product Designer App for WordPress.
You will learn how the main parts of the plugin work together, how to prepare your first product, and where to find detailed instructions for each setup step.
By the end of this guide, you should understand the complete workflow from product configuration to generating a production-ready print file.
Before You Begin #
Make sure the following requirements are ready:
- WordPress is installed and working correctly.
- WooCommerce is installed, activated, and configured.
- Product Designer App is installed and activated.
- Your WordPress theme supports standard WooCommerce product pages.
- You have administrator access to the WordPress dashboard.
- You have product images available for the product you want to configure.
For the best results, prepare high-quality product images before starting. PNG images with transparent backgrounds are recommended when the product requires multiple layers, masks, colors, or visual effects.
Product configuration may vary depending on the type of product, printing method, product image structure, and customization experience you want to provide.
How Product Designer App Works #
Product Designer App connects three main parts of the product customization workflow:
- Product Base
- WooCommerce Product
- Design Studio
The Product Base contains the visual and technical configuration of the customizable product.
The WooCommerce product contains the commercial information, such as:
- Product name
- Description
- Price
- Categories
- Shipping information
The Design Studio is the customer-facing editor where shoppers customize the product before adding it to the cart.
The basic relationship is:
Product Base
↓
WooCommerce Product
↓
Design Studio
↓
Cart and Checkout
↓
WooCommerce Order
↓
Print FileUnderstanding the Product Base #
A Product Base is the reusable configuration that defines how a customizable product appears and behaves inside the Design Studio.
It may include:
- Product views, such as front, back, left, or right
- Product colors
- Product sizes
- Product variations
- Product images
- Image layers
- Design areas
- Masks and overlays
- Reusable components
- Printing configuration
- Output dimensions
One Product Base can be connected to one or multiple WooCommerce products.
For example, you can create one T-shirt Product Base and connect it to several WooCommerce products that use different names, prices, categories, or marketing descriptions.
Understanding Printing Types #
A Printing Type defines how customization prices and print output settings are calculated.
Depending on your production workflow, a Printing Type may represent:
- Direct-to-Garment printing
- Direct-to-Film printing
- Sublimation
- Screen printing
- UV printing
- Embroidery
- Engraving
- Standard digital printing
A Printing Type can control settings such as:
- Printing price
- Pricing method
- Number of printed sides
- Output resolution
- Print file format
- Design area size
- Additional printing charges
Printing Types can be reused across multiple Product Bases.
The Basic Setup Workflow #
Creating a customizable product normally involves the following steps.
1. Create a Printing Type #
Create or select the printing method used for the product.
Configure the basic pricing and output settings required for your production workflow.
You may reuse an existing Printing Type when multiple products use the same printing method and pricing rules.
2. Create a Product Base #
Create the reusable product configuration.
Enter the product name and configure the general settings that control how the product works in the Design Studio.
The Product Base is separate from the WooCommerce product.
3. Add Product Views #
Create the views customers can customize.
Common product views include:
- Front
- Back
- Left side
- Right side
- Inside
- Outside
A simple product may require only one view, while a more advanced product may include several views.
4. Add Product Images #
Upload the images used to display the product in the Design Studio.
Depending on the product, you may use:
- A single background image
- Multiple image layers
- Transparent overlays
- Color-specific images
- Masks
- Shadow or texture layers
The order of the image layers determines how the product and customer design appear in the preview.
5. Create Design Areas #
A Design Area defines where customers can place text, images, artwork, and other customizable elements.
For each Design Area, configure:
- Position
- Width and height
- Printable dimensions
- Printing resolution
- Allowed design boundaries
- Clipping behavior
- Associated Printing Type
Design Areas should match the actual printable regions used in production.
6. Configure Colors and Sizes #
Add product colors and sizes when required.
Colors can be used to:
- Change the product preview
- Display different product images
- Switch image layers
- Adjust pricing
- Control available variations
Sizes can be used to:
- Display size options
- Adjust pricing
- Connect product configurations
- Match WooCommerce variations
Simple products without color or size options can skip this step.
7. Create a WooCommerce Product #
Create a new WooCommerce product or edit an existing one.
Configure the standard WooCommerce information, including:
- Product title
- Description
- Regular price
- Sale price
- Product image
- Product gallery
- Categories
- Shipping
Connect the WooCommerce product to the appropriate Product Base.
Once connected, the customer can open the product in the Design Studio.
8. Test the Design Studio #
Open the product on the storefront and launch the Design Studio.
Test the customer customization workflow by:
- Adding text
- Uploading an image
- Adding artwork
- Changing colors
- Switching product views
- Moving and resizing design elements
- Checking design boundaries
- Reviewing price changes
- Saving the design
- Adding the product to the cart
Make sure the product preview and customization controls work as expected.
9. Place a Test Order #
Complete a test purchase before making the product available to customers.
Verify that:
- The customized product can be added to the cart.
- The design preview appears correctly in the cart.
- Pricing is calculated correctly.
- Product options and variations are saved.
- The design is attached to the WooCommerce order.
- Preview images are generated.
- Print files can be generated or downloaded.
Testing the complete order workflow helps identify configuration issues before launch.
10. Review the Print File #
Open the test order in the WordPress dashboard and review the generated print file.
Depending on your configuration, the available output formats may include:
- PNG
- SVG
Check the following details:
- Print dimensions
- Design position
- Resolution
- Image quality
- Transparency
- Fonts
- Colors
- Clipping
- Bleed and safe zones
- Front and back output files
The generated file should match the dimensions and requirements of your production process.
Recommended First Product #
For your first setup, choose a simple product with:
- One product view
- One product color
- One design area
- One Printing Type
- A simple WooCommerce product
- Basic text and image customization
A simple product helps you understand the relationship between Product Bases, Design Areas, WooCommerce products, customer designs, orders, and print files.
After completing the basic setup, you can create more advanced products with:
- Multiple views
- Multiple design areas
- Color-specific image layers
- Variable products
- Size-based pricing
- Side-based printing prices
- Masks and visual effects
- Reusable components
- Quantity discounts
Quick Setup Checklist #
Use the following checklist when creating your first product:
- Product Designer App is installed and activated.
- WooCommerce is installed and configured.
- A Printing Type has been created.
- A Product Base has been created.
- At least one product view has been added.
- Product images have been uploaded.
- At least one Design Area has been configured.
- Product colors and sizes have been added if required.
- A WooCommerce product has been created.
- The Product Base has been connected to the WooCommerce product.
- The product has been tested in the Design Studio.
- A test order has been placed.
- The generated print file has been reviewed.
Common Setup Issues #
The Customize Button Does Not Appear #
Check that:
- The WooCommerce product is published.
- The product is connected to a Product Base.
- The Product Base is enabled and configured correctly.
- The WooCommerce product type is supported.
- Your theme is using the standard WooCommerce product template.
The Product Image Does Not Appear #
Check that:
- A product view has been created.
- The product image has been assigned to the correct view.
- The image file is accessible.
- The image layer is visible.
- The image dimensions and position are configured correctly.
Customers Cannot Add Designs #
Check that:
- A Design Area has been created.
- The Design Area is assigned to the correct product view.
- The Design Area has valid dimensions.
- The Design Area is enabled.
- The required design tools are available in the Design Studio.
The Price Does Not Update #
Check that:
- A Printing Type has been assigned.
- Printing prices are configured.
- Side, color, size, or quantity pricing rules are valid.
- The WooCommerce product has a valid base price.
- Product options are connected correctly.
The Print File Has the Wrong Size #
Check that:
- The Design Area’s physical dimensions are correct.
- The output DPI is configured correctly.
- The printable width and height match your production requirements.
- The artwork is placed inside the Design Area.
- The exported file is opened using the correct resolution settings.
Next Step #
You are now ready to create your first customizable product.
Continue to Create Your First Product for a complete step-by-step walkthrough covering:
- Creating a Printing Type
- Creating a Product Base
- Adding product images and Design Areas
- Creating a WooCommerce product
- Testing the Design Studio
- Placing a test order
- Downloading the print file
After completing your first product, explore the Product Setup, Pricing, WooCommerce, and Design Studio sections to learn about more advanced configurations.
