Sizes #

Product Sizes define the size options customers can select when customizing and ordering a product in Product Designer App.

Depending on the product, a size may represent:

• Apparel size
• Paper format
• Canvas dimensions
• Product capacity
• Physical product dimensions
• Another selectable product variation

Common examples include:

XS, S, M, L, XL, XXL

or:

A6, A5, A4, A3

Product Sizes are configured inside the Product Base and become available to customers when ordering the product.

How Product Sizes Work #

Sizes are part of the Product Base information and describe the available physical product options.

The typical workflow is:

Product Base → Product Sizes → Customer Selects a Size → Cart and Order

A size selection may affect:

• The product option shown to the customer
• Product price
• Stock availability
• SKU
• Shipping information
• Production instructions

The exact behavior depends on how the Product Base and WooCommerce product are configured.

Product Size vs. Design Area Size #

Product Size and Design Area Print Size are different concepts.

Product Size #

The physical variation purchased by the customer.

Examples:

• Small T-shirt
• Large T-shirt
• A4 poster
• 11 oz mug
• 16 × 20-inch canvas

Design Area Print Size #

The actual area where the customer’s artwork will be printed.

Examples:

• 12 × 16-inch chest print
• 8 × 10-inch poster artwork
• 3 × 4-inch sleeve print

A larger product does not always require a larger Design Area.

For example:

Product size	Design Area
Small T-shirt	12 × 16 in
Medium T-shirt	12 × 16 in
Large T-shirt	12 × 16 in

However, products such as posters, canvases, cards, and signs may require a different Design Area for every product size.

The Design Area Print Size determines the dimensions of exported SVG, PNG, and PDF files.

Before You Begin #

Before configuring Product Sizes, make sure you have:

• Created a Product Base
• Selected a Printing Type
• Configured the required Views
• Identified the available product sizes
• Decided whether size affects price
• Decided whether size affects the product image
• Decided whether size affects the Design Area

Use the same naming format across Product Designer App, WooCommerce, production files, and inventory management.

Configure Product Sizes #

Step 1. Open the Product Base #

In the WordPress administration area, navigate to:

Product Designer App → Products

Locate the Product Base you want to configure and open it for editing.

Click Setup Design to open the detailed product configuration.

Step 2. Open the Info Tab #

The Product Base setup contains two main sections:

• Info
• Layers

Open the Info tab.

The Info section contains general product settings, including:

• Measurement Unit
• Product Colors
• Product Sizes

Configure the Info tab before completing View layers and Design Areas.

Step 3. Add Product Sizes #

Locate the Product Sizes section and add the sizes available for the product.

Examples for apparel:

XS
S
M
L
XL
XXL

Examples for paper products:

A6
A5
A4
A3

Examples for canvases:

8 × 10 in
12 × 16 in
16 × 20 in
24 × 36 in

Examples for mugs:

11 oz
15 oz

Product Sizes become selectable options for customers when ordering the configured product.

Step 4. Use Clear Size Names #

Size names should be short, descriptive, and consistent.

Recommended apparel names:

• XS
• S
• M
• L
• XL
• XXL

Recommended dimension-based names:

• 8 × 10 in
• 12 × 16 in
• 30 × 40 cm
• A4
• A3

Avoid unclear values such as:

• Size 1
• Option A
• Large Version
• Default Size

When dimensions are important, include the unit directly in the size name.

Example:

12 × 16 in

instead of:

12 × 16

Step 5. Arrange the Size Order #

Arrange sizes in a logical order.

For apparel:

XS → S → M → L → XL → XXL

For paper sizes:

A6 → A5 → A4 → A3

For dimension-based products:

8 × 10 in → 12 × 16 in → 16 × 20 in

A logical order makes the size selector easier for customers to understand.

Step 6. Save the Product Base #

After adding all required sizes, save the Product Base.

Click:

Save Product

Saving stores the Product Sizes together with the other Product Base settings.

After saving, reopen the Product Base and confirm that all size options remain available.

Simple Product with Size Options #

A simple product may use Product Designer App sizes as selectable customization options while WooCommerce manages the product as a single item.

This approach may be suitable when:

• All sizes use the same SKU
• Shipping does not change by size
• The same Product Base configuration applies to all sizes

Sizes and Pricing #

A product size may affect the final price.

Common examples include:

• Larger apparel sizes cost more
• Larger canvases require more material
• Larger posters use more ink and paper
• Larger products have higher shipping costs
• Larger printable areas increase production cost

