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.

PickPlugins

Product Designer plugin is a ready and simple way to add WooCommerce product customize or product designer on your eCommerce shop. Allow your customer to design or customize themselves before submitting order. you customer can add custom clipart, text, shapes and etc. You can add unlimited product sides for different kinds of products. our product designer is based on templates so you can use same template for many products. Users can download or preview their designs before submitting orders. there is a ton of options for customizing text art, clipart and shapes.
<h3>Product Designer by http://pickplugins.com</h3>
<ul>
<li><a href="https://www.pickplugins.com/item/product-designer/?ref=wordpress.org" rel="nofollow ugc">See Premium »</a></li>
<li><a href="https://www.pickplugins.com/demo/product-designer/?ref=wordpress.org" rel="nofollow ugc">Live Demo »</a></li>
<li><a href="https://www.pickplugins.com/documentation/product-designer/faq/display-product-designer/?ref=wordpress.org" rel="nofollow ugc">Documentation »</a></li>
<li><a href="https://www.pickplugins.com/support/?ref=wordpress.org" rel="nofollow ugc">Support »</a></li>
</ul>
Plugin Features
WooCommerce ready 
Product Designer is WooCommerce ready and your customer will able to submit order by customizing products, you will able to see design files via order data.
Clipt Arts 
You can add unlimited clipart, image, picture for design assest, so your user can add them to designer. there is category based filter and ajax pagination for accessing cliparts.
Text Arts 
Your customer can add text on the product designer, there is many option to customize text, font size, color, font families, we added 50+ hand picked Google fonts, you can add your own.
SVG or Shapes 
You can upload or add unlimited shapes or svg file and your customer can use these to design their products.
Unlimited product sides 
Based on different product you can add any number of product sides, so user can customize each side on the designer.
Design preview 
User can preview their design before submit order.
Design download 
Your customer can download design before submit order.
Premium Features
Pre saved templates 
You can save unlimited pre saved templates for each templates, so use can choose from pre saved template to get quickly order their expected design or start work from existing templates.
Upload custom cliparts 
Allow users to upload their own clipart so that users can design their products as they want.
Cliparts price 
You can set custom price for each cliparts and different types of assets like text, qr code, barcode and text also.
Curve text 
Displaying curve text on the product is fancy and our product designer allow users to editing curve text.
Quotes text 
You can add your own quotes text, so user can use these quotes on their products.
QR code 
Allow user to add their QR code on the design.
Barcode 
User can generate their own Barcode on the design.
Download preview 
Allow user to download preview on editing their design.
Google fonts 
We have already added 50+ handpicked Google fonts, you can add your own Google font via settings.
Custom fonts 
You can add your own custom fonts on the designer.
Video tutorials
<ul>
<li><a href="https://www.youtube.com/watch?v=DNG07bincDk" rel="nofollow ugc">How to Install?</a></li>
<li><a href="https://www.youtube.com/watch?v=T_ppBuGcxnQ" rel="nofollow ugc">How to Configure?</a></li>
<li><a href="https://www.youtube.com/watch?v=qK2MyS10uFI" rel="nofollow ugc">Tour Guide</a></li>
<li><a href="https://www.youtube.com/watch?v=U7_UDxjo6bk" rel="nofollow ugc">How to add Cliparts, QR code, Barcode on design?</a></li>
<li><a href="https://www.youtube.com/watch?v=c_bOmHD8--w" rel="nofollow ugc">How to add Text & Curve Text on Design?</a></li>
</ul>

Product Designer

Have done testing few things, works fine with our current theme and WooCommerce.


Works Great

Ready product designer plugin for WooCommerce

Step Kit OS vs Product Designer