If you do not like to use the plugin then follow the guide to setup google reCaptcha manually for the WooCommerce frontend form.
Add reCaptcha API JavaScript to head
You need to add the <script src="https://www.google.com/recaptcha/api.js" async defer></script> near the </head> tag. You can use the wp_head action hook for this.
add_action('wp_head', 'wp34_add_recaptcha');
function wp34_add_recaptcha() {?>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<?php }
Add site key to WooCommerce Registration form
The next step is to add the site key to the Woocommerce registration form. You need to add following HTML div to display the recaptcha on the registration form - <div class="g-recaptcha" data-sitekey="your_site_key"></div>. Open the woocommerce/myaccount/form-login.php file and update it like the below codes.
<form class="woocommerce-form woocommerce-form-login login" method="post">
<?php do_action( 'woocommerce_login_form_start' ); ?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
</p>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>
<input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" autocomplete="current-password" />
</p>
<?php do_action( 'woocommerce_login_form' ); ?>
<p class="form-row">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox woocommerce-form-login__rememberme">
<input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" /> <span><?php esc_html_e( 'Remember me', 'woocommerce' ); ?></span>
</label>
<?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
<button type="submit" class="woocommerce-button button woocommerce-form-login__submit" name="login" value="<?php esc_attr_e( 'Log in', 'woocommerce' ); ?>"><?php esc_html_e( 'Log in', 'woocommerce' ); ?></button>
</p>
<p class="woocommerce-LostPassword lost_password">
<a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php esc_html_e( 'Lost your password?', 'woocommerce' ); ?></a>
</p>
<!-- Add reCaptcha here -->
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<?php do_action( 'woocommerce_login_form_end' ); ?>
</form>
Validate reCaptcha with registration form
Now we have to use the woocommerce_register_post action hook to validate the google reCaptcha before submitting the registration form data.
add_action( 'woocommerce_register_post', 'woo6912_validate_recaptcha_field', 10, 3 );
function woo6912_validate_recaptcha_field( $username, $email, $wpErrors )
{
$remoteIP = $_SERVER['REMOTE_ADDR'];
$recaptchaResponse = $_POST['g-recaptcha-response'];
$response = wp_remote_post( 'https://www.google.com/recaptcha/api/siteverify', [
'body' => [
'secret' => 'PRIVATE KEY HERE !!!',
'response' => $recaptchaResponse,
'remoteip' => $remoteIP
]
] );
$response_code = wp_remote_retrieve_response_code( $response );
$response_body = wp_remote_retrieve_body( $response );
if ( $response_code == 200 )
{
$result = json_decode( $response_body, true );
if ( ! $result['success'] )
{
switch ( $result['error-codes'] )
{
case 'missing-input-secret':
case 'invalid-input-secret':
$wpErrors->add( 'recaptcha', __( '<strong>ERROR</strong>: Invalid reCAPTCHA secret key.', 'woocommerce' ) );
break;
case 'missing-input-response' :
case 'invalid-input-response' :
$wpErrors->add( 'recaptcha', __( '<strong>ERROR</strong>: Please check the box to prove that you are not a robot.', 'woocommerce' ) );
break;
default:
$wpErrors->add( 'recaptcha', __( '<strong>ERROR</strong>: Something went wront validating the reCAPTCHA.', 'woocommerce' ) );
break;
}
}
}
else
{
$wpErrors->add( 'recaptcha_error', __( '<strong>Error</strong>: Unable to reach the reCAPTCHA server.', 'woocommerce' ) );
}
}
enjoy 👍
