WooCommerce registration CAPTCHA

August 7, 2025 · AI Conversations

User
 *
Assistant
To add the "Are you a human? Please, solve 9×12" verification field to your WooCommerce registration form (as seen in the image), you'll need to:

1. Add a new field to the registration form.
2. Validate it on submission.
3. Display an error if the answer is incorrect.

Here’s your **full updated WooCommerce registration form code** with the CAPTCHA logic added:

### ✅ Step 1: Update the Form with Math CAPTCHA
Replace your form code with this version:

<form method="post" class="woocommerce-form woocommerce-form-register register" <?php do_action( 'woocommerce_register_form_tag' ); ?> >

    <?php do_action( 'woocommerce_register_form_start' ); ?>

    <?php if ( 'no' === get_option( 'woocommerce_registration_generate_username' ) ) : ?>
        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
            <label for="reg_username"><?php esc_html_e( 'Username', 'woocommerce' ); ?> <span class="required">*</span></label>
            <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="reg_username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" required />
        </p>
    <?php endif; ?>

    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="reg_email"><?php esc_html_e( 'Username or Email', 'woocommerce' ); ?> <span class="required">*</span></label>
        <input type="email" class="woocommerce-Input woocommerce-Input--text input-text" name="email" id="reg_email" autocomplete="email" placeholder="mail@email.com" value="<?php echo ( ! empty( $_POST['email'] ) ) ? esc_attr( wp_unslash( $_POST['email'] ) ) : ''; ?>" required />
    </p>

    <?php if ( 'no' === get_option( 'woocommerce_registration_generate_password' ) ) : ?>
        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
            <label for="reg_password"><?php esc_html_e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>
            <input type="password" class="woocommerce-Input woocommerce-Input--text input-text" name="password" id="reg_password" autocomplete="new-password" required />
        </p>
    <?php else : ?>
        <p><?php esc_html_e( 'A link to set a new password will be sent to your email address.', 'woocommerce' ); ?></p>
    <?php endif; ?>

    <!-- 🧮 Math CAPTCHA Field -->
    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="human_check"><?php esc_html_e( 'Are you a human? Please, solve 9x12.', 'woocommerce' ); ?> <span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="human_check" id="human_check" placeholder="Answer here" required />
    </p>

    <?php do_action( 'woocommerce_register_form' ); ?>

    <p class="woocommerce-form-row form-row">
        <?php wp_nonce_field( 'woocommerce-register', 'woocommerce-register-nonce' ); ?>
        <button type="submit" class="woocommerce-Button button woocommerce-form-register__submit" name="register" value="<?php esc_attr_e( 'Register', 'woocommerce' ); ?>"><?php esc_html_e( 'Register', 'woocommerce' ); ?></button>
    </p>

    <?php do_action( 'woocommerce_register_form_end' ); ?>

</form>

—

### ✅ Step 2: Add Server-side Validation in `functions.php`

Add this to your theme's `functions.php`:

add_action( 'woocommerce_register_post', 'validate_human_math_captcha', 10, 3 );
function validate_human_math_captcha( $username, $email, $validation_errors ) {
    if ( isset($_POST['human_check']) ) {
        $answer = intval($_POST['human_check']);
        if ( $answer !== 108 ) {
            $validation_errors->add( 'human_check_error', __( 'Incorrect answer to anti-spam question. Please try again.', 'woocommerce' ) );
        }
    } else {
        $validation_errors->add( 'human_check_empty', __( 'Please answer the anti-spam question.', 'woocommerce' ) );
    }
}

—

With this setup:

– The field "Are you a human? Please, solve 9×12" will appear on the WooCommerce registration form.
– It will only let users register if they answer **108** correctly.
– Otherwise, it shows a validation error.

Let me know if you want the question randomized (e.g. 6×4, 8+3) on each load.

User
Also give me styling to make the inputs same as given and placeholder also !
Assistant
To match the design in your provided image — with **rounded input borders, light background, and styled placeholders**, use the following CSS.

### ✅ Add this to your theme’s CSS (e.g., in **Customizer > Additional CSS** or your child theme's `style.css`):

/* 🔵 Form Input Styles */
.woocommerce-form .woocommerce-Input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #40a0a0;
    background-color: #eafafa;
    border-radius: 50px;
    font-size: 16px;
    color: #333;
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
}

/* 🔵 Placeholder Text Style */
.woocommerce-form .woocommerce-Input::placeholder {
    color: #40a0a0;
    font-weight: 400;
    opacity: 1; /* For Firefox */
}

/* 🔵 On Focus */
.woocommerce-form .woocommerce-Input:focus {
    border-color: #268c8c;
    background-color: #e0f7f7;
}

/* 🔵 Label Style */
.woocommerce-form label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: #1d1d1d;
}

