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

-

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

-

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

-

Create Simulator Page:

• Create a new page with the slug “simulador”

• Add the shortcode [custom_iframe] to the page content

• Publish the page

-

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

• Visit your store’s product page

• Click the “Customizar Camisola” button (created by the [simulator_button] shortcode or automatic injection)

• You will be redirected to the /simulador page

• Test the customization features and complete the purchase flow