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.

YayCommerce

YayExtra – Product Options for WooCommerce lets you add customizable options and extra fields to your products.
Perfect for stores that sell personalized, configurable, or add-on products.
What you can do with YayExtra:
<ul>
<li>Add custom product options to any WooCommerce product</li>
<li>Offer personalization fields (name, message, notes, etc.)</li>
<li>Create product add-ons from existing products</li>
<li>Collect extra information from customers before checkout</li>
<li>Improve product pages and increase order value</li>
</ul>
👉 Check it out: <a href="https://yaycommerce.com/yayextra-woocommerce-extra-product-options/" rel="nofollow ugc">YayExtra – Woo Product Options Pro</a> 👀
Works great for selling:
<ul>
<li>Custom apparel</li>
<li>Personalized gifts</li>
<li>Configurable products</li>
<li>Service add-ons</li>
<li>Print-on-demand items</li>
<li>Value-added services</li>
</ul>
Build better product pages. Offer more choices. Sell more with YayExtra.
📌 <a href="https://demo.yaycommerce.com/yayextra/product/t-shirt/" rel="nofollow ugc">Quick Demo</a> | <a href="https://demo.yaycommerce.com/try-yayextra" rel="nofollow ugc">Admin Test Drive</a>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/qytEac2_Yr0?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
Why Upgrade? Check it here: <a href="https://docs.yaycommerce.com/yayextra/why-upgrade" rel="nofollow ugc">Free vs Pro</a>
<h3>⚡️ FEATURES</h3>
Powerful Custom Product Options 
YayExtra supports many <a href="https://docs.yaycommerce.com/yayextra/how-it-works/option-types" rel="nofollow ugc">WooCommerce product field types</a> to serve your diverse use cases:
<ul>
<li>Allow customers to input text, number, email, etc.</li>
<li>Add radio buttons to the original product</li>
<li>Enable checkbox to allow for privacy policy acknowledgement</li>
<li>Add button rows to customize the base product</li>
<li>Add one time fee in percentage or fixed amount</li>
<li>Add multiple fees to multiple product options</li>
<li>Display the subtotal for the selected extras</li>
</ul>
Multiple Options in an Option Set 
You can add many product custom fields in the same group. Related options can be displayed next to each other or vertically. A product field can trigger the display of the next product field.
Apply Product Options in Bulk 
A group of product fields can be applied to all products, a group of products in a specific category, a group of products with a specific tag, or hand-picked products.
Developer-Friendly 
This product options plugin allows using hooks for <code>before_calculate_totals</code> function to modify the <a href="https://docs.yaycommerce.com/yayextra/developer-zone" rel="nofollow ugc">cart item line total</a>.
WooCommerce Conditional Variations 
YayExtra allows you to create conditional logic that can be combined with the existing custom options. Conditional logic shows the next product fields if the user selects a specific option value.
Let’s suppose that you sell car parts, so when the customer chooses to have “Accessories” then related options like “Front door items” or “Replacement kit” can be shown on the current product page. Otherwise, if the customer doesn’t check the “Accessories” checkbox, then those options will not show up, which will keep your product page neat and clear.
💡 Want to sell more with every order? Meet <a href="https://yaycommerce.com/yayboost-sales-booster-for-woocommerce/" rel="nofollow ugc">YayBoost – Sales Booster for WooCommerce</a> 🎉 
It adds powerful upsell and cross-sell features to your WooCommerce store: free shipping nudge, product recommendations, order bumps, and post-purchase offers that convert. <a href="https://wordpress.org/plugins/yayboost-sales-booster-for-woocommerce/" rel="ugc">Try free version here ↗</a>
<h3>💎 PREMIUM-ONLY FEATURES</h3>
Advanced Product Addons 
Multiple field types are built in the premium version:
<ul>
<li>Image swatches</li>
<li>Button (multi selectable)</li>
<li>Swatches (multi selectable)</li>
<li>Date picker</li>
<li>Time picker</li>
<li>File Upload</li>
</ul>
Grouping and Bundling Products 
Similar to “related products,” you can easily use an existing product as a swatch or option for another product.
<ul>
<li>Assign the “Custom Stickers” product as an additional option for a range of “Bag” products.</li>
<li>Offer a “Matched Cap” as an optional add-on for a “Baseball T-Shirt” to create a coordinated set.</li>
<li>Quickly <a href="https://yaycommerce.com/best-ways-to-create-product-bundles/" rel="nofollow ugc">set up product bundles</a> and upsell opportunities to maximize sales.</li>
</ul>
<h3>🔑 ENHANCED SETTINGS</h3>
Each field type comes with various elements to help you enhance the extra product options:
<ul>
<li>Required field: Require the customer to select an option or enter the information so it can be passed through in the order (Free)</li>
<li>Placeholder: Add help text or expected value to be entered in the field (Free)</li>
<li>Set as default: Enable a specific option value to be selected upon product page load (Free)</li>
<li>Custom image: Use uploaded swatch image to show on product featured image (Premium-only)</li>
<li>File upload: Add a single or multiple file uploads, make file uploads mandatory or optional, and many other options.</li>
<li>File upload: Allow specific file formats like PNG, JPG, PDF, DOC, XLS, etc.</li>
</ul>

YayExtra – WooCommerce Extra Product Options

YayExtra – Product Options for WooCommerce lets you add customizable options and extra fields to your products.

Step Kit OS vs YayExtra – WooCommerce Extra Product Options