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.

Features

Add custom fields to WooCommerce products
Use Elementor’s interface to design your fields
Support for text inputs, checkboxes, and more
Fields appear in cart and order details
Lightweight and fast

Requirements

WordPress 5.0 or higher
WooCommerce 5.0 or higher
Elementor 3.0 or higher
PHP 7.4 or higher

Development Setup

Prerequisites

Node.js (v14 or higher)
npm or yarn
WordPress development environment
WooCommerce installed and activated
Elementor installed and activated

Installation Steps

Clone the repository:
bash git clone https://github.com/loyalcoder/magic-extra-field-light.git
Navigate to the plugin directory:
bash cd magic-extra-field-light
Install dependencies:
bash npm install
Build the assets:
bash npm run build

Source Code

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:

JavaScript Source: assets/src/js/ – Contains the original, human-readable JavaScript source files
CSS Source: assets/src/css/ – Contains the original, human-readable CSS source files
Build Configuration: webpack.config.js – Webpack configuration for asset compilation

The compiled/minified assets are located in assets/dist/ and are generated from the source files using webpack.

Build Tools

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 assets/src/
2. Run npm run build to compile changes
3. Test your modifications

The source code is also available on GitHub: https://github.com/loyalcoder/magic-extra-field-light