Skip to content

Documentation

DesignCrate
Setup and user guide

Turning the designer on for a product, offering product colours, setting a printable area in real units, and getting a print-ready file off the order.

// Getting started

Install it

  1. In Plugins → Add New, search for DesignCrate, then install and activate it. Or download the zip from WordPress.org and upload it.
  2. WooCommerce must be active too.
  3. Edit a product and open the DesignCrate tab.

It needs WordPress 6.0 or newer, WooCommerce 7.0 or newer and PHP 7.4 or newer. Tested up to WordPress 7.1 and WooCommerce 11.2.

Turning it on for a product

  1. Tick Enable designer.
  2. Choose a Designer position: Beside add to cart, or Full width, below the product for a much larger canvas. Block themes always use the first.
  3. Choose a mockup image — the picture customers design on top of. With none set, the product’s featured image is used.
  4. Set the print width and height, the unit and the resolution in DPI.
  5. Drag the print box onto the part of the product that actually gets printed, and resize it with its handles.
  6. Update the product, then open it on the front end.

The print box keeps the shape of the print size you set. That is deliberate: a square print area on a 12 × 16 inch product would export a square file and the print would come out wrong. Fit to image and Reset to centre are there when you want to start over.

The DesignCrate product tab: Full-screen editor position, mockup image, the print area on the t-shirt, print size in inches at 300 DPI, and product colours.
The DesignCrate tab: designer position, mockup, print area and print size.

Offering product colours

  1. Tick Product colours.
  2. List the colours you sell in Colour choices, one per line as Name | #hex — for example Red | #c62828. White, Black, Red, Green and Blue are filled in to start with.
  3. Tick Custom colour to also offer a colour picker for any shade.
  4. Update the product. A Product colour row appears above the design tools.
DesignCrate product colour settings: the Product colours checkbox, the colour choices list in Name | #hex format, and the Custom colour option.
Product colours, the colour list and the custom colour option.

The mockup is recoloured with its folds and shading intact. It works best with a white product on a transparent background; on an opaque mockup the backdrop is detected from the image edges and left alone. The chosen colour shows in the cart and is saved on the order as Colour, with the exact hex kept too. The print file is never coloured.

// The canvas

What your customers get

The DesignCrate full-screen designer with the Templates panel open and the Adventure template on a blue t-shirt.
The full-screen designer with the Templates panel open.

Text

Font, size, colour and alignment, with bold, italic, underline and strikethrough on the General tab.

Finer type control

Outline, letter spacing, line height, highlight and drop shadow on the Advanced tab.

Per-letter styling

Double-click a text layer and drag across a few letters to style only those.

Images

Upload a PNG, JPEG, WebP or GIF. The plugin never accepts more than your server’s own upload limit.

Layers

Move, resize, rotate and reorder anything on the canvas, and set its opacity.

A safety rail

Every layer is held inside the printable area, so nothing a customer adds can fall outside what gets printed.

Product colour

Pick a colour from your list, or any shade from the picker when you allow it. The product recolours live.

Zoom and pan

Zoom up to 400% with the buttons above the canvas, or Ctrl/Cmd + scroll. Drag empty canvas to pan while zoomed.

Full-screen editor

A Customise button opens the designer full screen. Tools sit in a rail on the left, or along the bottom on phones; close the panel to give the canvas the space.

Start from a template

Six ready-made designs — birthday, team shirt, quote, logo badge, love and adventure — that customers then make their own.

Clipart and shapes

A searchable library of over 200 icons in seven sets, plus shapes from stars and hearts to badges.

Curve, undo, preview

Bend any line of text into an arc, undo and redo every step, and preview the finished product in every colour without guides.

The DesignCrate Clipart panel with the Nature set, and the curved Adventure Awaits headline selected with its floating toolbar.
Clipart, shapes and curved text, with a toolbar beside whatever is selected.
DesignCrate preview mode: the finished blue t-shirt without guides, with the product colour swatches below.
Preview hides the guides and lets the customer try every product colour.

// Output

Two renders, and why it matters

Each design produces two different images. Sending the wrong one to a printer is how a product photograph ends up on a press.

The preview

Keeps the mockup, so the design is shown on the product. It is what appears in the cart, at checkout, on the order and in the confirmation email.

The print file

The artwork alone, on transparency, cropped to the printable area at full resolution.

A 12 × 16 inch area at 300 DPI downloads as a 3600 × 4800 pixel PNG. The size on screen never affects it.

The WooCommerce block cart showing the customer design as the thumbnail, with Colour: Blue and a link to the full preview.
The preview and the chosen colour in the block cart.

Getting the file off an order

  1. Open the order in WooCommerce.
  2. The chosen colour and the design preview sit under the line item.
  3. Download print file (PNG) gives you the file to print.
  4. Download artwork (JSON) gives you the editable design data — useful for support, useless to a printer.
A WooCommerce order showing the chosen colour, the design preview and the Download print file and Download artwork buttons.
An order with the colour, the preview and both downloads.

// Storage

Where the files live

Everything is in your own uploads folder, under wp-content/uploads/dcpd/. Nothing is sent anywhere.

Design files are blocked from direct web access.

Only the preview images are publicly readable, because the cart and your emails have to display them.

Filenames are random, so nothing can be guessed or enumerated.

A daily task removes designs that were never ordered, two days after they were last touched.

Filters

dcpd_max_upload_bytes — change the size of image a customer may upload.

dcpd_unclaimed_design_ttl — change how long an unordered design survives.

dcpd_max_display_edge — change how large the editor canvas may be drawn on screen.

dcpd_product_colours — change the colours offered for a product.

dcpd_default_colours — change the colours a product starts with.

// FAQ

Questions

Does this send anything to an external service?

No. Artwork is stored in your own uploads folder and never leaves your server. There is no account, no API key and no per-order fee.

Can customers choose the product colour?

Yes. Turn on Product colours on the DesignCrate tab and list the colours you sell. Customers pick one above the design tools, the mockup recolours live, and the colour is saved on the order.

The canvas is small in my theme. How do I make it bigger?

Set Designer position to Full width, below the product. Customers can also hide the tools panel and zoom in up to 400%.

Does it work with the block cart and checkout?

Yes. Both the classic templates and the Store API are supported, and High-Performance Order Storage is fully supported.

Two customers ordered different designs of the same product. Will they merge into one line?

No. Each design gets its own cart line, so two different designs of the same product never collapse into a single item.

What happens to artwork if I uninstall the plugin?

Product settings are removed. Artwork attached to orders is deliberately kept, because deleting something a customer paid for would be data loss.

Will it slow down products that do not use it?

No. Scripts and styles are enqueued only on products where the designer is switched on.

Still stuck?

If something here is wrong or missing, tell us and we will fix it — then write it down for the next person.