Vishit Shah

<p>Tb Product Designer for WooCommerce allows customers to personalize simple WooCommerce products by:</p>
<ul>
<li>Adding custom text</li>
<li>Uploading logos or images</li>
<li>Changing font family</li>
<li>Adjusting font size</li>
<li>Selecting text color</li>
<li>Viewing real-time preview on canvas</li>
<li>Saving merged design image on add to cart</li>
</ul>
<p>The generated custom image is:</p>
<ul>
<li>Stored in uploads directory</li>
<li>Attached to cart items</li>
<li>Displayed in cart & checkout</li>
<li>Saved in order meta</li>
<li>Shown on Thank You page</li>
<li>Included in order emails</li>
<li>Visible in admin order panel</li>
<li>Compatible with WooCommerce Blocks</li>
</ul>
<p>Perfect for:</p>
<ul>
<li>Print shops</li>
<li>T-shirt stores</li>
<li>Mug customization</li>
<li>Promotional products</li>
<li>Personalized gifts</li>
</ul>
<h3>Features</h3>
<p>✔ Fabric.js powered canvas editor<br />
✔ Secure AJAX image saving<br />
✔ WooCommerce cart integration<br />
✔ Order meta storage<br />
✔ Email & admin display support<br />
✔ WooCommerce Block Cart support<br />
✔ Translation ready<br />
✔ OOP-based architecture<br />
✔ WordPress coding standards compliant</p>
<h3>How It Works</h3>
<ol>
<li>Customer customizes product using canvas.</li>
<li>Design is saved via secure AJAX call.</li>
<li>Image is stored in <code>/uploads/custom-products/</code>.</li>
<li>Image URL is attached to cart item.</li>
<li>Image is displayed throughout checkout and order lifecycle.</li>
</ol>
<h3>Credits</h3>
<p>Developed by Vishit Shah<br />
https://vishitshah.com</p>
<p>Uses:<br />
Fabric.js (https://fabricjs.com/)<br />
Licensed under MIT License</p>
<h3>Source Code for Minified/Compiled Assets</h3>
<p>This plugin includes one third-party minified JavaScript file:</p>
<ul>
<li><code>public/js/fabric.min.js</code></li>
</ul>
<p>Human-readable source code for that library is publicly available at:</p>
<ul>
<li>Fabric.js repository: https://github.com/fabricjs/fabric.js</li>
<li>Fabric.js v5.3.0 source tree: https://github.com/fabricjs/fabric.js/tree/v5.3.0</li>
<li>Fabric.js v5.3.0 distributed files (including non-minified builds): https://github.com/fabricjs/fabric.js/tree/v5.3.0/dist</li>
</ul>
<p>Build/reference notes:</p>
<ul>
<li>The bundled <code>public/js/fabric.min.js</code> corresponds to Fabric.js version <code>5.3.0</code>.</li>
<li>Plugin-specific JavaScript in this plugin is provided as readable source files and is not distributed as minified bundles.</li>
</ul>


Tb Product Designer for WooCommerce

Allow customers to customize WooCommerce products with text and images using an interactive canvas designer.

Jay Suthar

<p>Personalize My Order lets you collect product customization details from customers <em>after</em> they place an order — without blocking the checkout flow.</p>
<p>Once an order is paid, the customer receives a secure, time-limited link by email. They visit a dedicated customization page on your store, fill in the fields you’ve configured for each product, and submit. You see everything neatly displayed on the WooCommerce order detail page.</p>
<p><strong>Key features:</strong></p>
<ul>
<li>Secure tokenized URLs — HMAC-SHA256 signed, time-limited (configurable expiry), works for both guests and logged-in customers</li>
<li>Per-product custom fields — configure different fields for each product, or set global fallback fields that apply to all products</li>
<li>13 field types — text, textarea, select, radio, checkbox, file, number, email, URL, date, color, range, and tel</li>
<li>Local file uploads — uploaded files are stored securely in your WordPress uploads directory (<code>wp-content/uploads/persmyor-uploads/</code>); directory listing is blocked via <code>.htaccess</code></li>
<li>Partial saves / autosave — customers can save a draft and come back later; the form autosaves on tab close</li>
<li>Per-item completion tracking — each order item is tracked independently as pending, partial, or complete</li>
<li>Admin display — submitted values shown inline on the order detail page, with a dedicated meta box and a status column on the orders list</li>
<li>My Account integration — customers can review and complete pending customizations from their My Account page</li>
<li>Developer hooks — filter fields per product or act when an order is fully customized</li>
</ul>
<h3>Configuration</h3>
<h4>General</h4>
<ul>
<li><strong>Token expiry</strong> — number of days before the customization link expires (default: 30)</li>
<li><strong>Send email on order</strong> — toggle the customization email sent to the customer after payment</li>
</ul>
<h4>Global fields</h4>
<p>Define fallback fields that apply to all products that don’t have their own field configuration. Use the drag-and-drop field builder to add, reorder, and remove fields.</p>
<h4>Per-product fields</h4>
<p>On any product edit page, a <strong>Customization Fields</strong> meta box lets you configure fields specific to that product. These take priority over global fields.</p>
<h3>Field types</h3>
<p>The following field types are supported in the field builder:</p>
<ul>
<li><strong>text</strong> — single-line text input</li>
<li><strong>textarea</strong> — multi-line text input</li>
<li><strong>select</strong> — dropdown with predefined options</li>
<li><strong>radio</strong> — radio button group</li>
<li><strong>checkbox</strong> — single checkbox or multi-checkbox group</li>
<li><strong>file</strong> — file upload (stored in your server’s uploads directory); supports <code>accept</code> (MIME types) and <code>max_size</code> (in MB)</li>
<li><strong>number</strong> — numeric input; supports <code>min</code>, <code>max</code>, <code>step</code></li>
<li><strong>email</strong> — email address with format validation</li>
<li><strong>url</strong> — URL with format validation</li>
<li><strong>date</strong> — date picker</li>
<li><strong>color</strong> — color picker</li>
<li><strong>range</strong> — range slider; supports <code>min</code>, <code>max</code>, <code>step</code></li>
<li><strong>tel</strong> — telephone number input</li>
</ul>
<h3>How it works</h3>
<ol>
<li>Customer places an order on your WooCommerce store.</li>
<li>A secure HMAC-signed token is generated and stored against the order.</li>
<li>After payment, the customer receives an email with a unique customization link (also appended to standard WooCommerce customer emails).</li>
<li>The customer opens the link, fills in the form for each ordered product, and submits.</li>
<li>Submitted values are saved as WooCommerce order item meta.</li>
<li>The admin sees the customization data on the order detail page, along with uploaded file links and a completion status badge.</li>
<li>When all items are complete, an order note is added and the <code>persmyor_order_fully_customized</code> action fires.</li>
</ol>
<h3>Developer hooks</h3>
<h4>Filters</h4>
<p><strong><code>persmyor_product_fields</code></strong><br />
Modify the resolved field definitions for a product before the form is rendered or data is validated.</p>
<pre><code>add_filter( 'persmyor_product_fields', function( $fields, $product_id, $product ) {
    // Add, remove, or modify fields
    return $fields;
}, 10, 3 );
</code></pre>
<h4>Actions</h4>
<p><strong><code>persmyor_order_fully_customized</code></strong><br />
Fires when every customizable item in an order has been submitted with status <code>complete</code>. Receives the <code>WC_Order</code> object.</p>
<pre><code>add_action( 'persmyor_order_fully_customized', function( $order ) {
    // e.g. trigger production workflow
} );
</code></pre>


Personalize My Order

Collect product customization data after order placement via a secure tokenized URL. Supports custom fields, local file uploads, partial saves, and pe …

Tb Product Designer for WooCommerce vs Personalize My Order