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.

Freemius

deosebIT Soft

<a href="https://web-support.eu/showcase/?utm_source=wporg&utm_medium=plugin_listing&utm_campaign=demo" rel="nofollow ugc">DEMO</a>
Let customers build their perfect product in 3D — swap materials, hide parts, and share their design. Powered by Three.js, built for WooCommerce.
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>
<li>Set custom icons (images) for every step / options of a step</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>Then in the same page download and activate the Premium version.</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:
<ul>
<li><code>customizer.js</code> — Main 3D configurator frontend logic</li>
<li><code>model-scanner.js</code> — 3D model mesh detection and analysis</li>
<li><code>material-preview.js</code> — Material preview rendering</li>
<li><code>ui.js</code> — UI state management and interactions</li>
<li>Admin scripts in <code>/admin/js/</code> — Dashboard-specific functionality</li>
</ul>
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:
<ul>
<li>Node.js (v14 or newer)</li>
<li>npm (included with Node.js)</li>
</ul>
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:
<ul>
<li>three.js — WebGL 3D rendering library (licensed under MIT)</li>
<li>jspdf — PDF generation for preview downloads (licensed under MIT)</li>
<li>lucide — Icon library (licensed under MIT)</li>
<li>webpack — Module bundler (licensed under MIT)</li>
</ul>
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.
<h3>Display Methods & Hooks</h3>
The 3D Customizer provides three flexible ways to display the customizer on your product pages:
1. Automatic Display (Default) 
The customizer is automatically displayed before the product summary.
Setting: 3D Customizer → Global Settings → Display Method → “Automatic (before product summary)”
No code required — it just works!
2. Block (Gutenberg)
Setting: 3D Customizer → Global Settings → Display Method → “Manual Placement” 
In FSE themes (Gutenberg) you can use the block <code>3D Product Customizer</code>
3. Shortcode Display 
Display the customizer anywhere using the <code>[dprcu-customizer]</code> shortcode.
Setting: 3D Customizer → Global Settings → Display Method → “Manual Placement”
Usage: 
 <code>[dprcu-customizer] — uses the current product 
[dprcu-customizer id="123"] — uses a specific product ID</code>
Perfect for custom layouts and page builders (Elementor, Divi, etc.)
4. Manual Hook Display 
Display the customizer using the <code>dprcu_display_customizer</code> action hook.
Setting: 3D Customizer → Global Settings → Display Method → “Manual Hook”
Usage in your theme template: 
 <code>php 
<?php do_action( 'dprcu_display_customizer' ); ?>  
<?php do_action( 'dprcu_display_customizer', 123 ); ?> </code>
Developer Hooks
The plugin provides 18+ action hooks for extending functionality. Common hooks include:
<ul>
<li><code>dprcu_before_customizer_output</code> — Before the customizer renders</li>
<li><code>dprcu_before_canvas_container</code> — Before the 3D canvas</li>
<li><code>dprcu_before_sidebar_container</code> — Before the sidebar</li>
<li><code>dprcu_display_customizer</code> — Manual display hook (see Display Methods above)</li>
</ul>
For the complete list of hooks, see the <a href="https://web-support.eu/documentation/#hooks" rel="nofollow ugc">Documentation</a>

3D Product Customizer & Configurator for WooCommerce

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 & Configurator for WooCommerce