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

Tanmoy Biswas

Arik Product Fields

The ultimate WooCommerce extension to add custom product fields, Buy Now buttons, enquiry forms, Coupon codes, and checkout customization.

Wombat Plugins

studiowombat

Advanced Product Fields (Product Addons) for WooCommerce

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

WPXPO

Jakir Hasan

Anik Biswas

Product Addons and Product Options With Custom Fields – WowAddons

Product addons for WooCommerce is the ultimate plugin that lets you add extra product options, product fields, and WooCommerce product fields.

HappyDevs

Md Anabil

Product Materials for WooCommerce – MadeOf

Display product materials and compositions beautifully in WooCommerce. Show what your products are made of!

Luma Retail Solutions

Luma Product Fields

Add WooCommerce product fields and product specifications in minutes, with inline editing, clickable values, and searchable specs.

Loyalcoders

<p>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.</p>
<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>
<p>Clone the repository:<br />
   <code>bash<br />
git clone https://github.com/loyalcoder/magic-extra-field-light.git</code></p>
</li>
<li>
<p>Navigate to the plugin directory:<br />
   <code>bash<br />
cd magic-extra-field-light</code></p>
</li>
<li>
<p>Install dependencies:<br />
   <code>bash<br />
npm install</code></p>
</li>
<li>
<p>Build the assets:<br />
   <code>bash<br />
npm run build</code></p>
</li>
</ol>
<h4>Source Code</h4>
<p>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:</p>
<ul>
<li><strong>JavaScript Source</strong>: <code>assets/src/js/</code> – Contains the original, human-readable JavaScript source files</li>
<li><strong>CSS Source</strong>: <code>assets/src/css/</code> – Contains the original, human-readable CSS source files</li>
<li><strong>Build Configuration</strong>: <code>webpack.config.js</code> – Webpack configuration for asset compilation</li>
</ul>
<p>The compiled/minified assets are located in <code>assets/dist/</code> and are generated from the source files using webpack.</p>
<h4>Build Tools</h4>
<p>This plugin uses the following build tools:<br />
* <strong>Webpack</strong>: For bundling and optimizing JavaScript and CSS assets<br />
* <strong>npm</strong>: For dependency management and build scripts</p>
<p>To modify the plugin’s frontend or admin interface:<br />
1. Edit the source files in <code>assets/src/</code><br />
2. Run <code>npm run build</code> to compile changes<br />
3. Test your modifications</p>
<p>The source code is also available on GitHub: https://github.com/loyalcoder/magic-extra-field-light</p>


Alternatives to Magic Extra Field Light

Top alternatives