Running Custom Server-Side Code on Checkout Field Blur in WooCommerce

A recent query in the Business Bloomer Club asked for advice on executing custom server-side code when a user enters their email address during checkout in WooCommerce, specifically after the field loses focus (similar to how the cart updates for coupons and shipping).

This setup can be useful for verifying user input dynamically without a full page refresh.

Here’s a guide on how to achieve this functionality using AJAX and JavaScript.

Step 1: JavaScript to Detect Blur Event

The blur event triggers when an input field loses focus, making it an ideal choice for running custom checks right after a user finishes entering information. You can add an event listener to the email field to detect this:

// Select the email input field
var emailField = document.querySelector('#billing_email'); // Adjust selector as needed

// Listen for blur event
emailField.addEventListener('blur', function(event) {
    // Trigger AJAX call when email field loses focus
    runAjaxCheck(event.target.value); // Send email value to backend
});

In this example, the runAjaxCheck function will handle the AJAX call to the server, passing in the user’s email.

Step 2: Set Up AJAX Function in JavaScript

Define the runAjaxCheck function to send the email to the server using AJAX:

function runAjaxCheck(email) {
    jQuery.ajax({
        url: wc_checkout_params.ajax_url, // WooCommerce AJAX URL
        type: 'POST',
        data: {
            action: 'email_check_action', // Custom action name
            email: email
        },
        success: function(response) {
            if (response.success) {
                // Show success message or handle response
                alert(response.data.message);
            } else {
                // Display error message
                alert(response.data.message);
            }
        }
    });
}

This AJAX call sends the email data to the server, where you can process it as needed.

Step 3: Add PHP Function to Handle AJAX

In your functions.php file, add a function to process the AJAX request and return an appropriate response. WooCommerce provides an AJAX URL via wc_ajax that’s helpful for custom actions.

// Hook into AJAX
add_action('wp_ajax_email_check_action', 'custom_email_check_function');
add_action('wp_ajax_nopriv_email_check_action', 'custom_email_check_function');

function custom_email_check_function() {
    // Sanitize and retrieve email
    $email = sanitize_email($_POST['email']);

    // Perform your custom logic here, such as checking email validity or sending data
    if ( /* Your validation logic */ ) {
        wp_send_json_success(['message' => 'Email validated successfully.']);
    } else {
        wp_send_json_error(['message' => 'Invalid email or an error occurred.']);
    }

    wp_die(); // Close the AJAX request
}

Step 4: Display Results in Checkout

In the success callback of your AJAX function, you can control how WooCommerce behaves based on the server’s response. For example, you might display a custom notice or prevent form submission if the email fails validation.

This approach allows for real-time email validation and similar processes directly in the WooCommerce checkout flow. It’s a robust way to enhance checkout experience without adding extra page reloads, keeping the process smooth for users.