stepkitos

Step Kit OS is a comprehensive WooCommerce plugin that brings 3D product customization capabilities to your online store. It allows customers to personalize products in real-time through an interactive iframe interface, creating a unique shopping experience.
Key Features: 
– Seamless integration with WooCommerce 
– Interactive 3D product customization interface 
– Real-time product preview 
– Custom product attributes support (size, name, number, signature, badge) 
– Dynamic pricing based on customization options (separate pricing for name and number) 
– Flexible number pricing (fixed price or per-digit pricing) 
– Persistent cart functionality across sessions 
– Mobile-responsive design 
– Guest user support with proper session handling 
– Custom meta data display in cart and orders 
– Automatic cart updates and fragment refresh 
– Session persistence during login/logout 
– Automatic simulator button injection on product pages 
– Enhanced security with proper nonce verification
The plugin provides a complete solution for stores looking to offer customizable products with a modern, interactive interface.
<h3>Product Setup</h3>
<ol>
<li>
Create Required Products:
<ul>
<li>Create four Variable Products in WooCommerce:
<ul>
<li>Main Kit</li>
<li>Secondary Kit</li>
<li>Third Kit</li>
<li>Goalkeeper Kit</li>
</ul>
</li>
<li>For each product:
<ul>
<li>Add the “size” attribute with variations (e.g., S, M, L, XL)</li>
<li>Set prices and other required fields</li>
<li>Publish the products</li>
</ul>
</li>
</ul>
</li>
<li>
Configure Product IDs:
<ul>
<li>Go to WooCommerce > Step Kit OS in your WordPress admin</li>
<li>In the “Product Configuration” section:
<ul>
<li>Select your products from the dropdown menus for each kit type</li>
<li>The dropdowns automatically show all published WooCommerce products</li>
</ul>
</li>
<li>Save your settings</li>
</ul>
</li>
<li>
Create Simulator Page:
<ul>
<li>Create a new page with the slug “simulador”</li>
<li>Add the shortcode <code>[custom_iframe]</code> to the page content</li>
<li>Publish the page</li>
</ul>
</li>
<li>
Add Simulator Button:
<ul>
<li>Edit your product pages</li>
<li>Add the shortcode <code>[simulator_button]</code> where you want the customization button to appear</li>
<li>Or enable automatic button injection in the plugin settings</li>
<li>Update the product pages</li>
</ul>
</li>
</ol>
<h3>Shortcodes</h3>
<ul>
<li><code>[custom_iframe]</code> – Displays the customization iframe</li>
<li><code>[simulator_button]</code> – Displays the simulator button</li>
</ul>
Shortcode Parameters:
For <code>[custom_iframe]</code>: 
– <code>height</code> – Iframe height (default: 100vh) 
– <code>width</code> – Iframe width (default: 100%) 
– <code>border</code> – Border style (default: none) 
– <code>product_id</code> – Specific product ID (optional)
For <code>[simulator_button]</code>: 
– <code>label</code> – Button text (default: “Customizar Camisola”) 
– <code>class</code> – CSS classes for styling 
– <code>product_id</code> – Specific product ID (optional)
<h3>Testing</h3>
<ol>
<li>Visit your store’s product page</li>
<li>Click the “Customizar Camisola” button (created by the <code>[simulator_button]</code> shortcode or automatic injection)</li>
<li>You will be redirected to the <code>/simulador</code> page</li>
<li>Test the customization features and complete the purchase flow</li>
</ol>

Step Kit OS

A powerful WooCommerce plugin that enables 3D product customization and strengthens the connection with customers.

deosebIT Soft

