如何实现WooCommerce form-edit-account.php字段只读点击按钮可编辑

步骤1：模板重写（官方推荐方式） #

把WooCommerce自带的form-edit-account.php复制到你的主题目录下的woocommerce/myaccount/文件夹里，这样WooCommerce更新时不会覆盖你的修改。

步骤2：修改模板代码 #

更新后的模板代码如下，核心改动包括添加只读属性、编辑/保存按钮切换逻辑、配套JS和样式：

<?php
/**
 * Edit account form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-edit-account.php.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.5.0
 */

defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_edit_account_form' ); ?>

<form class="woocommerce-EditAccountForm edit-account" action="" method="post" <?php do_action( 'woocommerce_edit_account_form_tag' ); ?> >

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

    <!-- 编辑按钮 -->
    <p class="edit-profile-btn-wrap">
        <button type="button" class="woocommerce-Button button edit-profile-btn"><?php esc_html_e( '编辑资料', 'woocommerce' ); ?></button>
    </p>

    <p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
        <label for="account_first_name"><?php esc_html_e( '名字', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text account-editable-field" name="account_first_name" id="account_first_name" autocomplete="given-name" value="<?php echo esc_attr( $user->first_name ); ?>" readonly />
    </p>
    <p class="woocommerce-form-row woocommerce-form-row--last form-row form-row-last">
        <label for="account_last_name"><?php esc_html_e( '姓氏', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text account-editable-field" name="account_last_name" id="account_last_name" autocomplete="family-name" value="<?php echo esc_attr( $user->last_name ); ?>" readonly />
    </p>
    <div class="clear"></div>

    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="account_display_name"><?php esc_html_e( '显示名称', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="text" class="woocommerce-Input woocommerce-Input--text input-text account-editable-field" name="account_display_name" id="account_display_name" value="<?php echo esc_attr( $user->display_name ); ?>" readonly /> <span><em><?php esc_html_e( '这是你的名字在账户区域和评论中的显示方式', 'woocommerce' ); ?></em></span>
    </p>
    <div class="clear"></div>

    <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
        <label for="account_email"><?php esc_html_e( '邮箱地址', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
        <input type="email" class="woocommerce-Input woocommerce-Input--email input-text account-editable-field" name="account_email" id="account_email" autocomplete="email" value="<?php echo esc_attr( $user->user_email ); ?>" readonly />
    </p>

    <!-- 密码区域默认隐藏，编辑时显示 -->
    <fieldset class="password-fieldset" style="display:none;">
        <legend><?php esc_html_e( '修改密码', 'woocommerce' ); ?></legend>

        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
            <label for="password_current"><?php esc_html_e( '当前密码（留空则不修改）', 'woocommerce' ); ?></label>
            <input type="password" class="woocommerce-Input woocommerce-Input--password input-text" name="password_current" id="password_current" autocomplete="off" />
        </p>
        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
            <label for="password_1"><?php esc_html_e( '新密码（留空则不修改）', 'woocommerce' ); ?></label>
            <input type="password" class="woocommerce-Input woocommerce-Input--password input-text" name="password_1" id="password_1" autocomplete="off" />
        </p>
        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
            <label for="password_2"><?php esc_html_e( '确认新密码', 'woocommerce' ); ?></label>
            <input type="password" class="woocommerce-Input woocommerce-Input--password input-text" name="password_2" id="password_2" autocomplete="off" />
        </p>
    </fieldset>
    <div class="clear"></div>

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

    <!-- 保存按钮默认隐藏 -->
    <p class="save-changes-btn-wrap" style="display:none;">
        <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
        <button type="submit" class="woocommerce-Button button" name="save_account_details" value="<?php esc_attr_e( '保存更改', 'woocommerce' ); ?>"><?php esc_html_e( '保存更改', 'woocommerce' ); ?></button>
        <button type="button" class="woocommerce-Button button cancel-edit-btn"><?php esc_html_e( '取消', 'woocommerce' ); ?></button>
        <input type="hidden" name="action" value="save_account_details" />
    </p>

    <?php do_action( 'woocommerce_edit_account_form_end' ); ?>
</form>

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    const editBtn = document.querySelector('.edit-profile-btn');
    const saveWrap = document.querySelector('.save-changes-btn-wrap');
    const cancelBtn = document.querySelector('.cancel-edit-btn');
    const editableFields = document.querySelectorAll('.account-editable-field');
    const passwordFieldset = document.querySelector('.password-fieldset');

    // 切换到编辑模式
    editBtn.addEventListener('click', function() {
        editBtn.style.display = 'none';
        saveWrap.style.display = 'block';
        passwordFieldset.style.display = 'block';
        
        editableFields.forEach(field => {
            field.removeAttribute('readonly');
            field.classList.add('editing');
        });
    });

    // 取消编辑回到只读
    cancelBtn.addEventListener('click', function() {
        editBtn.style.display = 'block';
        saveWrap.style.display = 'none';
        passwordFieldset.style.display = 'none';
        
        editableFields.forEach(field => {
            field.setAttribute('readonly', true);
            field.classList.remove('editing');
        });
    });

    // 提交后自动回到只读状态
    document.querySelector('.edit-account').addEventListener('submit', function() {
        setTimeout(() => {
            editBtn.style.display = 'block';
            saveWrap.style.display = 'none';
            passwordFieldset.style.display = 'none';
            
            editableFields.forEach(field => {
                field.setAttribute('readonly', true);
                field.classList.remove('editing');
            });
        }, 500);
    });
});
</script>

<style>
.account-editable-field[readonly] {
    background-color: #f0f0f0;
    cursor: not-allowed;
}
.account-editable-field.editing {
    background-color: #fff;
    cursor: text;
}
.edit-profile-btn-wrap, .save-changes-btn-wrap {
    margin-bottom: 20px;
}
.cancel-edit-btn {
    margin-left: 10px;
    background-color: #ccc;
}
.cancel-edit-btn:hover {
    background-color: #bbb;
}
</style>

步骤3：核心逻辑说明 #

1. 只读状态控制：给账户信息输入框默认添加readonly属性，通过JS动态移除/添加实现模式切换
2. 按钮与区域切换：默认显示"编辑资料"按钮，隐藏保存按钮和密码区域；点击编辑后切换显示状态
3. 用户体验优化：用CSS区分只读/编辑状态的输入框样式，增加取消按钮支持放弃编辑
4. 兼容性保障：采用WooCommerce官方模板重写机制，不修改核心文件，不影响插件后续更新

自定义调整建议 #

• 若不需要隐藏密码区域，直接删除password-fieldset标签的style="display:none;"即可
• 表单提交后的状态恢复用了延迟处理，如需更精准控制，可通过woocommerce_save_account_details钩子后端触发状态更新

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