JavaScript error in admin_footer: Identifier ‘fields’ already declared

Hi QuadLayers team,

I ran into a JavaScript issue with Checkout Field Manager / WooCommerce Checkout Manager.

Here’s what’s happening:

In the plugin file lib/class-plugin.php, there’s a function called Plugin::add_premium_style(). The code looks like this:

<script>
    const fields = document.querySelectorAll('.wooccm-premium-field')
    Array.from(fields).forEach((field) => {
        field.closest('tr')?.classList.add('wooccm-premium-field');
    })
</script>

The problem is, this script gets printed in the admin_footer. On some WooCommerce admin pages—especially the products screen or the import page—it throws a browser console error:

Uncaught SyntaxError: Identifier 'fields' has already been declared

In my setup, this actually stopped the WooCommerce product import progress bar from working.

Here’s my suggested fix: wrap that JS code in an IIFE and use a less generic variable name at the top level. For example:

<script>
(function () {
    var wooccmPremiumFields = document.querySelectorAll('.wooccm-premium-field');

    Array.prototype.forEach.call(wooccmPremiumFields, function (field) {
        var row = field.closest('tr');
        if (row) {
            row.classList.add('wooccm-premium-field');
        }
    });
})();
</script>

This does the same thing as before, but keeps those variables out of the global scope. That way, you avoid conflicts with other admin scripts.

I tried this change locally, and it fixed the JavaScript error. The WooCommerce import progress bar worked again.

Thanks!