<a href="https://web-support.eu/customizer/showcase/" rel="nofollow ugc">DEMO</a>
3D Product Customizer adds a fully interactive 3D configurator to your WooCommerce product pages. Customers can rotate the model, swap materials, show or hide parts, and add the configured product directly to their cart.
Key features:
<ul>
<li>Real-time 3D model viewer powered by Three.js (WebGL)</li>
<li>PBR (Physically Based Rendering) material support — base color, roughness, normal, AO, metalness, and displacement maps</li>
<li>Per-step customization: define multiple configuration steps (e.g. Upper, Sole, Logo), each targeting specific model meshes</li>
<li>Bulk material assignment in the admin</li>
<li>Geometry visibility toggles — show or hide mesh groups per option</li>
<li>Undo / redo history</li>
<li>URL-based configuration sharing — customers can share their exact design via a link</li>
<li>Download a PDF preview</li>
<li>AR view on supported mobile devices</li>
<li>HDR environment map for realistic lighting</li>
<li>Background color switcher</li>
<li>Customization data saved to the WooCommerce order as line-item meta</li>
<li>Reusable texture library via a dedicated Custom Post Type</li>
</ul>
Free vs Premium:
The free version is fully functional for single-material customization. Premium unlocks advanced PBR workflows and productivity features for studios managing large product catalogs.
<h4>Free</h4>
<ul>
<li>Upload & display a 3D model</li>
<li>Base color texture or color picker per option</li>
<li>Roughness & metalness sliders</li>
<li>Customization steps</li>
<li>Viewer Only Mode</li>
<li>Camera, zoom & background settings</li>
<li>HDR environment map</li>
<li>Undo / redo, PDF, AR view</li>
</ul>
<h4>Premium (everything in Free, plus)</h4>
<ul>
<li>Material Preview</li>
<li>Multiple textures per option</li>
<li>Bulk Add Materials to a step</li>
<li>Show / Hide mesh controls per option</li>
<li>Normal, AO, metalness & displacement maps</li>
<li>Reflection intensity & displacement scale</li>
<li>Hotspots/Annotations</li>
</ul>
<h3>Upgrade to Premium</h3>
<ol>
<li>Inside WordPress admin, go to 3D Customizer → Account (added after activation).</li>
<li>Click Upgrade to Premium and complete the purchase on the checkout page.</li>
<li>Return to 3D Customizer → Account/Upgrade and enter your license key to activate.</li>
<li>Premium features unlock immediately — no plugin re-install required.</li>
</ol>
Alternatively, click the Upgrade to Premium button that appears inside any locked premium feature panel.
<h3>Source Code & Build Instructions</h3>
All source code is human-readable and included in this plugin.
The <code>/js/</code> folder contains the original, uncompiled JavaScript source files: 
* <code>customizer.js</code> — Main 3D configurator frontend logic 
* <code>model-scanner.js</code> — 3D model mesh detection and analysis 
* <code>material-preview.js</code> — Material preview rendering 
* <code>ui.js</code> — UI state management and interactions 
* Admin scripts in <code>/admin/js/</code> — Dashboard-specific functionality
The <code>/dist/</code> folder contains pre-compiled, production-ready bundles. These are generated by bundling the source files with their dependencies (three.js, pdf-lib, lucide) using Webpack. The <code>/dist/</code> folder is auto-generated output and not part of the source code.
Rebuilding from Source:
This plugin uses Webpack to compile and minify JavaScript, bundling dependencies to keep the plugin size manageable (avoiding the need to distribute <code>node_modules</code>).
Requirements: 
* Node.js (v14 or newer) 
* npm (included with Node.js)
Build commands: 
 <code>npm install # Install dependencies from package.json 
npm run dev # Development build with watch mode (rebuilds on file changes) 
npm run build # Production build (minified and optimized)</code>
Dependencies: 
* three.js — WebGL 3D rendering library (licensed under MIT) 
* pdf-lib — PDF generation for preview downloads (licensed under Apache 2.0) 
* lucide — Icon library (licensed under MIT) 
* webpack — Module bundler (licensed under MIT)
All original code is GPLv2 or later. Third-party dependencies follow their respective open-source licenses, listed in <code>package.json</code>.
<h3>External Services</h3>
This plugin integrates with Freemius for license management, automatic updates, and premium feature delivery:
<ul>
<li>Service: Freemius License Management</li>
<li>Server: https://freemius.com</li>
<li>Purpose: Validates premium licenses, manages plugin updates, delivers premium features, and provides usage analytics</li>
<li>Data Sent: Plugin activation events, license key validation, and anonymized usage analytics</li>
<li>Account Required: Optional — only if upgrading to Premium</li>
<li>Terms: https://freemius.com/terms/</li>
</ul>
All other assets (JavaScript, CSS, images) are included locally within the plugin package. No other external services are used.
<h3>Authors & Credits</h3>
Development: <a href="https://deosebitsoft.ro/" rel="nofollow ugc">deosebIT Soft</a>
This plugin was developed with attention to WordPress.org standards and is maintained by the deosebIT Soft team. For support, updates, and premium features, visit our website.

3D Product Customizer

An interactive Three.js-powered 3D product configurator for WooCommerce — let customers customize materials, textures, and geometry in real time.

Step Kit OS vs 3D Product Customizer