Descripció
DanhThong Print Design Upload adds a simple product customizer to WooCommerce products.
Features:
* Enable/disable design upload per product.
* Customer uploads an image on the product page.
* The uploaded image is added as a movable/resizable layer on a canvas (Fabric.js).
* The product image can be used as the canvas background.
* NEW (v1.0.1): Clip mask support to restrict the editable design area.
* Visual overlay frame to clearly indicate the allowed design region.
* The final merged design is exported as PNG and stored with the cart item.
* Design files can be displayed in the admin order screen (per order item).
* Lightweight lightbox support for viewing uploaded images.
This plugin is designed for stores that sell personalized products (e.g., t-shirts, mugs, phone cases, posters).
Clip Mask (New in v1.0.1)
Starting from version 1.0.1, you can optionally upload a clipping mask image per product to limit where customers can place and preview their designs.
- Recommended format: PNG
- Transparent area = allowed design region
- Opaque area = hidden / restricted region
- The canvas preview and exported PNG respect the defined clipping boundaries
This helps ensure designs stay within printable areas and improves print accuracy.
Third-party libraries
This plugin bundles Fabric.js for the canvas editor functionality.
Fabric.js is licensed under the MIT License. The Fabric.js license file is included in the plugin package.
Usage
- Go to WooCommerce Product Design Upload Settings (
wp-admin/admin.php?page=wcpdu-settings) and enable the option to allow customers to upload designs. - Go to Products Edit product.
- Enable the design upload option for that product.
- (Optional) Upload a Clipping Mask Image to restrict the editable area.
- On the product page, click the “Customize” button.
- Upload an image, move/scale it within the allowed area, then click “Apply”.
- Add to cart. The merged PNG is saved and attached to the cart item and order item meta.
Captures
Customize button on the product page. 
Customizer modal with canvas and uploaded image layer. 
Design area restricted using a clip mask (v1.0.1). 
Admin order screen showing uploaded design files per line item.
Instal·lació
- Upload the plugin folder to
/wp-content/plugins/danhthong-print-design-upload/, or install the ZIP via Plugins Add New Upload Plugin. - Activate the plugin through the “Plugins” screen in WordPress.
- Make sure WooCommerce is installed and active.
- Edit a product and enable the customizer (see “Usage”).
PMF
-
Does this plugin require WooCommerce?
-
Yes. WooCommerce must be installed and active.
-
What is a clip mask?
-
A clip mask is a PNG image that defines where customers are allowed to design. Transparent areas allow design, while opaque areas hide content outside the printable region.
-
Does the clip mask affect the exported image?
-
Yes. The exported PNG is clipped to the defined mask, ensuring only the allowed area is included.
-
Where are uploaded/generated files stored?
-
Files are stored under the WordPress uploads directory. The plugin uses a dedicated subfolder for design assets.
-
Does this work with product zoom/lightbox?
-
Yes. The plugin updates the product gallery image and attempts to refresh zoom overlays (including
.zoomImgused by some themes/plugins). -
Can I allow multiple uploaded layers?
-
Currently the customizer is intended for a single uploaded image layer. You can extend it to allow multiple layers if needed.
Ressenyes
No hi ha ressenyes per a aquesta extensió.
Col·laboradors i desenvolupadors
«DanhThong Print Design Upload» és programari de codi obert. La següent gent ha col·laborat en aquesta extensió.
Col·laboradors
Traduïu «DanhThong Print Design Upload» a la vostra llengua.
Interessats en el desenvolupament?
Navegueu pel codi, baixeu-vos el repositori SVN, o subscriviu-vos al registre de desenvolupament per fisl de subscripció RSS.
Registre de canvis
1.0.1
- Added clip mask support to restrict editable design areas.
- Added product-level clipping mask upload field.
- Improved canvas rendering with visual overlay frame.
- Ensured exported images respect clipping boundaries.
1.0.0
- Initial release.