<h1 style="text-align: center">Add Extra Product Options and Add-ons</h1>
<p>Product Options and Fields extension allows you to offer products with a variety of personalization options. You can choose from radio button, dropdown, multi-select and 13 other field types.</p>
<p>According a recent study, 80% of customers are willing to pay more when they’re offered product customization.  The standard WooCommerce variations does not cover unique business needs and this is where Product Option and Fields extension comes in.</p>
<p>Keep your product page clean by adding dependable product add-ons. You can also assign add-ons to specific user roles like B2B, wholesale and other customers to ensure that personalization options are displayed to relevant customers types only.</p>
<p>Add global or product specific add-ons and charge additional fee for each option. The extension offers 5 pricing types to dynamically price your product options. Below is the detailed feature list of this extension.</p>
<h2>Features</h2>
<ul>
<li>Add unlimited product add-ons</li>
<li>Add extra options at the product level (product edit sheet)</li>
<li>Supports variable products to add variation specific add-ons</li>
<li>Add product options using global rules (bulk-assign to multiple products)</li>
<li>Supports 16 types of fields (see the support fields list below)</li>
<li>Add dependent/conditional product add-ons</li>
<li>Restrict add-ons based on user roles</li>
<li>Enable and <strong>manage stock</strong> for specific product options (<strong>New</strong>)</li>
<li>Choose from five price options
<ul>
<li>Free</li>
<li>Flat-fixed fees</li>
<li>Flat-percentage fees</li>
<li>Fixed fees, based on quantity</li>
<li>Percentage fees based on quantity</li>
</ul>
</li>
<li>Add price per character for input-text and text-area field (<strong>New</strong>)</li>
<li>Custom sort product add-ons</li>
<li>Preselect default options for checkboxes, radio buttons, and dropdown fields (<strong>New</strong>)</li>
<li>Allow customers to select quantities for specific add-ons with full control over limits (<strong>New</strong>)</li>
<li>Make product options mandatory or optional</li>
<li>Add character limits for text areas and text-input fields</li>
<li>Customize options, fonts, colors, and other settings</li>
<li>Compatible with WooCommerce <strong>cart and checkout blocks</strong></li>
</ul>
<h2>Add product options using global rules</h2>
<p>With WooCommerce Product Options extension, you can add multiple global rules to create different sets of add-ons and assign them to specific products, categories, and user roles.</p>
<p><img class="alignnone size-full wp-image-18734001833890" src="https://woocommerce.com/wp-content/uploads/2023/04/Product-options-rules-list.png" alt="" width="980" height="420" /></p>
<p>While creating new global rules, you can customize the following options:</p>
<ul>
<li>Add multiple add-ons using different field types</li>
<li>Apply add-ons to specific products, categories, and user roles</li>
<li>Customize styling options</li>
</ul>
<p><img class="alignnone size-full wp-image-18734005548531" src="https://woocommerce.com/wp-content/uploads/2023/05/WooCommerce-Product-Options-Global-Rules.png" alt="" width="980" height="1828" /></p>
<h2><strong>Add options at the product level</strong></h2>
<p>Instead of creating global rules, the merchants can add product-specific add-ons from the product edit sheet. You can add new add-ons/options for both simple and variable products. The extension does support variable products – allowing you add variation specific add-ons. While adding new product options from product level, you can:</p>
<ul>
<li>Customize style settings</li>
<li>Add multiple add-ons</li>
<li>Choose to disable global add-ons for a specific product</li>
</ul>
<p><img class="alignnone size-full wp-image-18734005548563" src="https://woocommerce.com/wp-content/uploads/2023/05/Product-addons-on-product-level.png" alt="" width="980" height="1082" /></p>
<h2><strong>Add dependable add-ons</strong></h2>
<p>With this extension, you can make add-ons dependent on other add-ons or their specific options. The Product Options and Fields extension helps merchants keep their product pages uncluttered by only showing necessary fields.</p>
<p><img class="alignnone size-full" src="https://woocommerce.com/wp-content/uploads/2023/05/5-woocommerce-product-addons.gif" width="878" height="557" /></p>
<h2><strong>Choose from 5 pricing types:</strong></h2>
<p>You can keep the extra product options free or charge an additional fee for them. You can assign a price for the entire add-on or set different prices for each option. This WooCommerce Product Addons extension comes with five pricing types to cover unique pricing requirements.</p>
<ul>
<li>Free</li>
<li>Flat-fixed fees</li>
<li>Flat-percentage fees</li>
<li>Fixed fees, based on quantity</li>
<li>Percentage fees based on quantity</li>
<li>Price per character in case of text fields</li>
</ul>
<p>Flat fees apply one charge to an add-on option for any quantity. Quantity-based fees increase as quantity increases.</p>
<p><strong><img class="alignnone size-full wp-image-18734001833979" src="https://woocommerce.com/wp-content/uploads/2023/04/Pricing-models.png" alt="" width="980" height="281" /></strong></p>
<h2><strong>Supports 16 field types:</strong></h2>
<p>WooCommerce Product Options comes with 16 field types enabling you to add different types of product add-ons.</p>
<ul>
<li>Drop-down choice lists</li>
<li>Multi-select options</li>
<li>Checkboxes</li>
<li>Input text and text areas</li>
<li>File uploads</li>
<li>Numbers</li>
<li>Quantity</li>
<li>Radio buttons</li>
<li>Colors</li>
<li>Image switcher</li>
<li>Images</li>
<li>Date picker</li>
<li>Email</li>
<li>Password (secret input field)</li>
<li>Time picker</li>
<li>Telephone number</li>
</ul>
<h2><strong>Manage product options stock:</strong></h2>
<p>Easily manage stock levels for each product option with this extension. Keep full control of your product add-ons inventory by assigning individual stock quantities to each option. This ensures customers can only order available options, preventing overselling and eliminating orders for out-of-stock add-ons.</p>
<p><img class="alignnone size-full wp-image-18734005548529" src="https://woocommerce.com/wp-content/uploads/2023/05/Manage-Options-Stock.png" alt="" width="980" height="355" /></p>
<h2><strong>Control add-ons quantity:</strong></h2>
<p>Give your customers the flexibility to choose the quantity of each add-on while maintaining control over how much they can purchase. Set minimum and maximum quantity limits for any add-on, ensuring customers order within your defined range—perfect for managing special products options or limited-stock extras.</p>
<p><img class="alignnone size-full wp-image-18734005548527" src="https://woocommerce.com/wp-content/uploads/2023/05/Quantity-Selection.png" alt="" width="980" height="388" /></p>
<h2><strong>Restrict add-ons by user roles:</strong></h2>
<p>You can choose to restrict product options to specific user roles only. This enables you to offer additional options to B2B, VIP or any specific user types.</p>
<p><img class="alignnone size-full wp-image-18734005548543" src="https://woocommerce.com/wp-content/uploads/2023/05/Restrict-Product-Options-by-User-Roles.png" alt="" width="980" height="473" /></p>
<h2><strong>Customize fields label, colors, and layout</strong></h2>
<p>While creating new global rules or creating WooCommerce add-ons from product level, you can customize the following style settings:</p>
<ul>
<li>Display field titles as heading or text</li>
<li>Customize text and background colors</li>
<li>Add line separators between add-ons</li>
<li>Customize option title sizes and colors</li>
<li>Add borders around add-ons</li>
<li>Set field title positions</li>
<li>Customize description font sizes</li>
<li>Tooltip font sizes, backgrounds, and text colors</li>
</ul>
<h2><img class="alignnone size-full wp-image-18734001833985" style="font-family: sans-serif;font-size: 16px" src="https://woocommerce.com/wp-content/uploads/2023/04/WooCommerce-Product-Addon-styling.png" alt="" width="980" height="760" /></h2>
<h3>Requirements</h3>
<p>Minimum PHP version: 5.2</p>

