Loyalcoders

Magic Extra Field Light is a lightweight WordPress plugin that allows you to add custom fields to your WooCommerce products using Elementor’s interface. It’s perfect for adding text inputs, checkboxes, and other form elements to your product pages.
<h4>Features</h4>
<ul>
<li>Add custom fields to WooCommerce products</li>
<li>Use Elementor’s interface to design your fields</li>
<li>Support for text inputs, checkboxes, and more</li>
<li>Fields appear in cart and order details</li>
<li>Lightweight and fast</li>
</ul>
<h4>Requirements</h4>
<ul>
<li>WordPress 5.0 or higher</li>
<li>WooCommerce 5.0 or higher</li>
<li>Elementor 3.0 or higher</li>
<li>PHP 7.4 or higher</li>
</ul>
<h3>Development Setup</h3>
<h4>Prerequisites</h4>
<ul>
<li>Node.js (v14 or higher)</li>
<li>npm or yarn</li>
<li>WordPress development environment</li>
<li>WooCommerce installed and activated</li>
<li>Elementor installed and activated</li>
</ul>
<h4>Installation Steps</h4>
<ol>
<li>
Clone the repository: 
 <code>bash 
git clone https://github.com/loyalcoder/magic-extra-field-light.git</code>
</li>
<li>
Navigate to the plugin directory: 
 <code>bash 
cd magic-extra-field-light</code>
</li>
<li>
Install dependencies: 
 <code>bash 
npm install</code>
</li>
<li>
Build the assets: 
 <code>bash 
npm run build</code>
</li>
</ol>
<h4>Source Code</h4>
This plugin uses build tools to generate optimized production assets. The source code for all JavaScript and CSS files is available in the following locations:
<ul>
<li>JavaScript Source: <code>assets/src/js/</code> – Contains the original, human-readable JavaScript source files</li>
<li>CSS Source: <code>assets/src/css/</code> – Contains the original, human-readable CSS source files</li>
<li>Build Configuration: <code>webpack.config.js</code> – Webpack configuration for asset compilation</li>
</ul>
The compiled/minified assets are located in <code>assets/dist/</code> and are generated from the source files using webpack.
<h4>Build Tools</h4>
This plugin uses the following build tools: 
* Webpack: For bundling and optimizing JavaScript and CSS assets 
* npm: For dependency management and build scripts
To modify the plugin’s frontend or admin interface: 
1. Edit the source files in <code>assets/src/</code> 
2. Run <code>npm run build</code> to compile changes 
3. Test your modifications
The source code is also available on GitHub: https://github.com/loyalcoder/magic-extra-field-light

Magic Extra Field Light

Add custom fields to WooCommerce products using Elementor's interface.

Wombat Plugins

studiowombat

