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.

designnbuy

<p><strong>DesignO</strong> Product Designer for WooCommerce allows customers to design, customize, or personalize products on your WooCommerce website. DesignO is a comprehensive API-driven personalization commerce platform that offers multiple options for personalized product ordering to customers. The first option is a full design tool, similar to Canva, integrated into your website. The second option is a form-based editor that allows customers to personalize products using a form, and the third option is to upload artwork and proceed to checkout.</p>
<p>Our <a href="https://www.designnbuy.com/web-to-print-woocommerce-product-designer/" title="WooCommerce product designer" rel="nofollow ugc">WooCommerce product designer</a> is powered by a centralized print order management software that caters to various businesses, including print service providers, packaging manufacturers, garment decorators, promotional gift suppliers, brand management firms, marketing organizations, graphic designers, digital asset management companies, franchise businesses, in-plant printers, and trade organizations.</p>
<h3>Awesome Features</h3>
<h3>Rich Editor</h3>
<ul>
<li><strong>Fully mobile responsive design tool for product personalization</strong> such as print, packaging and merch with Canva like UX for desktop users and an app-like interface for mobile users. The <a href="https://www.designnbuy.com/web-to-print-online-designer/" title="design tool" rel="nofollow ugc">design tool</a> opens within your Magento store so that customers never leave your website.</li>
<li><strong>Allows customers to save their designs in customer account for ordering and re-ordering</strong> to get the high lifetime value of the customers.</li>
<li><strong>Allows customers to add personalized products right from within the design tool</strong>. From the shopping cart page, customers can proceed to checkout or go back to the design tool for further modifications in the artwork.</li>
</ul>
<h3>File Upload and Checkout</h3>
<ul>
<li><strong>It is most common for a web-to-print shop to allow users to upload ready-to-print artwork and place orders</strong>. When placing an order online, buyers will be able to browse any product, select product options, check pricing, and finally upload artwork.</li>
</ul>
<h3>Form Based Editor</h3>
<ul>
<li><strong>Form-based editor can be enabled from backend for the products where just need the form for personalization</strong>, this allow customers to just fill the form for personalization. It is the most easiest way to personalize and submit the order for end customers.</li>
<li><strong>Form-based editor includes options to edit text, text paragraph, image, colors, font and many more</strong>.</li>
</ul>
<h3>Custom Options</h3>
<ul>
<li><strong>DesignO allows to admin users to add custom options in the products</strong>.</li>
<li><strong>Different types of options can be added like– text box, text area, checkbox, swatch box, dropdown, image dropdown, hidden filed, attribute and many more</strong>.</li>
</ul>
<h3>Custom Pricing</h3>
<ul>
<li><strong>Per Unit Pricing</strong>: DesignO allows to admin users to configure pricing based on per unit, where admin can defined quantity based tier pricing, size based tier pricing or can combine both together.</li>
<li>
<p><strong>Admin can also set product base price, pricing for single option or make a combination of options and set pricing for it</strong>.</p>
</li>
<li>
<p><strong>Size based Pricing</strong>: DesignO allow admin to set pricing for products which works of per sq unit such as banner, wallpaper, backdrop and many more. Admin can set base pricing and custom options pricing based on sizes.</p>
</li>
</ul>
<h3>Order and Job Management</h3>
<ul>
<li>DesignO provide complete <a href="https://www.designnbuy.com/print-order-management-software/" title="order management" rel="nofollow ugc">order management</a> system to execute the order and ship to the customer.</li>
<li>Each order gets Print-ready files which can directly go in printing.</li>
<li>Comprehensive job monitoring and management from pre-press to ready-for-delivery.</li>
<li>Define unique print workflow management for each type of printable product.</li>
<li>Full visibility through live job dashboard and job calendar to get every order delivered on time.</li>
<li>Notifications and e-mails for artwork approval and status updates to/from customers and your internal team.</li>
<li>Role-based access to back-end users for full control and data security.</li>
</ul>
<h3>Library Management</h3>
<ul>
<li>DesignO provides complete library management to admin user to add and edit fonts, colors, clipart, artwork and layouts.</li>
<li>DesignO provides admin user a easy to use design template builder with full control to define editable and non-editable elements in the artwork.</li>
<li>Admin also can import ready artwork and templates from DesignRiver which is integrated in DesignO.</li>
</ul>
<h3>Other Features</h3>
<ul>
<li>Multi-store support.</li>
<li>Multi-lingual and Multi-currency support.</li>
</ul>
<h4>Benefits</h4>
<ul>
<li>No more re-platforming, just integrate through API</li>
<li>No more loosing on SEO and website traffic</li>
<li>Reduce the number of software installations and licensing fee</li>
<li>Centralize your pre-press work and reduce production cost</li>
<li>Manage more work in the most profitable way possible</li>
<li>Offers thousands of pre-made templates to choose from</li>
</ul>
<h4>Who Use it</h4>
<ul>
<li>Digital, Commercial, and Wide Format Printers</li>
<li>Photo Printers & Book Publishers</li>
<li>Garment Decorator, Promotional Product Suppliers, Custom Merch Vendors</li>
<li>Marketing Agencies and Graphics Designers</li>
<li>Real Estate Agencies</li>
<li>Educational Institutes and Universities</li>
<li>Franchisee Businesses</li>
<li>Corporates and Trade Printers</li>
</ul>
<h4>DesignO Upgrades</h4>
<p>If you are currently using an older version of DesignO, please avoid upgrading to newer versions without guidance from our technical support team, as direct upgrades may not always be successful due to API integrations. For assistance with upgrading DesignO, kindly reach out to our technical support team at support@designnbuy.com.</p>
<h3>Video</h3>
<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/mxxDGat__0A?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><br />
<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/-I4FYysV2Bc?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><br />
<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/k2kzykn_y_E?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><br />
<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/p6sQJkjcTP8?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></p>


DesignO

Awesome plugin!

DesignO - an API-driven, easy-to-use, and works everywhere online designer tool.

Step Kit OS vs DesignO