Size-based pricing may be configured through: Attributes tab → Generate Attributes → Configuration Extra Price and Stock

Example Price Structure #

Size	Base product price	Printing fee	Final price
Small	$20	$5	$25
Medium	$20	$5	$25
Large	$22	$5	$27
XL	$24	$6	$30

In this example:

• WooCommerce controls the base product price.
• The Printing Type controls the customization fee.
• The final price combines both values.

Sizes and Design Areas #

Some products use the same Design Area for all sizes.

Same Design Area for Every Size #

This is common for apparel.

Example:

Product size	Print area
S	12 × 16 in
M	12 × 16 in
L	12 × 16 in
XL	12 × 16 in

The garment changes size, but the maximum printable region remains the same.

Different Design Area for Every Size #

This is common for:

• Posters
• Banners
• Signs
• Canvas prints
• Stickers
• Cards
• Labels
• Packaging

Example:

Product size	Print area
A4	210 × 297 mm
A3	297 × 420 mm
A2	420 × 594 mm

The exported file must match the selected physical size.

When sizes require different print dimensions, review whether the product should use:

• Separate Product Bases
• Size-specific Design Areas
• Separate WooCommerce products
• Advanced configuration or custom integration

Use the structure that produces the most reliable print output.

When to Use Separate Product Bases #

One Product Base is usually appropriate when all sizes share:

• The same number of Views
• The same product image structure
• The same Design Area position
• The same print dimensions
• The same Printing Type
• The same customization tools

Separate Product Bases may be more reliable when sizes require different:

• Product proportions
• View images
• Design Area dimensions
• Printable boundaries
• Masks
• Layer positions
• Production files
• Printing methods

Example:

Poster A4 Product Base
Poster A3 Product Base
Poster A2 Product Base

This is often simpler than forcing several substantially different output sizes into one Product Base.

Sizes and Product Images #

For apparel, the same product mockup may be used for all sizes if the visual difference is not important.

For other products, changing size may require a different image.

Examples include:

• Small and large frames
• Different canvas proportions
• Portrait and landscape formats
• Different packaging sizes
• Different label shapes
• Different phone models

When the shape or aspect ratio changes, use the correct product image and verify that the Design Area remains aligned.

Keep Aspect Ratios Accurate #

A size change should not stretch or distort the product preview.

For example:

8 × 10 in → Aspect ratio 4:5
12 × 16 in → Aspect ratio 3:4
16 × 20 in → Aspect ratio 4:5

Products with different aspect ratios may require separate images, Design Areas, or Product Bases.

Do not reuse one background image by stretching it into a different ratio.

Sizes Across Multiple Views #

When a product contains several Views, confirm that every View works with each size.

Example T-shirt:

Sizes:
S, M, L, XL

Views:
Front
Back

Test each size on both Views.

For products where size affects the preview, prepare the corresponding images for:

Small Front
Small Back
Medium Front
Medium Back
Large Front
Large Back

Keep the View names, product scale, and Design Area alignment consistent.

Sizes and Customer Designs #

Changing the selected product size should preserve the customer’s design whenever the product configuration supports it.

The following should remain unchanged:

• Text
• Uploaded images
• Artwork
• Position
• Scale
• Rotation
• Layer order
• Selected View

However, resizing a product with a different Design Area or aspect ratio may require artwork repositioning or scaling.

Test this behavior carefully before publishing.

Sizes in Cart and Orders #

After a customer selects a size and adds the product to the cart, verify that the selected size appears correctly in:

• Cart
• Checkout
• Order confirmation
• WooCommerce order details
• Product Designer App order details
• Production instructions
• Exported file naming or metadata, when available

The size must remain identifiable throughout the order workflow.

Apparel Product #

Product: Classic T-Shirt

Sizes:
XS
S
M
L
XL
XXL

Views:
Front
Back

Design Area:
12 × 16 in for all sizes

Poster Product #

Product: Custom Poster

Sizes:
A4
A3
A2

Possible print dimensions:

Size	Print dimensions
A4	210 × 297 mm
A3	297 × 420 mm
A2	420 × 594 mm

Because each size requires a different print file dimension, separate Product Bases may provide a clearer production workflow.

Canvas Product #

Product: Custom Canvas

Sizes:
8 × 10 in
12 × 16 in
16 × 20 in
24 × 36 in

Some sizes use different aspect ratios, so each size may require its own Product Base or advanced configuration.

Mug Product #

Product: Custom Mug

Sizes:
11 oz
15 oz

View:
Wrap

If both mugs use the same printable dimensions, one Product Base may be sufficient.

