WooCommerce Overview #

Product Designer App integrates seamlessly with WooCommerce, allowing you to sell fully customizable products through the standard WooCommerce shopping experience.

Customers can personalize products directly from the product page, view real-time previews, see updated pricing, add customized products to the cart, complete checkout, and place production-ready orders—all while WooCommerce manages products, inventory, payments, shipping, taxes, and order processing.

This guide provides an overview of how Product Designer App integrates with WooCommerce and explains the relationship between Product Bases, WooCommerce products, customer designs, and orders.

How the Integration Works #

Product Designer App extends the standard WooCommerce product workflow.

The integration follows this process:

Product Base
        ↓
WooCommerce Product
        ↓
Product Page
        ↓
Design Studio
        ↓
Customer Customization
        ↓
WooCommerce Cart
        ↓
Checkout
        ↓
WooCommerce Order
        ↓
Print File

WooCommerce remains responsible for the e-commerce functionality, while Product Designer App manages product customization and print production.

Responsibilities #

WooCommerce Manages #

WooCommerce handles all standard store functionality, including:

• Product catalog
• Product categories
• Product pages
• Inventory management
• Pricing
• Coupons
• Taxes
• Shipping
• Customer accounts
• Cart
• Checkout
• Payment gateways
• Orders
• Emails

Product Designer App Manages #

Product Designer App handles everything related to customization, including:

• Product Bases
• Product Views
• Product Colors
• Product Sizes
• Design Areas
• Design Studio
• Customer artwork
• Printing Types
• Customization pricing
• Design data
• Print-ready file generation

Together, the two systems provide a complete web-to-print solution.

Integration Requirements #

Before using Product Designer App with WooCommerce, make sure you have:

• WordPress installed
• WooCommerce installed and activated
• Product Designer App installed and activated
• A supported WooCommerce theme
• Administrator access

For the best compatibility, use an up-to-date version of WordPress and WooCommerce.

Connect a Product Base #

A Product Base defines how a product can be customized.

A WooCommerce product becomes customizable after it is connected to a Product Base.

Typical workflow:

Create Product Base
        ↓
Configure Views
        ↓
Configure Design Areas
        ↓
Create WooCommerce Product
        ↓
Assign Product Base
        ↓
Publish Product

Once connected, the Design Studio becomes available on the product page.

Product Types #

Product Designer App supports standard WooCommerce product types, including:

Simple Products #

Suitable for products with:

• One SKU
• Fixed inventory
• Simple pricing

Examples:

• Mug
• Phone Case
• Sticker
• Poster

Product Page Integration #

When a Product Base is assigned, the product page displays the customization interface.

Typical customer workflow:

Open Product
        ↓
Select Options
        ↓
Click Customize
        ↓
Open Design Studio

The exact appearance depends on your theme and Product Designer App settings.

Design Studio #

The Design Studio is embedded into the WooCommerce shopping experience.

Customers can:

• Add text
• Upload images
• Add clipart
• Change colors
• Switch Views
• Move objects
• Resize objects
• Rotate objects
• Save designs

All customization is stored together with the WooCommerce order.

Product Pricing #

The final product price is calculated using both systems.

WooCommerce Product Price + Customization Price = Final Price

WooCommerce provides:

• Base price
• Sale price

Product Designer App provides:

• Printing costs
• Side pricing
• Color pricing
• Size pricing
• Quantity pricing

The total updates automatically while the customer customizes the product.

Cart Integration #

After customization, the product is added to the WooCommerce cart.

The cart contains:

• Product information
• Selected variations
• Quantity
• Customization preview
• Product options
• Customization price

Customers can review their customized product before checkout.

Checkout Integration #

The checkout process remains unchanged.

WooCommerce manages:

• Billing details
• Shipping information
• Payment
• Taxes
• Coupons
• Order confirmation

The customization data is automatically attached to the order.

Order Management #

Customized orders appear in WooCommerce like standard orders.

Each order also contains:

• Customer design
• Design preview
• Product configuration
• Selected options
• Print information

Store administrators can review the design before production.

Print Files #

After an order is placed, Product Designer App can generate production-ready files.

Supported formats include:

• PNG
• PDF
• SVG

Generated files use the configured Design Areas and Printing Types.

Theme Compatibility #

Product Designer App is designed to work with most WooCommerce-compatible themes.

For the best results, use themes that follow WooCommerce template standards.

If your theme heavily customizes the product page, additional integration adjustments may be required.

Third-Party Plugins #

Product Designer App is compatible with many WooCommerce extensions, including:

• Currency switchers
• Multilingual plugins
• SEO plugins
• Payment gateways
• Shipping plugins

Compatibility may vary depending on how a plugin modifies the WooCommerce product page.

Always test third-party plugins before deploying them to a production store.

Typical Workflow #

The complete integration process is:

Create Product Base
        ↓
Configure Product
        ↓
Create WooCommerce Product
        ↓
Assign Product Base
        ↓
Customer Customizes Product
        ↓
Add to Cart
        ↓
Checkout
        ↓
WooCommerce Order
        ↓
Generate Print File

Best Practices #

For a reliable integration:

• Keep WooCommerce updated.
• Keep Product Designer App updated.
• Use supported themes.
• Keep product attributes consistent.
• Test every variation.
• Test pricing after configuration changes.
• Place test orders before publishing.
• Verify generated print files.
• Test checkout with all payment methods.

Common Issues #

Customize Button Does Not Appear #

Check that:

• The Product Base is assigned.
• The product is published.
• Product Designer App is enabled.
• The theme supports standard WooCommerce product templates.

Product Cannot Be Customized #

Verify that:

• A Design Area exists.
• The Product Base is active.
• Views are configured correctly.
• The required assets are available.

Wrong Price #

Review:

• WooCommerce product price
• Product base attributes price
• Printing Type
• Product options
• Quantity pricing

Variation Does Not Update #

Check that:

• WooCommerce attributes are configured correctly.
• Product Base options attributes correctly.

Design Missing from Order #

Verify that:

• The customer customized the product before adding it to the cart.
• The order completed successfully.
• The customization data was saved.

Print File Is Incorrect #

Review:

• Design Area dimensions
• Measurement Unit
• Printing Type
• Product Base configuration
• Export settings

Integration Checklist #

Before launching your store, confirm that:

• WooCommerce is installed and configured.
• Product Designer App is activated.
• Product Bases are assigned correctly.
• Products open the Design Studio.
• Pricing updates correctly.
• Cart displays customization previews.
• Checkout works normally.
• Orders include design data.
• Print files generate successfully.
• All payment methods have been tested.

Next Steps #

Continue with the following WooCommerce guides:

1. Installation — Install and activate Product Designer App.
2. Quick Start — Create your first customizable product.
3. Product Configuration — Configure Views, Colors, Sizes, and Design Areas.
4. Pricing — Configure Printing Types and customization pricing.
5. Orders & Printing — Manage customer designs and generate print-ready files.
6. Troubleshooting — Resolve common WooCommerce integration issues.