/* 🔵 Instructional Text (below inputs) */
.woocommerce-form p {
    margin-bottom: 16px;
    color: #333;
    font-size: 15px;
}

/* 🔵 Submit Button */
.woocommerce-form .woocommerce-button {
    background-color: #40a0a0;
    border: none;
    color: #fff;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.woocommerce-form .woocommerce-button:hover {
    background-color: #2d7e7e;
}

—

### ✅ Optional Matching Font (if needed)

To match the smooth, rounded aesthetic from the image, consider using a font like `'Poppins'` or `'Nunito'`:

body {
    font-family: 'Poppins', sans-serif;
}

Add Google Font in “ if not already included:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

—

### Final Output Result:
– Rounded pill-like input fields
– Light turquoise background
– Aqua-colored placeholder text
– Smooth hover/focus transitions
– Consistent with the UI in your screenshot

Let me know if you also want to style the success/error messages or align everything to center.

User
add important !
Assistant
Here is your updated CSS with `!important` added to enforce the styles — ensuring they override theme or plugin defaults.

### ✅ Add to **Customizer > Additional CSS** or your `style.css` file:

/* 🔵 Form Input Styles */
.woocommerce-form .woocommerce-Input {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 1px solid #40a0a0 !important;
    background-color: #eafafa !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    color: #333 !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    outline: none !important;
}

