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.

CoderPress

<a href="https://coderpress.co/products/custom-product-builder-for-woocommerce/?utm_source=readme&utm_medium=top&utm_campaign=cpbwc" rel="nofollow ugc">Get Pro</a> | <a href="https://cpbw.coderpress.co/shop/" rel="nofollow ugc">Live Demo</a> | <a href="https://coderpress.co/docs/custom-product-builder-for-woocommerce/?utm_source=readme&utm_medium=top&utm_campaign=cpbwc" rel="nofollow ugc">How to Setup</a> | <a href="https://coderpress.co/forums/forum/custom-product-builder-for-woocommerce/?utm_source=readme&utm_medium=top&utm_campaign=cpbwc" rel="nofollow ugc">Pro Support</a>
Going through the video will help you setting up the Custom Product Builder for WooCommerce.
<iframe loading="lazy" title="Custom Product Builder for WooCommerce - Customized TShirt of Customized Product" width="750" height="422" src="https://www.youtube.com/embed/7iBEgabLyAU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Product Designer Can be Used
Since it has so many possibilities to be used, but some of them are:
<ul>
<li>Tshirt designer or customizer</li>
<li>Pouch designer or customizer</li>
<li>Cover designer or customizer</li>
<li>Pent designer or customizer</li>
<li>Mug designer or customizer</li>
<li>Cup designer or customizer</li>
<li>and Much More</li>
</ul>
This visual builder will help user to design what actually he wants to order.
At a glance, this free Custom Product Builder for WooCommerce adds the following:
<ul>
<li>Admin can make one product as a designer product.</li>
<li>Admin can upload Pictures works as canvas (Like shirts/ Mobile Covers/ Meal).</li>
<li>Admin can upload clipart or images which will help user to build product or Customize Product, User can place cliparts any where with using amazing drag and drop and image resizing feature.</li>
<li>User can design product and order it.</li>
<li>Buyer can order Customized T-Shirt.</li>
<li>Buyer can order Customized Dresses.</li>
<li>Buyer can order Customized Mobile Covers.</li>
<li>Buyer can order Customized Cups/ Mugs.</li>
<li>Buyer can order Customized anything.</li>
</ul>
Our Pro Plugin Includes: 
* Unlimited designable Products support. 
* Visitor/ Buyer can also upload images for order. 
* Visitor/ Buyer can use Pen tool to draw. 
* Visitor/ Buyer can write using text field and can also control font size, font, font color. 
* Visitor/ Buyer can download image on a single click. 
* Admin can see all the designer orders on a specific page. 
* Visitor/ Buyer can Order Customize Product.
Boost your sales by providing buyer unique experience of ordering Customized Product using Custom Product Builder for WooCommerce.
For Custom Product Builder for WooCommerce Pro Version Contact: coderpress.io@gmail.com

Custom Product Builder – Designer and Order Customized

Allow users to design and order customized product, User can design product by a unique and easy drag and drop builder and order it.

Step Kit OS vs Custom Product Builder – Designer and Order Customized