Advaced Product Fields (Product Addons) for WooCommerce allows you to add extra product options (form input fields) to your WooCommerce product pages. Whether you want to create a pizza configurator or add extra options, this plugin has got you covered!
Allow customers to personalize their product with a handful of extra choices, input fields, etc… These product addons can increase the final product price too. The extra form data submitted by the customer will be shown on the cart and checkout pages and will be saved on the backend order.
The backend looks & works similar to ACF, so you are familiar with setting up the extra product options without a hassle.
This plugin is the best modern free WooCommerce Product Addons alternative currently available.
<a href="https://product-demo.studiowombat.com/?utm_source=wporg&utm_medium=referral&utm_campaign=readme" rel="nofollow ugc">» Demos</a> | <a href="https://studiowombat.com/plugin/advanced-product-fields-for-woocommerce/?utm_source=wporg&utm_medium=referral&utm_campaign=readme" rel="nofollow ugc">» More info</a>
<h3>👉️ Features</h3>
<ul>
<li>Intuitive and beautiful backend builder which looks like Advanced Custom Fields</li>
<li>10 different form elements to choose from:
<ul>
<li>Text field – A normal text input field to collect single-line text</li>
<li>Text area – To collect multi-line text</li>
<li>Email – An input field to accept only email addresses</li>
<li>URL – A text field to accept only links (URLs)</li>
<li>Number – A number field to accept both decimal or whole numbers</li>
<li>Select (drop-down) – A dropdown field to select one option from a list of options</li>
<li>Checkboxes – To choose one or more options</li>
<li>Radio buttons – To select one option from multiple options</li>
<li>True/false – A single “yes or no” checkbox, which you usually know from “accept the terms of conditions” fields</li>
<li>Paragraph – If you want to add static blocks of text in between input fields, this does the trick!</li>
</ul>
</li>
<li>Conditional logic (show/hide fields based on other input fields)</li>
<li>Increase final product price: add a flat fee to your products depending on the field value(s)</li>
<li>Works with your WooCommerce tax settings</li>
<li>Optimized for speed and faster than other plugins in this genre</li>
<li>Visibility options: decide on which product(s) to show your fields</li>
<li>Works with both simple & variable products and also supports variable products over ajax</li>
<li>Frontend already translated in English, French, German, Spannish, and Dutch</li>
<li>Translation-ready for other languages</li>
</ul>
👉 How can our plugin be useful and what should you use it for?
WooCommerce only has limited features to display extra product options (often also called product addons) on your product pages. You can use their “variable products” which can add a few select (dropdown) lists to a product.
But what if you’re selling customizable t-shirts where customers can print their name on a t-shirt? Or what if you’d like your customers to build their own pizza where they can freely choose extra toppings? 
These product types can’t be built with WooCommerce out-of-the-box. That’s where our plugin comes in. It allows you to build more complex WooCommerce products that can easily be personalized by your customer.
When should you use WooCommerce built-in variations versus our plugin? We wrote <a href="https://www.studiowombat.com/blog/when-to-use-a-plugin-for-product-options-in-woocommerce-versus-variations/?utm_source=wporg&utm_medium=referral&utm_campaign=readme" rel="nofollow ugc">a handy blog post</a> to answer that question.
<h3>👉️ What makes our plugin different from the competition?</h3>
During your research, you may have seen other plugins that do (more or less) the same. Here is how we are different:
✅️ Our plugin is younger than the competition. It does not have to support older WooCommerce or WordPress versions, so you benefit from modern code. 
✅️ Quality above quantity. We carefully choose what & how we implement features so the plugin remains lightweight and fast. 
✅️ The plugin’s frontend scripts are tiny (~7kb) and doesn’t impact your SEO score. 
✅️ Easy-to-use modern backend (based on ACF) which follows WordPress & WooCommerce standards. 
✅️ Regular updates to stay on top of new WordPress & WooCommerce versions. 
✅️ Our plugin runs fewer database queries because we’ve spent time optimizing how data is stored. 
✅️ No nags! We do not like to plaster your WP admin with unnecessary ads or asking for a review. We do hope you leave a review to help us grow.
We understand these statements are meaningless without additional proof to back them up, so here are a few links to help make up your mind:
<ul>
<li>Check out the WordPress <a href="https://wordpress.org/support/plugin/advanced-product-fields-for-woocommerce/reviews/" rel="ugc">reviews here</a>.</li>
<li><a href="https://www.studiowombat.com/blog/best-woocommerce-product-addons-plugin/?utm_source=wporg&utm_medium=referral&utm_campaign=readme" rel="nofollow ugc">Plugin comparison</a> with screenshots and proof.</li>
<li><a href="https://wphive.com/plugins/advanced-product-fields-for-woocommerce/" rel="nofollow ugc">Unofficial plugin test & rating</a>.</li>
</ul>
Having doubts? Just contact us with your questions!
<h3>👉️ Why Studio Wombat?</h3>
<ul>
<li>✅ A small but friendly team of WooCommerce professionals.</li>
<li>✅ We do this full-time, we are not hobby-developers.</li>
<li>✅ Over 50,000 happy customers.</li>
<li>✅ We understand your success is our success, so we do our absolute best to help you out.</li>
<li>✅ Dedicated support team.</li>
<li>✅ Ahead of time, we test our plugins the latest WordPress and WooCommerce versions.</li>
<li>✅ We choose quality over quantity: not every feature makes it in the plugins, but those that do are quality coded.</li>
<li>✅ We care about your site speed.</li>
</ul>
<h3>👉️ Requirements</h3>
<ul>
<li>WooCommerce 3.6.0 or higher</li>
<li>WordPress 4.7 or higher</li>
<li>PHP 7.0 or higher</li>
</ul>
<h3>👉️ Limitations of the free version</h3>
Our free version is great for small stores or stores that don’t need to add many complex options (product addons) to their products. 
There are a few limitations of the free version that you should be aware of:
<ul>
<li>The free version doesn’t integrate with 3rd party plugins such as WooCommerce Subscriptions or a multi-currency plugin (unless they write an integration).</li>
<li>It doesn’t work with themes using Ajax technology for their product “add to cart” button.</li>
<li>The free version allows only allows you to add an extra flat fee ( = not quantity based) to your product price.</li>
<li>You can’t add fields to separate variations.</li>
</ul>
If you need those features, you may consider our premium version. You can read ahead what’s included with premium.
<h3>👉️ Premium Features</h3>
Everything from the free version, plus:
<ul>
<li>Works on these product types: Simple, Variable (including separate variations), and Subscriptions.</li>
<li>More field types:
<ul>
<li>File upload – allowing your customers to upload one or multiple files</li>
<li>Image swatches – multi and single choice options with images (and image zoom)</li>
<li>Color swatches – multi and single color options</li>
<li>Text swatches – text options</li>
<li>Date – adds a calendar picker</li>
<li>Calculation – adds an informative calculation (like “square meters”) or a separate extra cost calculation.</li>
<li>Image with quantities – image swatches with quantity inputs underneath.</li>
<li>Child products – select other products from your store as options (and enjoy stock control).</li>
<li>Cards – clickable cards with nicely layout information.</li>
</ul>
</li>
<li>Content fields to add content to your product pages (no form inputs):
<ul>
<li>Image – to add extra images</li>
<li>Text/HTML – to add extra text, HTML, or even shortcodes</li>
<li>Section – to group fields in a section</li>
</ul>
</li>
<li>Support for modern themes using “ajax add to cart” technology</li>
<li>The product image on the frontend can be changed when different options are selected</li>
<li>Set a minimum/maximum allowed number of selections on multi-select fields</li>
<li>More pricing options: formula-based pricing, quantity-based pricing, percentage-based pricing, value-based pricing, and character length pricing</li>
<li>You can also give discounts (negative pricing) on options</li>
<li>Repeatable fields: repeat fields if your visitors press an ‘add new’ button</li>
<li>Quantity-based fields: fields can repeat based on the quantity the customer selects</li>
<li>Works with page/product builders like Elementor, Oxygen, Beaver Builder, and Divi</li>
<li>Variable builder for more complex pricing possibilities</li>
<li>More options to attach one field group to multiple products at once (via product name, variation, category, tag, …)</li>
<li>Support for multilingual stores through WPML or Polylang</li>
<li>Works with your WooCommerce tax settings</li>
<li>Support for multi-currency stores via the WOOCS plugin</li>
<li>More integrations with other plugins (such as WooCommerce Subscriptions) & popular themes. <a href="https://www.studiowombat.com/knowledge-base/which-plugins-and-themes-are-compatible-with-advanced-product-fields-for-woocommerce/?utm_source=wporg&utm_medium=referral&utm_campaign=readme" rel="nofollow ugc">See here</a></li>
<li>More options for text fields: min. and max. length, or HTML validation (regex pattern)</li>
<li>Actions & filters so you can extend the plugin with additional features</li>
<li>HTML output allowing you to more easily style certain aspects with CSS</li>
<li>Great tutorials to display a multi-step form, make a donation product, build a pizza configurator, etc …</li>
<li>Add-on plugins to make it even more powerful. You can create product configurators with live preview, powerup file uploads, add an image editor, integrate with ACF, …</li>
<li>And more..!</li>
</ul>
<a href="https://product-demo.studiowombat.com/?utm_source=wporg&utm_medium=referral&utm_campaign=readme" rel="nofollow ugc">Premium Demos</a> | <a href="http://wapf-admin.studiowombat.com/wp-admin/?utm_source=wporg&utm_medium=referral&utm_campaign=readme" rel="nofollow ugc">Premium WP admin demo</a> | <a href="https://studiowombat.com/plugin/advanced-product-fields-for-woocommerce/?utm_source=wporg&utm_medium=referral&utm_campaign=readme" rel="nofollow ugc">More info</a>

Advanced Product Fields (Product Addons) for WooCommerce

Fantastic plugin


Awesome!I was needed to add a text input to receive information from customers with the order.This plugin saved hours of work.


Awesome!

Add options (addons) to your WooCommerce products so your customers can personalize their products. Product forms for everyone!

Magic Extra Field Light vs Advanced Product Fields (Product Addons) for WooCommerce