/* 🔵 Placeholder Text Style */
.woocommerce-form .woocommerce-Input::placeholder {
    color: #40a0a0 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* 🔵 On Focus */
.woocommerce-form .woocommerce-Input:focus {
    border-color: #268c8c !important;
    background-color: #e0f7f7 !important;
}

/* 🔵 Label Style */
.woocommerce-form label {
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
    color: #1d1d1d !important;
}

/* 🔵 Instructional Text (below inputs) */
.woocommerce-form p {
    margin-bottom: 16px !important;
    color: #333 !important;
    font-size: 15px !important;
}

/* 🔵 Submit Button */
.woocommerce-form .woocommerce-button {
    background-color: #40a0a0 !important;
    border: none !important;
    color: #fff !important;
    padding: 14px 32px !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.woocommerce-form .woocommerce-button:hover {
    background-color: #2d7e7e !important;
}

/* 🔵 Optional: Add font-family to match design */
body {
    font-family: 'Poppins', sans-serif !important;
}

—

This styling ensures that:
– Inputs and buttons visually match your design (from the image).
– Placeholder colors and layout are enforced.
– All inputs are rounded with a soft blue aesthetic.

Let me know if you also want to align the form center or apply spacing/padding between fields.

User
9×12
this value need to be change on every page load !

so give me something like that

Assistant
Great! To dynamically change the math question on each page load (e.g., `7 x 6`, `5 + 4`, `8 – 3`), we need to:

1. **Generate random math on page load**
2. **Store the correct answer in a session or hidden field**
3. **Validate the answer on form submission**

—

### ✅ Step 1: Generate Dynamic Question in Form (`functions.php`)

Add this to your theme’s `functions.php` to **start session and generate question**:

add_action('init', function() {
    if (!session_id()) {
        session_start();
    }

    // Only generate question if on register page
    if (isset($_GET['action']) && $_GET['action'] === 'register') {
        $operators = ['+', '-', '*'];
        $num1 = rand(1, 10);
        $num2 = rand(1, 10);
        $operator = $operators[array_rand($operators)];

        $_SESSION['human_math_question'] = "{$num1} {$operator} {$num2}";

        // Evaluate the expression securely
        switch ($operator) {
            case '+': $_SESSION['human_math_answer'] = $num1 + $num2; break;
            case '-': $_SESSION['human_math_answer'] = $num1 - $num2; break;
            case '*': $_SESSION['human_math_answer'] = $num1 * $num2; break;
        }
    }
});

—

### ✅ Step 2: Update WooCommerce Registration Form Template

In your form HTML (where the CAPTCHA is shown), replace the hardcoded `9×12` with the session-generated value:

<!-- 🧮 Dynamic Math CAPTCHA Field -->
<?php $question = isset($_SESSION['human_math_question']) ? $_SESSION['human_math_question'] : '5 + 3'; ?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="human_check"><?php echo esc_html__( "Are you a human? Please, solve {$question}.", 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="human_check" id="human_check" placeholder="Answer here" required />
</p>

—

### ✅ Step 3: Validate Answer on Form Submission

Also in `functions.php`, replace the previous validation with this:

add_action('woocommerce_register_post', 'validate_dynamic_math_captcha', 10, 3);
function validate_dynamic_math_captcha($username, $email, $validation_errors) {
    if (!session_id()) session_start();

    if (isset($_POST['human_check']) && isset($_SESSION['human_math_answer'])) {
        $user_answer = intval($_POST['human_check']);
        $correct_answer = intval($_SESSION['human_math_answer']);

        if ($user_answer !== $correct_answer) {
            $validation_errors->add('human_check_error', __('Incorrect answer to anti-spam question. Please try again.', 'woocommerce'));
        }
    } else {
        $validation_errors->add('human_check_empty', __('Please answer the anti-spam question.', 'woocommerce'));
    }
}

—

### 🧠 Summary

– Each time the page loads, a **new random math question** is generated.
– The question is stored in PHP session.
– User input is validated against that session value when the form is submitted.

Let me know if you'd like to:
– Use cookies instead of session?
– Add frontend JS validation?
– Style it nicely with custom CSS?

I'm here to help you make it perfect!

User
it will always be mi=ultiplication!
make it randomize on every page load , even without validation , solving or not !

but chnage evrytime !

Assistant
Got it! You want to **always show a multiplication question** like `4 x 8`, `7 x 3`, etc., and have it **randomize on every page load**, even if the user doesn't submit the form.

You **don’t care about solving or validating** it — just display a new random multiplication question each time the registration page is loaded.

—

### ✅ Simple Solution: Output Random Multiplication in the Template

No need for session or validation. Just use pure PHP like this in your form:

<!-- 🧮 Multiplication CAPTCHA Field -->
<?php
$rand1 = rand(2, 12);
$rand2 = rand(2, 12);
$question = "{$rand1} x {$rand2}";
?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="human_check"><?php echo esc_html__( "Are you a human? Please, solve {$question}.", 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="human_check" id="human_check" placeholder="Answer here" required />
</p>

—

### 🔁 Result:

– The question like **"Are you a human? Please, solve 8 x 6."** will change **every time the page loads**.
– No validation is applied (you said it's not needed).

You can now paste this directly into your WooCommerce form wherever you want the question to show.

Let me know if you want to **add validation later** or style it better visually.

User
tel me what to do , all thing from start!
Assistant
Here’s a **step-by-step guide** to show a **random multiplication question** like `4 x 9`, `6 x 7` on the WooCommerce registration form **every time the page is loaded**, without needing to validate the answer.

—

### ✅ GOAL

> ✅ Show: **“Are you a human? Please, solve 7 x 8.”**
> 🔁 Change the numbers **every page load**
> ❌ No validation required
> ✅ Works in WooCommerce registration form

—

## ✅ STEP 1: Edit WooCommerce Registration Form

If you are using a **custom WooCommerce registration template**, or inserting the form via shortcode or your theme file, update it as follows:

### Replace or Add This Inside the “:

<?php
// STEP 1: Generate random numbers
$rand1 = rand(2, 12);
$rand2 = rand(2, 12);
$question = "{$rand1} x {$rand2}";
?>

<!-- Step 2: Display math question -->
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="human_check">
        <?php echo esc_html__( "Are you a human? Please, solve {$question}.", 'woocommerce' ); ?> 
        <span class="required">*</span>
    </label>
    <input type="text" class="woocommerce-Input woocommerce-Input--text input-text"
           name="human_check" id="human_check" placeholder="Answer here" required />
</p>

—

## ✅ STEP 2: Find Where to Paste This Code

You can paste the code **just above the Register button** inside the registration form.

For example:

Locate this line in your WooCommerce form file:

<?php do_action( 'woocommerce_register_form' ); ?>

And paste the math block **right after that**, like so:

<?php do_action( 'woocommerce_register_form' ); ?>

<?php
$rand1 = rand(2, 12);
$rand2 = rand(2, 12);
$question = "{$rand1} x {$rand2}";
?>

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="human_check">
        <?php echo esc_html__( "Are you a human? Please, solve {$question}.", 'woocommerce' ); ?> 
        <span class="required">*</span>
    </label>
    <input type="text" class="woocommerce-Input woocommerce-Input--text input-text"
           name="human_check" id="human_check" placeholder="Answer here" required />
</p>

—

## ✅ STEP 3: You're Done!

Now, every time a user visits the register page:
– A new random **multiplication** question (e.g. `5 x 9`) appears.
– There is **no validation**, just display for fun or simple bot deterrence.

—

### ✅ Optional: Styling Suggestion (CSS)

To improve appearance, add this to your CSS:

#human_check {
    background-color: #e9f9f9;
    border-radius: 25px;
    padding: 10px 15px;
    border: 1px solid #7fcfd8;
    width: 100%;
}

—

Let me know if you want to:
– Make the question hidden from bots
– Add real validation
– Style it even better

I’ll help you right away.

User
 
*

i want first this to be solved there and then we can proceed to register@!

Assistant
Perfect! Now you're asking for:

> ✅ Display a **random multiplication** question (e.g., `6 x 9`)
> ✅ Require the **correct answer** before allowing registration
> ✅ Refresh question on each page load
> ✅ Block registration if the answer is wrong

Let's **do everything from scratch**.

—

## ✅ Step-by-Step Guide: Secure Multiplication CAPTCHA in WooCommerce Registration

—

### ✅ STEP 1: Add CAPTCHA Field with Random Multiplication

In your registration form template (likely from a custom theme or override of `myaccount/form-register.php`), add this code where you want the math question to show (usually before the submit button):

<?php
session_start(); // Required to store the answer
$rand1 = rand(2, 12);
$rand2 = rand(2, 12);
$_SESSION['human_math_answer'] = $rand1 * $rand2;
$question = "{$rand1} x {$rand2}";
?>

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="human_check">
        <?php echo esc_html__( "Are you a human? Please, solve {$question}.", 'woocommerce' ); ?> 
        <span class="required">*</span>
    </label>
    <input type="text" class="woocommerce-Input woocommerce-Input--text input-text"
           name="human_check" id="human_check" placeholder="Answer here" required />
</p>

—

### ✅ STEP 2: Validate the CAPTCHA on Form Submit

Add this to your **theme’s `functions.php` file** to hook into the registration validation:

add_action('woocommerce_register_post', 'validate_human_math_answer', 10, 3);
function validate_human_math_answer($username, $email, $validation_errors) {
    if (!session_id()) session_start();

    if (isset($_POST['human_check']) && isset($_SESSION['human_math_answer'])) {
        $user_answer = intval($_POST['human_check']);
        $correct_answer = intval($_SESSION['human_math_answer']);

        if ($user_answer !== $correct_answer) {
            $validation_errors->add('human_check_error', __('Incorrect answer to anti-spam question. Please try again.', 'woocommerce'));
        }
    } else {
        $validation_errors->add('human_check_empty', __('Please answer the anti-spam question.', 'woocommerce'));
    }
}

—

### ✅ STEP 3: Done ✅

Now:

– The CAPTCHA math question changes on every page load.
– If the user enters the wrong answer, registration will **fail with an error**.
– If the answer is correct, registration proceeds.

—

### ✅ (Optional) Error Display Style

WooCommerce will already show errors, but you can style them with CSS if needed:

.woocommerce-error li {
    color: red;
    font-weight: bold;
}

—

### ✅ Test Your Flow

1. Visit the registration page
2. Enter valid email/password
3. Solve the math (e.g., 6 x 7 = 42)
4. Try wrong answer to see error
5. Try correct answer to register

Let me know if you want this question styled, made multilingual, or protected from bots further (e.g., with time checks or JS obfuscation).

User
 
*

i want first this to be solved there and then we can proceed to register@!

DO IT WITH JS AND MAKE REGISTER BUTTON DIABLE

Assistant
Perfect! Now you want:

✅ The multiplication question to be solved
✅ Disable the **Register** button until the correct answer is entered
✅ Do it with **JavaScript**, not PHP validation

Let’s go step by step 👇

—

## ✅ Final Working Code (PHP + JavaScript)

### 🧩 Paste this inside your registration form:

<?php
// PHP generates two random numbers and passes the correct answer as a data attribute
$rand1 = rand(2, 12);
$rand2 = rand(2, 12);
$question = "{$rand1} x {$rand2}";
$correctAnswer = $rand1 * $rand2;
?>

<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
    <label for="human_check">
        <?php echo esc_html__( "Are you a human? Please, solve {$question}.", 'woocommerce' ); ?> 
        <span class="required">*</span>
    </label>
    <input type="number" class="woocommerce-Input woocommerce-Input--text input-text"
           name="human_check" id="human_check"
           placeholder="Answer here" required
           data-answer="<?php echo esc_attr($correctAnswer); ?>" />
</p>

—

### 🧠 Disable the Register Button with JavaScript

Place this just **before the closing “ tag** or in your theme JS:

<script>
document.addEventListener('DOMContentLoaded', function () {
    const input = document.getElementById('human_check');
    const correctAnswer = parseInt(input.dataset.answer);
    const registerButton = document.querySelector('button.woocommerce-form-register__submit');

    // Disable register button initially
    registerButton.disabled = true;

    input.addEventListener('input', function () {
        const userAnswer = parseInt(this.value);

        if (userAnswer === correctAnswer) {
            registerButton.disabled = false;
            input.style.borderColor = 'green';
        } else {
            registerButton.disabled = true;
            input.style.borderColor = 'red';
        }
    });
});
</script>

—

## ✅ RESULT

– ✅ A math question like “7 x 9” shows on every page load
– ❌ The Register button is **disabled** by default
– ✅ Only when the correct answer (e.g. `63`) is entered, the Register button is **enabled**
– 🧠 JavaScript-only — no PHP/session validation required

—

Let me know if you'd like:
– To **hide the answer from source code**
– To **change field to dropdown or slider**
– Or **style the field and button better**.

Happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *