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.

Luma Retail Solutions

Luma Product Fields is a lightweight, WooCommerce-native way to add searchable, sortable product specifications that are simple to manage in admin and easy for customers to compare.
Use it to create your own product fields, update values quickly in both the product editor and inline list view, and present product specs in a clear, consistent format.
You can optionally use Product Groups to assign different sets of fields to different types of products, so each product only shows the specs that matter.
It’s fast, intuitive, and built specifically for WooCommerce — ideal for stores that want better product pages without extra complexity.
And if you ever need custom behavior, it is also developer-friendly and extendable.
<h4>Why store owners choose Luma Product Fields</h4>
<ul>
<li>Turn messy product details into clear, buyer-friendly specification tables</li>
<li>Update specs faster with spreadsheet-style inline editing across many products</li>
<li>Show only relevant fields per product type to keep admin screens focused</li>
<li>Make taxonomy-based values clickable so shoppers can discover similar products</li>
<li>Keep your catalog consistent with reusable field definitions and repeatable workflows</li>
</ul>
<h4>What this plugin does</h4>
Luma Product Fields lets you define and display custom product specification fields such as:
<ul>
<li>Dimensions</li>
<li>Material composition</li>
<li>Technical specs</li>
<li>Sewing/knitting details</li>
<li>Difficulty levels</li>
<li>Packaging information</li>
<li>Color codes or systems</li>
<li>Brand metadata</li>
<li>Any custom structured detail your products require</li>
</ul>
These fields are designed for product specification data — the kind of structured details customers compare before buying.
<h4>Standout feature: linkable specification values</h4>
For taxonomy-based fields (like Single Select, Checkboxes, and Autocomplete), you can enable clickable values on the product page.
Example: if a product has “Material: Merino”, customers can click “Merino” and view other products with the same spec value.
This makes your specification table not only informative, but also a smart discovery path for shoppers.
<h4>Legacy-friendly migration tools</h4>
If you are moving from older field setups, Luma Product Fields includes built-in migration tools to bring legacy values into a cleaner structured field system.
Migration controls are available in WooCommerce settings (Tools tab), including unit alias support for smoother matching when older unit labels differ.
<h4>How it works</h4>
You can start simple with one shared field set for all products, then grow into Product Groups when your catalog gets broader.
<ol>
<li>
Add Custom Fields
Define the fields your products need. Core field types include:
</li>
</ol>
<ul>
<li>Text field – simple free text</li>
<li>Number – numeric value (sortable, supports units)</li>
<li>Integer – whole number (sortable, supports units)</li>
<li>Range (Min–Max) – two numeric values (supports units)</li>
<li>Single select – dropdown from predefined terms (taxonomy-backed)</li>
<li>Checkboxes – multiple predefined options (taxonomy-backed)</li>
<li>
Autocomplete – suggest existing terms, allow new (taxonomy-backed)
Each field has:
</li>
<li>
A label
</li>
<li>A unique slug</li>
<li>A field type</li>
<li>Data type (text/number)
<ul>
<li>Variation support (where relevant)</li>
</ul>
</li>
<li>Multi-value support (on relevant field types)</li>
<li>Optional unit label (for example <code>cm</code>, <code>g</code>, <code>mm</code>, <code>kg</code>) shown in admin and frontend
<ul>
<li>Units can be managed in WooCommerce → Settings → Products → Luma Product Fields</li>
</ul>
</li>
<li>Optional frontend description (shown as a tooltip on the product page)</li>
<li>Optional clickable links for taxonomy-based values, taking the customer to a listing of products with the same term</li>
<li>An option to mark the field as backend-only (never shown on the frontend)</li>
</ul>
<ol>
<li>
(Optional) Create Product Groups (field sets by product type)
A Product Group lets you assign a specific set of fields to a specific type of product.
Think of it as “field sets”, not categories.
Examples:
</li>
</ol>
<ul>
<li>Cameras: ISO range, sensor size, video resolution</li>
<li>Lenses: focal length, aperture, mount type</li>
<li>
Yarn: needle size, fiber composition, gauge
Key points:
<ul>
<li>A product can belong to one Product Group at a time.</li>
<li>A field can be assigned to multiple Product Groups.</li>
<li>Product Groups are not product categories; they decide which fields appear in admin for that product.</li>
</ul>
You can use the plugin without Product Groups (for example a single global field schema), but Product Groups make it easier to maintain different spec sets for different product types.
</li>
</ul>
<ol>
<li>
Assign Products (if using Product Groups)
When a product is assigned to a Product Group, it automatically receives the fields defined for that group.
</li>
<li>
Edit Values Easily
</li>
</ol>
<ul>
<li>A dedicated panel in the product edit screen shows all fields for that product, with units and clear admin descriptions.</li>
<li>Fields hidden from frontend are visibly marked in admin editors and list views.</li>
<li>Variation fields are grouped under a dedicated Product fields section title in variation edit panels.</li>
<li>A spreadsheet-style inline editor lets you edit values, sort, and search without opening products one by one.</li>
<li>The Product Fields overview screen supports drag-and-drop ordering with automatic save feedback.</li>
</ul>
<ol>
<li>
Automatic Frontend Display
The plugin outputs a clean, structured specification section (the Additional Information tab) on product pages:
</li>
</ol>
<ul>
<li>No theme editing required</li>
<li>Works with any WooCommerce theme</li>
<li>Variation values override product-level values</li>
<li>Only fields with values are shown
<ul>
<li>Taxonomy-based values can be rendered as clickable links to matching products</li>
</ul>
</li>
<li>Backend-only fields are hidden automatically</li>
<li>Unit labels are rendered next to numeric values</li>
<li>Optional tooltips from the field’s frontend description can be shown</li>
<li>
Graceful fallback if some values are missing
In settings, you can opt to also show values like SKU, Product Tags, weight, dimensions, categories, and WooCommerce-native GTIN in the same table.
The frontend output can be customized using hooks and filters. 
For advanced use cases, developers can fully override or replace the rendering logic via theme or plugin code.
</li>
</ul>
<h4>How do I use this plugin? (quick start)</h4>
Most stores can be up and running in minutes:
<ol>
<li>Go to WooCommerce → Product Fields and add 3–8 fields you know customers care about.</li>
<li>(Optional) If you already have legacy text/meta specs, run migration in WooCommerce → Settings → Products → Luma Product Fields → Tools to convert them into structured fields (including linkable values where applicable).</li>
<li>(Optional) Create Product Groups if different product types need different field sets.</li>
<li>Open a product and fill in values in the Product Fields panel.</li>
<li>Use inline editing to update many products quickly.</li>
<li>Visit a product page and confirm your specs look clear and complete.</li>
</ol>
Quick examples:
<ul>
<li>Camera store: Sensor Size, ISO Range, Video Resolution, Lens Mount</li>
<li>Yarn shop: Fiber Content, Gauge, Needle Size, Weight Category</li>
<li>Furniture shop: Material, Assembly Required, Weight Capacity, Dimensions</li>
</ul>
Start with a small set, then expand once you see what customers actually use.
<ol>
<li>
Settings (Tabbed UI)
Under WooCommerce → Settings → Products → Luma Product Fields, settings are grouped into tabs:
<ul>
<li>General: frontend title, optional built-in rows, and built-in tooltip controls</li>
<li>Style: row separators, layout mode (auto/grid), and label/value weight</li>
<li>Units: editable units and editable migration aliases</li>
<li>Tools: migration tool switch and quick link</li>
</ul>
Built-in package weight and package size tooltip texts are editable in settings.
</li>
</ol>
<h4>Block themes (FSE) – current status</h4>
The plugin works on block themes (for example Twenty Twenty-Four), but the taxonomy term archives for linkable fields are currently rendered via a PHP template for maximum compatibility.
Technical note: Because these archives are rendered via a custom PHP template (not a native block template), the template explicitly enqueues block/global styles and renders the theme header/footer template parts early so block themes keep expected typography and navigation layout.
This means some “pixel-perfect parity” details (for example button styles and some typography that would normally be applied by native Woo/blocks) may differ.
Full “pure blocks / block template” parity for these archives is planned in a future version.
<h4>SEO & structured data</h4>
Luma Product Fields is designed to be SEO-friendly:
<ul>
<li>All values are stored as standard product metadata and rendered as regular HTML, so they are easily crawlable.</li>
</ul>
<h4>Why choose this plugin?</h4>
<ul>
<li>
WooCommerce-native design 
No external field frameworks — just clean, optimized product metadata.
</li>
<li>
Lightweight and fast 
Focused solely on product data, not general-purpose content fields.
</li>
<li>
Variation-aware 
Variation-specific fields are supported out of the box.
</li>
<li>
Automatic frontend output 
No templates or shortcodes needed, with optional overrides.
</li>
<li>
Powerful admin workflow 
Inline editing saves hours of product management time.
</li>
<li>
Shoppable specs with linkable values 
Turn key specification values into clickable paths to related products.
</li>
<li>
Developer-friendly 
Class-based, namespaced, and hookable. Register custom field types, override rendering, hook into formatting, and integrate with third-party logic.
</li>
<li>
Future-proof schema 
Product Groups let you enforce consistent data structures across similar products.
</li>
</ul>
<h4>Features</h4>
<ul>
<li>Custom product specification fields</li>
<li>Optional Product Group–based field schemas</li>
<li>Inline editing with AJAX</li>
<li>Drag-and-drop field ordering in the Product Fields overview screen</li>
<li>Multi-value support (where relevant)</li>
<li>Variation support (some field types only)</li>
<li>Automatic frontend rendering</li>
<li>Optional taxonomy-based fields with linkable values</li>
<li>Frontend tooltips via field descriptions</li>
<li>Backend-only fields for internal metadata</li>
<li>Tabbed settings UI (General, Style, Units, Tools)</li>
<li>Frontend table style/layout controls (plain/divider/striped, auto/grid, bold toggles)</li>
<li>Built-in package weight/size tooltip settings with editable text</li>
<li>Unit labels for numeric fields and compatible types</li>
<li>Settings-based unit editor (add/remove unit slugs and labels)</li>
<li>Legacy migration tool in settings (Tools tab)</li>
<li>Editable unit aliases for migration matching</li>
<li>Field editor improvements (radio type selection, initial values for new taxonomy fields, value persistence on validation errors)</li>
<li>Frontend-hidden fields are visibly marked in admin product/variation fields and list views</li>
<li>Template override support</li>
<li>Fully extendable through actions & filters</li>
</ul>

Luma Product Fields

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

Magic Extra Field Light vs Luma Product Fields