Design Studio Page #

The Design Studio Page is the page where customers personalize products using Product Designer App. It loads the complete design editor, including the product preview, design tools, templates, resources, pricing rules, and print configuration.

You can use the default Design Studio page created by Product Designer App or assign any WordPress page by adding the Product Designer App shortcode with a WooCommerce Product ID.

This guide explains how to configure and customize your Design Studio page.

What is the Design Studio Page? #

The Design Studio Page is a standard WordPress page that displays the Product Designer App editor.

When customers click the Customize button from a WooCommerce product, they are redirected to this page, where they can:

• Personalize the product
• Edit templates
• Add text
• Upload images
• Add clipart
• Preview the final design
• Add the customized product to the cart

The Design Studio itself is loaded dynamically based on the selected WooCommerce product.

Before You Begin #

Before configuring the Design Studio Page, make sure that:

• Product Designer App is installed and activated.
• WooCommerce is installed.
• A Product Base has been created.
• The Product Base is connected to a WooCommerce product.
• At least one WooCommerce product is available.

Typical workflow:

Create Product Base
        ↓
Connect Product Base to WooCommerce Product
        ↓
Create Design Studio Page
        ↓
Add Shortcode
        ↓
Test Product Customization

Create a Design Studio Page #

Navigate to:

WordPress Admin → Pages → Add New

Create a new page.

Example page titles:

• Design Studio
• Product Designer
• Customize Product
• Personalize Product

The page title can be anything that fits your website.

Add the Product Designer Shortcode #

Inside the page content, insert the Product Designer App shortcode.

The shortcode loads the Design Studio for a specific WooCommerce product.

Example:

[pda-studio-page id="123"]

Replace 123 with the WooCommerce Product ID you want to customize.

After publishing the page, visiting the page will load the Design Studio for that product.

Use Any WordPress Page #

You are not limited to the default Design Studio page.

The Product Designer shortcode can be added to almost any WordPress page, including:

• Standard Pages
• Landing Pages
• Custom Templates
• Page Builder Pages
• Full-width Layouts

This allows you to fully customize the customer experience while keeping the Product Designer functionality.

Display Different Products #

The displayed product depends on the Product ID passed to the shortcode.

Example:

[pda-studio-page id="388"]

Loads Product ID 388.

Another page may contain:

[pda-studio-page id="520"]

which loads a different customizable product.

Each page can display a different WooCommerce product if needed.

Open the Design Studio from WooCommerce #

Normally, customers do not visit the Design Studio page directly.

Instead, they:

1. Browse WooCommerce products.
2. Click the Customize button.
3. Product Designer App automatically opens the Design Studio using the correct product information.

The Product ID is passed automatically, allowing the editor to load the appropriate Product Base and configuration.

What Loads in the Design Studio? #

When the page opens, Product Designer App automatically loads the product configuration associated with the selected WooCommerce product.

This includes:

• Product images
• Design areas
• Printing Types
• Product colors
• Sizes
• Components
• Templates
• Resources
• Pricing rules
• Product options

Customers can immediately begin customizing the product.

Using Product Templates #

If the WooCommerce product has one or more assigned templates, the Design Studio opens with the selected template already loaded.

Customers can:

• Purchase the design without changes
• Edit text
• Replace photos
• Upload artwork
• Make simple customizations

If no template is assigned, the editor opens with a blank design area.

Design Studio Layout #

The Design Studio automatically displays the layout configured for the Product Base.

Depending on your configuration, the editor may include:

• Product Preview
• Toolbar
• Layers Panel
• Properties Panel
• Resources
• Templates
• Upload Manager
• Shopping Cart Summary

No additional configuration is required after the Product Base has been set up.

Testing the Design Studio #

After publishing the page:

1. Open the page in your browser.
2. Verify that the Design Studio loads successfully.
3. Confirm that the correct product appears.
4. Add text or artwork.
5. Save the design.
6. Add the customized product to the cart.

If all steps complete successfully, the Design Studio has been configured correctly.

Troubleshooting #

The Design Studio does not load #

Check the following:

• The shortcode has been added correctly.
• The Product ID exists.
• The WooCommerce product is published.
• The Product Base is connected to the WooCommerce product.
• Product Designer App is activated.

The wrong product appears #

Verify that the Product ID specified in the shortcode matches the intended WooCommerce product.

If customers are redirected from the Customize button, ensure the WooCommerce product is connected to the correct Product Base.

The page is blank #

Possible causes include:

• An incorrect shortcode
• An invalid Product ID
• JavaScript errors
• Theme conflicts
• Caching issues

Clear your cache and check your browser’s developer console for errors.

Best Practices #

For the best customer experience:

• Use a clean, full-width page layout for the Design Studio.
• Keep unnecessary widgets and sidebars off the page.
• Test the editor on both desktop and mobile devices.
• Verify that the correct WooCommerce product loads.
• Confirm that templates, pricing, and resources appear correctly.
• Always test the full customization and checkout workflow before publishing.

A properly configured Design Studio Page provides customers with a smooth and intuitive product customization experience while allowing complete flexibility in how the editor is integrated into your WooCommerce website.