如何为woocommerce_login_form()生成的登录表单添加查看密码切换按钮？

可以通过钩子修改密码字段输出、添加JS切换逻辑来实现，具体方案如下：

1. 给密码字段追加切换按钮HTML #

使用woocommerce_form_field_password钩子，在登录表单的密码输入框后添加切换按钮结构：

add_filter( 'woocommerce_form_field_password', 'add_password_toggle_to_login_form', 10, 4 );
function add_password_toggle_to_login_form( $field, $key, $args, $value ) {
    // 仅作用于登录表单的密码字段
    if ( 'password' === $key && ( did_action( 'woocommerce_login_form' ) || is_wc_endpoint_url( 'login' ) ) ) {
        $field .= '<button type="button" class="woocommerce-password-toggle" aria-label="' . esc_attr__( '显示/隐藏密码', 'woocommerce' ) . '">
            <span class="dashicons dashicons-visibility"></span>
            <span class="dashicons dashicons-hidden" style="display:none;"></span>
        </button>';
    }
    return $field;
}

2. 添加密码切换功能的JavaScript #

在页面底部加载脚本，实现点击切换密码显示状态的逻辑：

add_action( 'wp_footer', 'enqueue_password_toggle_script' );
function enqueue_password_toggle_script() {
    // 仅在未登录且显示自定义登录表单时加载
    if ( ! is_user_logged_in() && ( is_wc_endpoint_url( 'login' ) || has_shortcode( get_post()->post_content, 'my_wc_login_form' ) ) ) {
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('.woocommerce-password-toggle').forEach(toggle => {
                    toggle.addEventListener('click', function() {
                        const passwordField = this.previousElementSibling;
                        const newType = passwordField.type === 'password' ? 'text' : 'password';
                        passwordField.type = newType;
                        
                        // 切换图标显示状态
                        const visIcon = this.querySelector('.dashicons-visibility');
                        const hidIcon = this.querySelector('.dashicons-hidden');
                        visIcon.style.display = newType === 'password' ? 'inline-block' : 'none';
                        hidIcon.style.display = newType === 'password' ? 'none' : 'inline-block';
                    });
                });
            });
        </script>
        <?php
    }
}

3. 可选：补充基础样式（适配按钮位置） #

如果切换按钮位置不对，添加以下CSS调整布局：

add_action( 'wp_head', 'add_password_toggle_styles' );
function add_password_toggle_styles() {
    if ( ! is_user_logged_in() && ( is_wc_endpoint_url( 'login' ) || has_shortcode( get_post()->post_content, 'my_wc_login_form' ) ) ) {
        ?>
        <style>
            .woocommerce-form-row--password {
                position: relative;
            }
            .woocommerce-password-toggle {
                background: transparent;
                border: 0;
                cursor: pointer;
                position: absolute;
                right: 12px;
                top: 50%;
                transform: translateY(-50%);
                padding: 0;
            }
            .woocommerce-password-toggle .dashicons {
                font-size: 18px;
                color: #666;
            }
        </style>
        <?php
    }
}

整合代码 #

将上述所有函数和你原有的短代码函数放在一起即可，无需修改原短代码逻辑，钩子会自动作用于woocommerce_login_form()生成的表单。

最终完整代码示例 #

// 你的原短代码函数
function my_render_wc_login_form( $atts ) { 
  if ( ! is_user_logged_in() ) {  
    if ( function_exists( 'woocommerce_login_form' ) && 
        function_exists( 'woocommerce_output_all_notices' ) ) {
      // 渲染WooCommerce登录表单
      ob_start();
      woocommerce_output_all_notices();
      woocommerce_login_form();
      return ob_get_clean();
    } else { 
      // 渲染WordPress默认登录表单
      return wp_login_form( array( 'echo' => false ));
    }
  } else {
    return "Hello there! Welcome back.";
  }
}
add_shortcode( 'my_wc_login_form', 'my_render_wc_login_form' );

// 添加密码切换按钮HTML
add_filter( 'woocommerce_form_field_password', 'add_password_toggle_to_login_form', 10, 4 );
function add_password_toggle_to_login_form( $field, $key, $args, $value ) {
    if ( 'password' === $key && ( did_action( 'woocommerce_login_form' ) || is_wc_endpoint_url( 'login' ) ) ) {
        $field .= '<button type="button" class="woocommerce-password-toggle" aria-label="' . esc_attr__( '显示/隐藏密码', 'woocommerce' ) . '">
            <span class="dashicons dashicons-visibility"></span>
            <span class="dashicons dashicons-hidden" style="display:none;"></span>
        </button>';
    }
    return $field;
}

// 添加切换功能脚本
add_action( 'wp_footer', 'enqueue_password_toggle_script' );
function enqueue_password_toggle_script() {
    if ( ! is_user_logged_in() && ( is_wc_endpoint_url( 'login' ) || has_shortcode( get_post()->post_content, 'my_wc_login_form' ) ) ) {
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('.woocommerce-password-toggle').forEach(toggle => {
                    toggle.addEventListener('click', function() {
                        const passwordField = this.previousElementSibling;
                        const newType = passwordField.type === 'password' ? 'text' : 'password';
                        passwordField.type = newType;
                        
                        const visIcon = this.querySelector('.dashicons-visibility');
                        const hidIcon = this.querySelector('.dashicons-hidden');
                        visIcon.style.display = newType === 'password' ? 'inline-block' : 'none';
                        hidIcon.style.display = newType === 'password' ? 'none' : 'inline-block';
                    });
                });
            });
        </script>
        <?php
    }
}

// 添加基础样式
add_action( 'wp_head', 'add_password_toggle_styles' );
function add_password_toggle_styles() {
    if ( ! is_user_logged_in() && ( is_wc_endpoint_url( 'login' ) || has_shortcode( get_post()->post_content, 'my_wc_login_form' ) ) ) {
        ?>
        <style>
            .woocommerce-form-row--password {
                position: relative;
            }
            .woocommerce-password-toggle {
                background: transparent;
                border: 0;
                cursor: pointer;
                position: absolute;
                right: 12px;
                top: 50%;
                transform: translateY(-50%);
                padding: 0;
            }
            .woocommerce-password-toggle .dashicons {
                font-size: 18px;
                color: #666;
            }
        </style>
        <?php
    }
}

完成后，woocommerce_login_form()生成的表单就会和默认登录/注册表单一样，拥有密码显示/隐藏的切换按钮。

内容的提问来源于stack exchange，提问作者Junky