Fixing the Netgsm and Wordfence Security Plugin Conflict

In this article, we will talk about Netgsm and Wordfence Security plugin conflict resolution. This conflict occurs when the Netgsm plugin's phone number verification feature via SMS is added to the Woocommerce registration form and the Wordfence Security plugin is activated at the same time. So what is the reason for this conflict? Let's examine and solve it together.

Wordfence Plugin Hidden Input and Netgsm

Wordfence plugin adds a hidden input with the "wfls-email-verification" ID to the Woocommerce registration and login form for the functionality of the recaptcha feature in the login security section. When we click on the "send verification code" button to receive the SMS after filling out the registration form, we encounter a warning in the browser triggered by the Netgsm plug-in. In this warning, it says that the email address has not been entered, but we have entered the email address. The reason for this is that the Netgsm plugin cannot retrieve data from the email box while there is a hidden input element added by Wordfence Security. That's why it returns a warning that the email address was not entered.

Let's Try Using Wordfence Filter with PHP

Wordfence's hidden input element is added by default, even if we do not enter the recaptcha key in the login security settings. The first thing that comes to our mind to remove this is to disable this feature using Wordfence filters, right? Let's try it.

<?php add_filter( 'wordfence_ls_require_captcha', '__return_false' );

Although this code removes the captcha requirement for login security (ls: login security) in the current version, it does not remove the hidden input. In this case, the ideal solution would be to remove input from the DOM with Javascript. In this article, we will talk about the Javascript solution. Of course, this is not the only solution. We can find the OOP class and method to which the Wordfence plugin adds the relevant input and override it with the codes we write in the child theme or code snippet plugin.

Let's Remove Hidden Input from DOM with Javascript

We can use the following approach to remove hidden input from codes with Javascript. Before explaining the details of the approach, let's go over an important issue. If the DOMContentLoaded event is used in this approach, the codes may return undefined on some sites. The DOMContentLoaded event does not run when the DOM is loaded under all circumstances. To ensure our success, we wrote our codes in the window.onload event. We recommend that you add these codes among the script tags, just before the closing body tag in the DOM.

// Remove Wordfence Security hidden email input due to conflict with Netgsm plugin by Onur Özden Web Çözümleri
 window.addEventListener('load', () => {
    // used window.onload due to DOMContentLoaded not working properly for this codes
  const oowcRemoveWflsHiddenInput = [...document.querySelectorAll("input[name='wfls-email-verification']")];
  oowcRemoveWflsHiddenInput.forEach(hiddenInput => hiddenInput.remove());
});

So what did we do with these codes? When the DOM on the page is loaded, the Wordfence Security plugin adds a variable called oowcRemoveWflsHiddenInput. If the element is not present in the DOM (for example, if this code ran on another page where the form does not exist), we did not check the existence of the target element with the if block because forEach will not work anyway. We removed all target elements found with the forEach loop. To ensure that the codes comply with ES12 standards, the spread method is used. NodeList'iWe converted it directly to an array. In this way NodeListWe directly used forEach, which is an Array method.