stepkitos

<p>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.</p>
<p>Key Features:<br />
– Seamless integration with WooCommerce<br />
– Interactive 3D product customization interface<br />
– Real-time product preview<br />
– Custom product attributes support (size, name, number, signature, badge)<br />
– Dynamic pricing based on customization options (separate pricing for name and number)<br />
– Flexible number pricing (fixed price or per-digit pricing)<br />
– Persistent cart functionality across sessions<br />
– Mobile-responsive design<br />
– Guest user support with proper session handling<br />
– Custom meta data display in cart and orders<br />
– Automatic cart updates and fragment refresh<br />
– Session persistence during login/logout<br />
– Automatic simulator button injection on product pages<br />
– Enhanced security with proper nonce verification</p>
<p>The plugin provides a complete solution for stores looking to offer customizable products with a modern, interactive interface.</p>
<h3>Product Setup</h3>
<ol>
<li>
<p>Create Required Products:</p>
<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>
<p>Configure Product IDs:</p>
<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>
<p>Create Simulator Page:</p>
<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>
<p>Add Simulator Button:</p>
<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>
<p><strong>Shortcode Parameters:</strong></p>
<p>For <code>[custom_iframe]</code>:<br />
– <code>height</code> – Iframe height (default: 100vh)<br />
– <code>width</code> – Iframe width (default: 100%)<br />
– <code>border</code> – Border style (default: none)<br />
– <code>product_id</code> – Specific product ID (optional)</p>
<p>For <code>[simulator_button]</code>:<br />
– <code>label</code> – Button text (default: “Customizar Camisola”)<br />
– <code>class</code> – CSS classes for styling<br />
– <code>product_id</code> – Specific product ID (optional)</p>
<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.

Dons Digital

