Step Kit OS

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.

Product Setup

1. Create Required Products:

   • Create four Variable Products in WooCommerce:
     • Main Kit
     • Secondary Kit
     • Third Kit
     • Goalkeeper Kit
   • For each product:
     • Add the «size» attribute with variations (e.g., S, M, L, XL)
     • Set prices and other required fields
     • Publish the products

2. Configure Product IDs:

   • Go to WooCommerce > Step Kit OS in your WordPress admin
   • In the «Product Configuration» section:
     • Select your products from the dropdown menus for each kit type
     • The dropdowns automatically show all published WooCommerce products
   • Save your settings

3. Create Simulator Page:

   • Create a new page with the slug «simulador»
   • Add the shortcode [custom_iframe] to the page content
   • Publish the page

4. Add Simulator Button:

   • Edit your product pages
   • Add the shortcode [simulator_button] where you want the customization button to appear
   • Or enable automatic button injection in the plugin settings
   • Update the product pages

Shortcodes

• [custom_iframe] — Displays the customization iframe
• [simulator_button] — Displays the simulator button

Shortcode Parameters:

For [custom_iframe]: — height — Iframe height (default: 100vh) — width — Iframe width (default: 100%) — border — Border style (default: none) — product_id — Specific product ID (optional)

For [simulator_button]: — label — Button text (default: «Customizar Camisola») — class — CSS classes for styling — product_id — Specific product ID (optional)

Testing

1. Visit your store’s product page
2. Click the «Customizar Camisola» button (created by the [simulator_button] shortcode or automatic injection)
3. You will be redirected to the /simulador page
4. Test the customization features and complete the purchase flow