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>


Magic Extra Field Light

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

Tanmoy Biswas

<p><strong>Arik Product Fields</strong> is a complete toolkit for WooCommerce product pages. Build custom product fields with a drag-and-drop visual builder, add a Buy Now button that skips the cart, accept enquiries through a polished modal form, show coupon codes directly on the product page, and clean up the single product layout all without writing a single line of code.</p>
<p>Designed for store owners who want more conversions, better data collection, and a faster checkout experience.</p>
<h4>Why store owners pick Arik Product Fields</h4>
<ul>
<li><strong>One plugin, five jobs.</strong> Custom fields, Buy Now, Enquiry form, coupon box, and checkout tweaks no need to stack five separate plugins.</li>
<li><strong>Beautiful frontend.</strong> Theme-aware styling that inherits your color tokens and looks native in Storefront, Astra, Flatsome, OceanWP, and Blocksy.</li>
<li><strong>HPOS compatible.</strong> Declared compatibility with WooCommerce Custom Order Tables and the new cart/checkout blocks.</li>
<li><strong>Built for developers.</strong> 11+ public actions and filters, a Support & Docs page with copy-paste examples, and translation-ready strings.</li>
<li><strong>No bloat.</strong> Assets load only on the screens that need them. Admin styles never leak into unrelated pages.</li>
</ul>
<h4>20 field types</h4>
<p><strong>Input fields</strong> (collect data from customers):</p>
<ul>
<li>Text</li>
<li>Textarea</li>
<li>Number</li>
<li>E-mail</li>
<li>URL</li>
<li>Checkbox (multi-option)</li>
<li>Select / Dropdown</li>
<li>Radio</li>
<li>Radio with images (WP Media Library picker)</li>
<li>Radio with colors (WordPress color picker)</li>
<li>Time</li>
<li>Color</li>
<li>Date</li>
</ul>
<p><strong>Display / Content fields</strong> (admin enters content, frontend shows it):</p>
<ul>
<li>Heading</li>
<li>Paragraph</li>
<li>HTML</li>
<li>Image (Media Library picker + URL fallback)</li>
<li>Product Video (YouTube, Vimeo, or direct MP4/WebM/OGG)</li>
</ul>
<p><strong>Dynamic fields</strong> (populated from the current product):</p>
<ul>
<li>Categories rendered as checkboxes built from the product’s own categories</li>
<li>Tags rendered as checkboxes built from the product’s own tags</li>
</ul>
<h4>Feature highlights</h4>
<ul>
<li><strong>Drag-and-drop field builder</strong> powered by jQuery UI Sortable. Click any field type in the palette to add it. Drag rows by the handle to reorder. Inline editor with per-type controls.</li>
<li><strong>Per-product field assignment</strong> through a dedicated Product Data tab. Pick which fields appear on which products. Leave it empty to use global-scope fields.</li>
<li><strong>Buy Now button</strong> that skips the cart and lands the customer on checkout (or cart your choice).</li>
<li><strong>Enquiry form</strong> in an accessible modal. Sends email to admin, stores submissions as a custom post type, and recommends Contact Form 7 as a more robust alternative.</li>
<li><strong>Coupon code box</strong> on the single product page with four position options.</li>
<li><strong>Checkout modifications</strong> add an optional Order Reference field, make phone optional, soften default placeholders.</li>
<li><strong>Hide SKU and Categories/Tags</strong> on single product pages globally or per-product.</li>
<li><strong>Tri-state per-product overrides</strong> for Buy Now and Enquiry: “Use global setting”, “Show”, or “Hide”.</li>
<li><strong>Configurable field position</strong> render fields before/after price, before/after Add to Cart, or before/after Buy Now.</li>
<li><strong>Support & Docs admin page</strong> with the full developer hook reference and code examples.</li>
<li><strong>Translation-ready</strong> with <code>wp_set_script_translations()</code> for the builder UI.</li>
</ul>
<h4>Security</h4>
<ul>
<li>WordPress nonces on every form and AJAX endpoint.</li>
<li>Capability checks on every admin action (<code>manage_woocommerce</code>, <code>edit_product</code>).</li>
<li>Honeypot field plus per-IP rate limiting on the enquiry form.</li>
<li>Type-aware sanitization with a strict allowlist per field type.</li>
<li>Output escaped per WordPress.org guidelines (<code>esc_html</code>, <code>esc_attr</code>, <code>esc_url</code>, <code>wp_kses_post</code>).</li>
</ul>
<h4>Developer-friendly</h4>
<p>The plugin exposes 11+ public hooks for theme and plugin developers:</p>
<ul>
<li>Filters: <code>arikapf_render_field_definitions</code>, <code>arikapf_cart_item_field_values</code>, <code>arikapf_buy_now_button_label</code>, <code>arikapf_enquiry_button_label</code>, <code>arikapf_buy_now_enabled_for_product</code>, <code>arikapf_enquiry_enabled_for_product</code>, <code>arikapf_hide_sku</code>, <code>arikapf_hide_categories</code>, <code>arikapf_fields_render_hook</code>, <code>arikapf_support_marketing_links</code>, <code>arikapf_checkout_fields</code>.</li>
<li>Actions: <code>arikapf_before_render_fields</code>, <code>arikapf_after_render_fields</code>, <code>arikapf_before_buy_now_button</code>, <code>arikapf_after_buy_now_button</code>, <code>arikapf_before_enquiry_button</code>, <code>arikapf_after_enquiry_button</code>, <code>arikapf_enquiry_submitted</code>, <code>arikapf_after_save_product_meta</code>, <code>arikapf_after_cart_item_meta_added</code>.</li>
</ul>
<p>Each hook is documented inside the plugin under <strong>Arik Fields <span aria-hidden="true" class="wp-exclude-emoji">→</span> Support & Docs</strong>, with copy-paste code examples.</p>
<h4>Compatible with</h4>
<ul>
<li>WordPress 6.0+</li>
<li>WooCommerce 6.0+ (tested through 9.4)</li>
<li>PHP 7.4+</li>
<li>HPOS (Custom Order Tables)</li>
<li>WooCommerce Cart & Checkout Blocks</li>
<li>Contact Form 7 (for the enquiry form)</li>
<li>Storefront, Astra, Flatsome, OceanWP, Blocksy, and any properly built block theme</li>
</ul>
<h3>Additional Information</h3>
<h4>Support & Connect</h4>
<ul>
<li><strong>Email Support:</strong> helpwcblog@gmail.com</li>
<li><strong>Website:</strong> <strong><a href="https://gernx.com/" rel="nofollow ugc">https://gernx.com/</a></strong> </li>
<li><strong>Support Forum:</strong> <a href="https://wordpress.org/support/plugin/arik-product-fields/" rel="ugc">WordPress.org Support</a></li>
<li><strong>LinkedIn:</strong> <a href="https://www.linkedin.com/in/is-tanmoy/" rel="nofollow ugc">Tanmoy Biswas</a></li>
</ul>


Arik Product Fields — WooCommerce Custom Fields, Buy Now, Enquiry Form & Coupon

Custom product fields with a drag-and-drop builder, Buy Now button, Enquiry Form, Coupon Box, and 20 field types for WooCommerce.

Magic Extra Field Light vs Arik Product Fields — WooCommerce Custom Fields, Buy Now, Enquiry Form & Coupon