<h3>Create complex product configurators and customizers in WordPress and WooCommerce without having to touch any line of code</h3>
<p><a href="https://wpconfiguratorbuilder.com" rel="nofollow ugc">WP Configurator Builder</a> (WCB in short) is a standalone Gutenberg-based product configurator builder plugin for WordPress, giving you a familiar drag-and-drop admin interface.<br />
The plugin does not require any coding knowledge to set up. Simply create your choices, design your form and upload your product images.</p>
<p>Key features of WP Configurator Builder include:</p>
<ul>
<li><strong>Stackable image layers</strong>: layer transparent PNGs on top of each other to automatically generate the final product render</li>
<li><strong>3D model viewer</strong>: built-in support for 3D viewer to create 3D product configurators based on 3D models</li>
<li><strong>Real-time updates</strong>: the configuration images and prices update in real time as the customer changes options</li>
<li><strong>Extra product options</strong>: extend WooCommerce products with custom add-ons and options. Includes support for swatches, text inputs, buttons and more.</li>
<li><strong>Request quotes</strong>: link configuration to WordPress form to capture leads</li>
<li><strong>WooCommerce integration</strong>: use the WooCommerce checkout system to purchase customized products</li>
<li><strong>Shortcode display</strong>: display configurator forms on any post or page using shortcode display</li>
<li><strong>Drag and drop form builder</strong>: use the Gutenberg drag-and-drop form editor to structure your configuration forms</li>
<li><strong>Multi language</strong>: built-in multi language plugin support</li>
</ul>
<p>You can use this product configurator builder to highlight your product variants in WordPress, collect leads using request a quote feature or drive sales through the checkout system of WooCommerce.</p>
<p>Quick links:</p>
<ul>
<li><a href="https://wpconfiguratorbuilder.com/demos/" rel="nofollow ugc">See the plugin in action</a> </li>
<li><a href="https://wpconfiguratorbuilder.com/features/" rel="nofollow ugc">Learn more about WCB (PRO)</a> </li>
<li><a href="https://wpconfiguratorbuilder.com/add-ons/" rel="nofollow ugc">Browse add-ons</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/" rel="nofollow ugc">Read the documentation</a> </li>
</ul>
<p><strong>Confused about how to get started?</strong> Watch our get started video:</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/zEhOnDEhTWE?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></span>
<h3>Places where the WP Configurator Builder plugin has been featured</h3>
<p><a href="https://wphive.com/reviews/wp-configurator-builder-review/" rel="nofollow ugc">🏆 WP Configurator Builder featured on WP Hive</a></p>
<p><a href="https://wpmayor.com/wcb-configurator-builder-discovery/" rel="nofollow ugc">🏆 WP Configurator Builder featured on WP Mayor</a></p>
<p><a href="https://www.wpdailythemes.com/plugin/wcb-configurator-builder-plugin/" rel="nofollow ugc">🏆 WP Configurator Builder featured on WP Daily Themes</a></p>
<h3>Why is WP Configurator Builder free?</h3>
<p>With the rise of personalization in e-commerce, we wanted to contribute to the WordPress and WooCommerce community by providing a plugin which allows you to create product configurator and customizer forms in a simple way for free.</p>
<h3>Why should I use this plugin?</h3>
<p>The WCB Configurator builder is a multi-functional product configurator plugin that can be used for various use-cases, including but not limited to:</p>
<ol>
<li><a href="https://wpconfiguratorbuilder.com/extra-product-options-for-woocommerce/" rel="nofollow ugc">Extra product options and WooCommerce product add-ons</a></li>
<li><a href="https://wpconfiguratorbuilder.com/visual-product-configurator-woocommerce-wordpress/" rel="nofollow ugc">Visual product configurators</a></li>
<li><a href="https://wpconfiguratorbuilder.com/3d-product-configurator-woocommerce-wordpress/" rel="nofollow ugc">3D product configurators</a></li>
<li><a href="https://wpconfiguratorbuilder.com/cpq-configurator-for-woocommerce-wordpress/" rel="nofollow ugc">Request quotes for custom products</a></li>
<li><a href="https://wpconfiguratorbuilder.com/guided-product-recommendation-forms/" rel="nofollow ugc">Guided selling forms</a></li>
<li><a href="https://wpconfiguratorbuilder.com/composite-products-for-woocommerce/" rel="nofollow ugc">Composite products</a></li>
<li><a href="https://wpconfiguratorbuilder.com/create-woocommerce-bundled-product/" rel="nofollow ugc">WooCommerce product bundles</a></li>
<li><a href="https://wpconfiguratorbuilder.com/product-customization-plugin-for-woocommerce/" rel="nofollow ugc">Product customizations</a></li>
<li><a href="https://wpconfiguratorbuilder.com/create-woocommerce-price-calculator/" rel="nofollow ugc">Measurement and cost calculators</a></li>
</ol>
<p>Example products:</p>
<ul>
<li>Custom furniture and interior design</li>
<li>Electronics (phones, wearables, etc)</li>
<li>Computers and gaming</li>
<li>Printed apparel and custom clothing</li>
<li>Shoes and bags</li>
<li>Music instruments</li>
<li>Vehicles and parts</li>
<li>Custom sheds and modular homes</li>
<li>Tools and equipment</li>
<li>Handmade items</li>
<li>Accessoires</li>
<li>Digital product customization</li>
</ul>
<h3>Drag and drop configurator builder</h3>
<p>Create and manage configuration fields with a drag-and-drop editor:</p>
<ul>
<li>Add unlimited fields</li>
<li><a href="https://wpconfiguratorbuilder.com/features/drag-and-drop-builder/" rel="nofollow ugc">Drag and hold to reorder fields</a></li>
<li>Apply each configurator to any WooCommerce product or display on any page</li>
</ul>
<h3>Live product image updates</h3>
<p>Automatically update your product visuals:</p>
<ul>
<li><a href="https://wpconfiguratorbuilder.com/features/live-product-image-updates/" rel="nofollow ugc">Preview image changes</a></li>
<li>Dynamic main image replacement</li>
<li>Multiple image product views supported (showcase your product from various angles)</li>
<li><a href="https://demos.wpconfiguratorbuilder.com/product/visual-text-controls/" rel="nofollow ugc">Apply custom text styles</a></li>
</ul>
<h3>Stackable PNG image layers</h3>
<p>Combine multiple images (layers) into a single live preview:</p>
<ul>
<li>Ideal for furniture, apparel, vehicle parts, and custom sets</li>
<li>Layer-by-layer visibility control</li>
<li>Support for transparent PNGs (and SVGs)</li>
</ul>
<h3>Customize products in 3D</h3>
<p>Create stunning 360 degree configuration experiences:</p>
<ul>
<li><a href="https://wpconfiguratorbuilder.com/addon/3d-visuals/" rel="nofollow ugc">Based on 3D GLB models</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/visuals/3d-model-updates/" rel="nofollow ugc">Show and hide specific parts</a></li>
<li>Update textures and colors</li>
<li>Add custom text and images</li>
<li><a href="https://wpconfiguratorbuilder.com/docs/visuals/update-3d-viewer-scenes/" rel="nofollow ugc">Update 3D model background scenes</a></li>
<li>Play or loop 3D animations</li>
<li>AR support (on compatible devices)</li>
</ul>
<h3>Visual drag and resize controls</h3>
<p>Customers can easily <a href="https://wpconfiguratorbuilder.com/features/visual-controls/" rel="nofollow ugc">drag, rotate and resize</a> elements on the product image:</p>
<ul>
<li>Drag custom text and images in the product image</li>
<li>Resize and scale text and image uploads</li>
<li>Rotate image uploads and texts</li>
</ul>
<h3>Flexible extra product fields</h3>
<p>Create unlimited custom option fields:</p>
<ul>
<li><a href="https://demos.wpconfiguratorbuilder.com/product/swatches-field/" rel="nofollow ugc">Color swatches</a></li>
<li>Image swatches</li>
<li><a href="https://demos.wpconfiguratorbuilder.com/product/button-group-field/" rel="nofollow ugc">Button groups</a></li>
<li><a href="https://demos.wpconfiguratorbuilder.com/product/form-tabs-field/" rel="nofollow ugc">Tab fields</a></li>
<li><a href="https://demos.wpconfiguratorbuilder.com/product/common-input-fields/" rel="nofollow ugc">Text fields</a></li>
<li>Number fields</li>
<li>Radio buttons</li>
</ul>
<h3>Request quotes</h3>
<p>Allow customers to request quotes via forms or email:</p>
<ul>
<li><a href="https://demos.wpconfiguratorbuilder.com/product/send-email/" rel="nofollow ugc">Send configurations via email</a></li>
<li><a href="https://demos.wpconfiguratorbuilder.com/product/request-quote/" rel="nofollow ugc">Request quotes via forms</a></li>
</ul>
<h3>Dynamic price rules</h3>
<p>Supports:</p>
<ul>
<li><a href="https://wpconfiguratorbuilder.com/features/live-product-price-updates/" rel="nofollow ugc">Live price recalculation</a></li>
<li>Per-option pricing</li>
<li>Fixed price increases</li>
<li>Sale prices</li>
<li>Unit prices (charge per character or per numeric value)</li>
</ul>
<h3>Built-in WooCommerce integration</h3>
<p>Sends all configuration data to:</p>
<ul>
<li><a href="https://demos.wpconfiguratorbuilder.com/product/visual-image-update/" rel="nofollow ugc">Add configurations to cart</a></li>
<li>Checkout</li>
<li>Order confirmation</li>
<li>Multi currency support</li>
</ul>
<h3>Block theme and page builder support</h3>
<p>Insert configurators anywhere using:</p>
<ul>
<li>Gutenberg block</li>
<li>Shortcode block</li>
<li><a href="https://wpconfiguratorbuilder.com/features/pre-built-templates/" rel="nofollow ugc">Pre-built templates</a></li>
</ul>
<h3>Build unlimited configurators</h3>
<p>The WP Configurator Builder plugin has no limit on the amount of configurations you can create. You can use it on:</p>
<ul>
<li>Any number of products </li>
<li>Any product type</li>
<li>Any store size</li>
</ul>
<h3>Custom CSS and design controls</h3>
<p>Style the configurator visually:</p>
<ul>
<li>Buttons, borders, spacing</li>
<li>Fonts and colors</li>
<li>Step indicators</li>
<li>Form elements</li>
<li>Global styling</li>
<li>Custom styles and scripts</li>
</ul>
<h3>Developer friendly</h3>
<p>Includes:</p>
<ul>
<li>Hooks</li>
<li>Filters</li>
</ul>
<h3>Multi-language and RTL-display support</h3>
<p>The plugin is fully compatible with <a href="https://wpconfiguratorbuilder.com/features/multi-language/" rel="nofollow ugc">multi language</a> plugins:</p>
<ul>
<li>WPML</li>
<li>Polylang</li>
<li>LocoTranslate</li>
<li>And more</li>
</ul>
<h3>Paid plugin features</h3>
<p>Upgrade to <strong>WCB Configurator Builder Pro</strong> bundle for more advanced customization capabilities.</p>
<h4>Advanced configuration form fields</h4>
<p>Extend your configuration form with advanced fields:</p>
<ul>
<li><a href="https://wpconfiguratorbuilder.com/docs/choices/dropdown/#heading-2" rel="nofollow ugc">Image dropdown</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/user-inputs/date-picker/" rel="nofollow ugc">Date picker field</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/user-inputs/color-picker/" rel="nofollow ugc">Color picker field</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/user-inputs/range-slider/" rel="nofollow ugc">Range slider field</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/user-inputs/file-upload/" rel="nofollow ugc">File upload field</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/choices/swatches/#heading-2" rel="nofollow ugc">Field sliders</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/configurator-forms/form-builder/#heading-11" rel="nofollow ugc">Repeater field</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/configurator-forms/form-builder/#heading-10" rel="nofollow ugc">Panel options field</a></li>
</ul>
<h4>Conditional field display</h4>
<p>Take customization further with <a href="https://wpconfiguratorbuilder.com/addon/conditional-display/" rel="nofollow ugc">conditional display</a>:</p>
<ul>
<li>Multi-condition rules</li>
<li>AND/OR logic rules support</li>
<li>Disable single options</li>
<li>Show or hide fields</li>
</ul>
<h4>Create multi-step configuration forms</h4>
<p>Convert the configurator into a <a href="https://wpconfiguratorbuilder.com/features/multi-step-forms/" rel="nofollow ugc">guided multi step wizard</a>:</p>
<ul>
<li>Mandatory steps  </li>
<li>Next/Previous navigation</li>
<li>Configuration summary page</li>
</ul>
<h4>Save and resume configurations</h4>
<p>Allow customers to:</p>
<ul>
<li><a href="https://wpconfiguratorbuilder.com/docs/configurator-forms/generate-configuration-link/" rel="nofollow ugc">Save their progress and resume later</a></li>
<li>Add configurations to a wishlist</li>
<li>Load saved designs</li>
</ul>
<h4>Create advanced pricing rules</h4>
<p>Pro-level pricing flexibility:</p>
<ul>
<li><a href="https://wpconfiguratorbuilder.com/docs/pricing/percentage-price/" rel="nofollow ugc">Percentage based pricing</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/pricing/formula-price/" rel="nofollow ugc">Formula pricing</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/pricing/table-tiered-price/" rel="nofollow ugc">Tiered table prices</a></li>
</ul>
<h4>Enable configuration PDF downloads</h4>
<p>Customers can easily <a href="https://wpconfiguratorbuilder.com/docs/configurator-forms/download-pdf-file/" rel="nofollow ugc">download a PDF file</a> containing:</p>
<ul>
<li>Configuration price</li>
<li>Company details</li>
<li>Selected options</li>
<li>Generated images</li>
</ul>
<h4>Customer wishlists</h4>
<p>Customers can easily save their favorite designs to their wishlist</p>
<ul>
<li><a href="https://wpconfiguratorbuilder.com/docs/configurator-forms/add-to-wishlist/" rel="nofollow ugc">Save configurations to wishlist</a></li>
<li>Load designs from wishlist</li>
<li>Set WooCommerce account-based wishlist</li>
</ul>
<h4>Inventory management</h4>
<p>Store owners can easily manage their configurations options:</p>
<ul>
<li><a href="https://wpconfiguratorbuilder.com/docs/inventory/option-weights/" rel="nofollow ugc">Option weight management</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/inventory/sku-management/" rel="nofollow ugc">Option SKU management</a></li>
<li><a href="https://wpconfiguratorbuilder.com/docs/inventory/stock-tracking/" rel="nofollow ugc">Option stock management</a></li>
</ul>
<h4>Linked WooCommerce products</h4>
<p>Store owners can easily build composite or bundled products using the linked products field:</p>
<ul>
<li><a href="https://wpconfiguratorbuilder.com/features/linked-woocommerce-products/" rel="nofollow ugc">Link WooCommerce products to configuration options</a></li>
<li>Add products to cart separately</li>
<li>Manage product details (like title, stock, sku and price) in WooCommerce</li>
</ul>
<h4>Configuration analytics</h4>
<p>Store owners can easily see best performing configuration options:</p>
<ul>
<li>See conversion rates</li>
<li>Explore most selected configuration options</li>
<li>Collect emails for customer retargeting</li>
</ul>
<h3>WooCommerce visual product customizer plugin</h3>
<p>Build visual product configurators with our product configurator builder tool. Add image layers, customize text and upload images.</p>
<p>You can also allow your customers to drag and resize text and images on the product images using the visual control settings provided in our plugin.</p>
<h3>3D product configurator plugin</h3>
<p>Step up your visual game with GLB 3D models. Change colors, update model parts and even show the 3D model in your own room using AR capabilities.</p>
<p>Change the visual display to 3D model in WCB > Settings and start creating stunning 3D configurations inside the WCB configurator plugin.</p>
<h3>WooCommerce product configurator</h3>
<p>If you are running a WooCommerce store, you can also use this plugin to extend your regular WooCommerce products and add extra product options, like input fields, swatches, and more.</p>
<p>This product configurator plugin integrates seemlessly with the WooCommerce plugin. Connect your configurations to WooCommerce products and build stunning product configurators and customizers with ease.</p>
<p>You can choose to extend simple products or variation products.</p>
<p>Use the WooCommerce checkout system to handle the online purchasing process.</p>
<h3>WordPress CPQ configurator (Configure, Price, Quote)</h3>
<p>Allow your customers to ask for specific pricings using the request a quote feature of our plugin.</p>
<p>Simply link your configurator to your favourite form plugin or use the email button action and start collecting leads.</p>
<p>Supported form plugins include:</p>
<ul>
<li>WP Forms</li>
<li>Forminator</li>
<li>Fluent Forms</li>
<li>Formidable Forms</li>
<li>Gravity Forms</li>
<li>Ninja Forms</li>
<li>Contact Form 7</li>
</ul>
<p>Note: basically any form plugin is supported as long as it allows you to set custom classes for input fields.</p>
<h3>WooCommerce Cost Calculator</h3>
<p>Get the <a href="https://wpconfiguratorbuilder.com/addon/advanced-price-calculations/" rel="nofollow ugc">advanced calculations add-on</a> and create advanced price calculations using formula’s and tiered table prices</p>
<p>This allows you to perform advanced calculations based on numeric inputs and allows you to create a measurements cost calculator for example.</p>
<h3>WordPress Product Configurator</h3>
<p>The WP Configurator Builder plugin is designed as a standalone plugin. You can use the shortcode to display your product configurator on any page you like.</p>
<h3>About</h3>
<p>This plugin is developed and maintained by Dons Digital.</p>


WCB | WP Configurator Builder – Product Configurators Made Simple

Create customizable products with ease; custom product fields, real-time updates, stackable image layers, and more!

Step Kit OS vs WCB | WP Configurator Builder – Product Configurators Made Simple