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.

Amaspace

Amaspace is a powerful WordPress plugin that integrates your site with the Amaspace platform, providing seamless API connectivity, product integration, and precompose features for workflow automation.
Additionally, this plugin extends WooCommerce by adding a customizable product builder (customizer) that can be embedded on product pages or any other page. This allows your customers to create unique, personalized products in real-time, customize options such as colors, text, images, and other attributes, and then add their custom creations directly to the cart for purchase.
Ideal for businesses selling customizable items like apparel, mugs, phone cases, personalized gifts, and more, Amaspace empowers your customers to design and order products tailored specifically to their needs, enhancing user experience and boosting sales.
<h3>External Services</h3>
This plugin connects to external services provided by the Amaspace platform to enable product precomposition, integration, and live customization.
Service: Amaspace API 
– Endpoints Used: 
 – <code>https://int.amaspace.co/precompose/create-precompose</code> 
 – Sends: product name, description, price, image (base64), Amaspace product ID, configuration date, and access token. 
 – Purpose: Checks if a product with the same configuration already exists in Amaspace. If yes, returns existing ID. If not, creates a new product and returns its ID. 
 – <code>https://int.amaspace.co/precompose/create-integration</code> 
 – Sends: WordPress product ID and Amaspace precompose ID. 
 – Purpose: Creates a link between your WooCommerce product and the Amaspace product, so repeated configurations reuse the same precomposed data. 
– Terms of Use: https://amaspace.co/terms 
– Privacy Policy: https://amaspace.co/privacy
Service: Amaspace Customizer Frontend (hosted on Vercel) 
– URL Used: 
 – <code>https://app.amaspace.co/iframe/{product_id}</code> 
 – <code>https://app.amaspace.co/iframe/" . $ama_key . "?productID=2895&selectedProductID=parent_2895</code> 
 – Sends: Amaspace product ID as a parameter. 
 – Purpose: Loads the visual customizer interface inside an iframe for end-users to interact with and customize the product in real-time.

A customizable product builder for WooCommerce with Amaspace platform integration.

Step Kit OS vs Amaspace