If the printable area differs, use separate Design Area configurations or separate Product Bases.

Test Product Sizes #

Before publishing the product, test every available size.

Test the Size Selector #

Confirm that:

• All required sizes appear.
• Size names are correct.
• Sizes are ordered logically.
• The default size is appropriate.
• Unavailable sizes are hidden or disabled.

Test Product Preview #

For each size, confirm that:

• The correct product image appears.
• The product is not stretched.
• Design Areas remain aligned.
• Masks and overlays display correctly.
• Every View updates as expected.

Test Pricing #

Confirm that each size uses the correct:

• Base product price
• Variation price
• Printing fee
• Additional surcharge
• Discount
• Cart total

Test the price in:

1. Product page
2. Design Studio
3. Cart
4. Checkout
5. Order details

Test Inventory #

For variable products, verify that:

• Each size has the correct stock quantity.
• Out-of-stock sizes cannot be purchased.
• The selected variation is deducted from stock.

Test Customer Design Persistence #

Use the following test:

1. Select Size S.
2. Add text and an image.
3. Change to Size M.
4. Confirm that the design remains.
5. Change to Size XL.
6. Confirm the preview and Design Area.
7. Add the product to the cart.
8. Verify the selected size and saved design.

Test Print Files #

Place a complete test order for every size that uses different print dimensions.

Download the print files and confirm:

• The correct size was ordered.
• The exported dimensions are correct.
• The aspect ratio is correct.
• Artwork is not stretched.
• No content is unexpectedly clipped.
• The file can be matched to the selected product size.

The Product Base documentation recommends placing a test order and verifying that exported print files match production requirements.

Best Practices #

Use the following recommendations when configuring Sizes:

• Use clear and consistent size names.
• Include units for dimension-based sizes.
• Arrange sizes in a logical order.
• Avoid duplicate size surcharges.
• Keep Design Areas consistent when possible.
• Use separate Product Bases for substantially different formats.
• Do not stretch product images between aspect ratios.
• Test every size before publishing.
• Place test orders for all size-dependent print outputs.
• Include the selected size in production files or instructions.
• Remove unavailable or unsupported sizes.
• Document how sizes affect price, preview, and output.

Troubleshooting #

Sizes Do Not Appear #

Check that:

• Product Sizes have been added.
• The Product Base has been saved.
• The Product Base is assigned to the correct product.
• The product page is loading the latest configuration.
• Browser and website caches have been cleared.

The Selected Size Is Not Saved #

Verify that:

• The size option is connected correctly.
• The product is added to the cart after selecting a size.
• Required attributes have been selected.
• No JavaScript error interrupts the add-to-cart process.

The Price Does Not Change #

Verify that:

• Size-based surcharges are configured correctly.
• The selected variation is available.
• Printing Type pricing does not override or duplicate the intended charge.
• The cart is recalculating after the size changes.

The Product Image Looks Distorted #

Check that:

• The correct image is assigned to the size.
• The image aspect ratio matches the product.
• The image is not being stretched.
• The canvas dimensions are correct.
• The Product Base is suitable for that size.

The Design Area Is Incorrect for Some Sizes #

Review:

• The physical dimensions of each size
• The Design Area Print Size
• The Design Area position
• The product image proportions
• The Measurement Unit

When sizes require significantly different printable regions, use separate Product Bases or size-specific configurations.

The Print File Has the Wrong Size #

Confirm that:

• The correct Measurement Unit is selected.
• The Design Area Print Size matches the selected product size.
• The correct Product Base is assigned.
• The file is opened using the expected DPI.
• The selected size was saved with the order.

The Measurement Unit and Design Area Print Size directly affect exported file dimensions.

Size Configuration Checklist #

Before publishing the product, confirm that:

• All required sizes have been added.
• Size names are clear and consistent.
• Dimension-based sizes include units.
• Sizes are arranged logically.
• Variation prices and inventory are correct.
• Product images display correctly for every size.
• Design Areas remain aligned.
• Size surcharges are not duplicated.
• Customer designs persist when sizes change.
• Cart and checkout show the selected size.
• Order details contain the correct size.
• Print files use the correct dimensions.
• Every size has been tested.

Next Steps #

After configuring Product Sizes, continue with:

1. Views — Configure the printable sides of the product.
2. Colors — Add product color groups and color options.
3. Product Images and Layers — Configure mockups, backgrounds, shadows, and overlays.
4. Design Areas — Define editable regions and production dimensions.
5. Printing Types — Configure customization pricing.