WooCommerce Checkout page breaks when reCaptcha is added

  • mrapino

    (@mrapino)


    2 years ago

    The core.php file has a hook that adds the reCaptcha to WooCommerce Checkout:

    // Woo Checkout.
  $enable_woo_checkout = advanced_google_recaptcha_option( 'enable_woo_checkout' );
  if ( 1 === absint( $enable_woo_checkout ) && ! is_user_logged_in() ) {
    $hooks[] = 'woocommerce_checkout_after_customer_details';
  }

    There is an issue with hooking the reCaptcha to “woocommerce_checkout_after_customer_details”, as this adds a div directly between the two columns of the checkout page, breaking the layout.

    I manually changed the hook to:

    // Woo Checkout.
  $enable_woo_checkout = advanced_google_recaptcha_option( 'enable_woo_checkout' );
  if ( 1 === absint( $enable_woo_checkout ) && ! is_user_logged_in() ) {
    $hooks[] = 'woocommerce_review_order_before_submit';
  }

    Where I am hooking reCaptcha to “woocommerce_review_order_before_submit”, which is directly above the credit card payment form.

    Is it possible for you to make this change as the developer, so a future update doesn’t break the page again?

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter mrapino

    (@mrapino)

    I created a filter, so we don’t have to alter the core plugin …

    <?php
function modify_recaptcha_hook( $hooks ) {
    // Find the index of the original hook.
    $index = array_search( 'woocommerce_checkout_after_customer_details', $hooks );
    
    // Replace the original hook with the new hook.
    if ( $index !== false ) {
      $hooks[$index] = 'woocommerce_review_order_before_payment';
    }
  
    // Return the modified hooks list.
    return $hooks;
  }
  
  add_filter( 'advanced_google_recaptcha_filter_injection_hooks', 'modify_recaptcha_hook' );  
?>

    Please let me know if there is a better way.

    Thanks!

    Thank you for posting this, seems more useful than the official support response I got.

    I’m in the same situation and I’m going to try this filter, but instead of ‘woocommerce_review_order_before_payment’ I’m going to use ‘woocommerce_review_order_before_submit’

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘WooCommerce Checkout page breaks when reCaptcha is added’ is closed to new replies.