Product Options and Addons

<p>Offer product personalization options by adding free or paid product add-ons. Supports multi-select, dropdown and 14 other dependable field types.</p>

<h2>Let your customers design & customize products</h2>
<p>Product Designer for WooCommerce by KILB gives your customers the opportunity to create their own designs for products like <strong>shirts</strong>, <strong>posters</strong>, <strong>banners</strong>, <strong>cups & mugs</strong>, etc.</p>
<p>Customers can create unique designs before they can add products to their carts. They can <strong>upload their own images</strong>, create <strong>texts with several fonts</strong>, add <strong>QR codes</strong>, or choose between a set of predefined images.</p>
<p>After the customer adds a product to their cart, they can see a preview image of the final product. When they order the product, a preview displays, and you’ll see the rendered design in the backend of WordPress.</p>
<span class="embed-youtube" style="text-align:center"></span>
<h2>Benefits</h2>
<h3>✏️ Customizability</h3>
<p>You can <em>configure</em> nearly everything to your specification including:</p>
<ul>
<li><strong>Size</strong> (height + width) of your product</li>
<li>Size and <strong>position</strong> of the area that can be designed</li>
<li><strong>Text colors</strong> the customer can choose from</li>
<li><strong>Predefined images</strong> the customer can choose from</li>
<li><strong>Background images</strong> the customer can choose from</li>
<li><strong>Snapping</strong> strength</li>
<li><strong>Pixabay</strong> integration using your own API key</li>
<li>…</li>
</ul>
<p>You can specify different areas for the same product. Like the front and back side of a T-Shirt. You can configure as many products as you like.</p>
<p>You set up as many translations as you like. Product Designer ships with English and German – but you can add new translations by simply creating JSON files.</p>
<p>The plugin works out of the box. Still, if you want to customize it using your developer skills, there’s a great documentation explaining how to do so: <a href="https://docs.product-designer.io/">https://docs.product-designer.io/</a></p>
<h3>🚀 Performance</h3>
<p>The Product Designer is built on an amazingly fast JavaScript Framework: <strong>Vue.JS</strong>. The designer will be shipped with minimized JavaScript and CSS to improve page speed load time. It will be loaded in the background – if the customer clicks the button to create the design everything will be already loaded.</p>
<h3>🖨️ Multiple export file types</h3>
<p>In the admin panel, you are able to export the designs created by your customers in multiple formats:</p>
<ul>
<li><strong>PDF</strong> (vectorized)</li>
<li><strong>JPG</strong>, <strong>WebP</strong>, <strong>PNG</strong></li>
<li><strong>SVG</strong></li>
<li><strong>JSON</strong> (for development / further processing)</li>
</ul>
<p>There’s no artificial limit in resolution, quality or file size. You can set the quality and size of your export files very high. If your browser and computer is able to generate the files, you are fine.</p>
<h3>🤝 Compatibility</h3>
<p>The plugin is integrated into WooCommerce and WordPress, but only where necessary. It’s unlikely to conflict with other plugins.</p>
<h3>🖥 Responsiveness</h3>
<p>The plugin works effectively on <strong>phones</strong>, <strong>tablets</strong>, <strong>notebooks</strong>, and <strong>desktops</strong>. It will always work the same way. It’s completely responsive.</p>
<h3>👩🏻‍⚖️ GDPR compliant</h3>
<p>The designer doesn’t embed external resources like Google Fonts nor any tracking scripts.<br />
It’s only running on your server without any external cloud/third party provider necessary.</p>
<p>We respect your customer’s privacy.</p>
<h3>👩🏻‍💻Extendable via JavaScript and CSS</h3>
<p>You can extend and modify the functionality of the product designer if you know how to use CSS and JavaScript. See fabricJS documentation here: <a href="http://fabricjs.com/docs/">http://fabricjs.com/docs/</a></p>
<h2>How does it work?</h2>
<p>Before a product is added to the cart, the customer can create a unique design. They can upload images, create texts with several fonts, add QR codes, or choose between a set of predefined images you offer.</p>
<p>After the customer has added the product to the cart, a preview image of the final product will display.</p>
<p>See this video to understand how to set up the designer and get a first idea how it will work:</p>
<p>https://www.youtube.com/watch?v=jT61VoMICb8<br />
<img class="alignnone size-medium wp-image-7958574" style="font-family: sans-serif;font-size: 16px" src="https://woocommerce.com/wp-content/uploads/2021/05/wc_example_1.jpg?w=620" alt="Product Designer Example Product Page" width="620" height="554" /><br />
<img class="alignnone size-medium wp-image-7958575" src="https://woocommerce.com/wp-content/uploads/2021/05/wc_example_2.jpg?w=620" alt="Product Designer Example T-Shirt" width="620" height="315" /></p>
<p><img class="alignnone size-medium wp-image-18734001862896" src="https://woocommerce.com/wp-content/uploads/2021/06/Screenshot-2023-04-23-at-04.31.31.png?w=620" alt="Product Designer WooCommerce Crown Cap Example" width="620" height="343" /></p>
<h3>Highlights</h3>
<p>✅ Product designs for each article and variant possible</p>
<p>✅ SVG support for image uploads and design exports</p>
<p>✅ Predefined product designs possible</p>
<p>✅ Super-high performance, with the super-low file size of CSS and JavaScript files</p>
<p>✅ Simple and clear backend</p>
<p>✅ Customize extensively via JavaScript and CSS</p>
<p> </p>
<div style="color: dimgray">
<p>As an online shop owner, it is important to continually find ways to set your business apart from competitors and improve the customer experience. One way to do this is by installing our <strong>Product Designer for WooCommerce extension</strong>, which will allow customers to individually design the products you sell.</p>
<ol>
<li>
<h3>Personalization is key in eCommerce</h3>
</li>
</ol>
<p>One of the most significant benefits of a product designer extension is that it allows customers to create personalized products. Personalization is becoming increasingly popular in the eCommerce world, as customers want to feel that their purchases are unique and tailored to their preferences. By offering a product designer extension, you give customers the ability to create custom designs that reflect their individual style, making the product more valuable to them.</p>
<ol start="2">
<li>
<h3>Increased customer engagement</h3>
</li>
</ol>
<p>Customers who are given the opportunity to design their own products are more likely to engage with your brand and spend more time on your site. The product designer extension will provide an interactive experience for your customers, allowing them to experiment with different design options and colors. This type of engagement can lead to increased customer loyalty and repeat business.</p>
<ol start="3">
<li>
<h3>Increased conversion rates</h3>
</li>
</ol>
<p>Offering a product designer extension can lead to higher conversion rates. Customers are more likely to purchase a product that they have designed themselves, as it creates a sense of ownership and attachment to the product. Additionally, customers who have spent time designing a product are less likely to abandon their cart, as they have invested time and effort in creating their personalized item.</p>
<ol start="4">
<li>
<h3>Increased revenue</h3>
</li>
</ol>
<p>By offering a product designer extension, you are providing customers with a unique service that can justify a higher price point. Customers are willing to pay more for products that are personalized to their individual preferences, and a product designer extension provides that added value. Additionally, the ability to create custom designs can lead to increased sales, as customers who are able to design their own products are more likely to make a purchase.</p>
<ol start="5">
<li>
<h3>Competitive advantage</h3>
</li>
</ol>
<p>A product designer extension can set your business apart from competitors. While many eCommerce stores offer personalized products, not all of them offer the ability to design those products from scratch. By offering a product designer extension, you give customers the ability to fully customize their products, making your business stand out in the crowded eCommerce marketplace.</p>
<p>In conclusion, installing a product designer extension on your WooCommerce site is a smart business decision that can lead to increased customer engagement, higher conversion rates, increased revenue, and a competitive advantage. By providing customers with the ability to create personalized products, you create a unique and interactive shopping experience that will keep them coming back to your store time and time again.</p>
</div>

KILB Product Designer

<p><strong>Product Designer for WooCommerce</strong> by KILB allows customers to create <strong>personalized designs</strong> for a variety of products including shirts, posters, banners, cups & mugs, and more, giving them a unique shopping experience.</p>

Product Options and Addons vs KILB Product Designer