=== DanhThong Print Design Upload === Contributors: danhthong Tags: product customizer, design upload, fabricjs, product personalization, ecommerce Requires at least: 6.0 Tested up to: 6.9.4 Requires PHP: 7.4 Requires Plugins: woocommerce Stable tag: 1.1.2 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Let customers upload an image, add custom text on the product canvas, and save the final design with the cart/order. == Description == 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.1.2): Product personalization text with a live editable canvas text layer.** * **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. === Personalization Text (New in v1.1.2) === Let customers add **custom text on the product** using a personalization field in the customizer modal. Text appears as a live **canvas text layer** that customers can move, resize, rotate, and edit directly on the canvas. * Enable personalization per product in the product editor. * Optional label, placeholder, required flag, and character limit. * Text color toolbar when the text layer is selected. * Personalization text is saved to the cart and order, and shown in WooCommerce emails and admin orders. * The exported design PNG includes the personalization text layer. = 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. == Installation == 1. Upload the plugin folder to `/wp-content/plugins/danhthong-print-design-upload/`, or install the ZIP via Plugins → Add New → Upload Plugin. 2. Activate the plugin through the "Plugins" screen in WordPress. 3. Make sure WooCommerce is installed and active. 4. Edit a product and enable the customizer (see "Usage"). == Usage == 1. Go to WooCommerce → Product Design Upload Settings (`wp-admin/admin.php?page=wcpdu-settings`) and enable the option to allow customers to upload designs. 2. Go to Products → Edit product. 3. Enable the design upload option for that product. 4. (Optional) Enable **personalization text** and set label, placeholder, or character limit. 5. (Optional) Upload a **Clipping Mask Image** to restrict the editable area. 6. On the product page, click the "Customize" button. 7. Upload an image, add personalization text, move/scale layers within the allowed area, then click "Apply". 8. Add to cart. The merged PNG is saved and attached to the cart item and order item meta. == Frequently Asked Questions == = 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 WooCommerce zoom/lightbox? = Yes. The plugin updates the product gallery image and attempts to refresh zoom overlays (including `.zoomImg` used by some themes/plugins). = Can customers add custom text to products? = Yes. When personalization is enabled for a product, customers can enter custom text in the customizer. The text appears as an editable layer on the canvas and is saved with the order. = 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. == Screenshots == 1. Customize button on the product page. 2. Customizer modal with canvas and uploaded image layer. 3. Design area restricted using a clip mask (v1.0.1). 4. Admin order screen showing uploaded design files per line item. 5. Product Design Upload Settings. 6. Personalization text appearing on the canvas with color toolbar. == Changelog == = 1.1.2 = * New: Personalization text field on the product customizer. * New: Live canvas text layer (move, resize, rotate, inline edit). * New: Text color toolbar appears when a text layer is selected. * New: Personalization text is saved to the cart and order, and shown in WooCommerce emails and admin orders. * Improved: Exported design PNG now includes the personalization text layer. = 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. == Upgrade Notice == = 1.1.2 = Adds product personalization text with a live editable canvas layer and order-level text capture. = 1.0.1 = Adds clip mask support to restrict customer design areas and improve print accuracy. = 1.0.0 = Initial release.