WooCommerce：如何在我的账户自定义页面实现表单CRUD及持久化？

Hey there! I see you've already successfully set up custom endpoints (fit and services) in your WooCommerce My Account area—awesome work as a designer stepping into coding! Let's break down how to add full CRUD (Create, Read, Update, Delete) functionality to these pages, using your existing code as a foundation.

1. First: Secure Your Form with Nonces & Handle Submissions #

Since your custom pages have forms, we need to safely handle form submissions. We'll use WordPress's admin_post hooks (optimized for logged-in users, which is perfect for My Account pages).

Step 1.1: Add Nonce Field to Your Form #

In your page-templates/my-account-fit.php template, add a nonce field to your form to prevent CSRF attacks, plus hidden fields to route the submission:

<form method="post" action="<?php echo esc_url( admin_url('admin_post.php') ); ?>">
    <?php wp_nonce_field( 'fit_form_action', 'fit_form_nonce' ); ?>
    <input type="hidden" name="action" value="save_fit_data">
    
    <!-- Your existing form fields (example below) -->
    <label for="fit_chest">Chest Measurement:</label>
    <input type="text" name="fit_chest" id="fit_chest" value="<?php echo esc_attr( get_user_meta( get_current_user_id(), 'fit_chest', true ) ); ?>">

    <label for="fit_waist">Waist Measurement:</label>
    <input type="text" name="fit_waist" id="fit_waist" value="<?php echo esc_attr( get_user_meta( get_current_user_id(), 'fit_waist', true ) ); ?>">
    
    <button type="submit" name="save_fit" class="button">Save Fit Data</button>
</form>

Step 1.2: Create the Submission Handler Function #

Add this to your theme's functions.php file (or a custom plugin) to process form submissions:

// Handle fit form submission for logged-in users
add_action( 'admin_post_save_fit_data', 'handle_fit_form_submission' );

function handle_fit_form_submission() {
    // Verify nonce to prevent malicious requests
    if ( !isset( $_POST['fit_form_nonce'] ) || !wp_verify_nonce( $_POST['fit_form_nonce'], 'fit_form_action' ) ) {
        wp_die( 'Invalid request, please try again.' );
    }

    // Ensure user is logged in (My Account requires this, but extra check won't hurt)
    if ( !is_user_logged_in() ) {
        wp_redirect( wc_get_page_permalink( 'myaccount' ) );
        exit;
    }

    $user_id = get_current_user_id();

    // Handle CREATE/UPDATE logic
    if ( isset( $_POST['save_fit'] ) ) {
        // Sanitize all input data to keep your site secure
        $chest = sanitize_text_field( $_POST['fit_chest'] );
        $waist = sanitize_text_field( $_POST['fit_waist'] );
        
        // Update or add user meta (this covers both Create and Update in one step)
        update_user_meta( $user_id, 'fit_chest', $chest );
        update_user_meta( $user_id, 'fit_waist', $waist );

        // Redirect back to the fit page with a success message
        wc_add_notice( 'Fit data saved successfully!', 'success' );
        wp_redirect( wc_get_account_endpoint_url( 'fit' ) );
        exit;
    }
}

2. Read (Display) Saved Data #

Add this to your my-account-fit.php template to show the user's saved data:

<?php
$user_id = get_current_user_id();
$chest = get_user_meta( $user_id, 'fit_chest', true );
$waist = get_user_meta( $user_id, 'fit_waist', true );

if ( !empty( $chest ) || !empty( $waist ) ) {
    echo '<div class="saved-fit-data">';
    echo '<h3>Your Saved Fit Measurements</h3>';
    echo '<ul>';
    if ( !empty( $chest ) ) echo '<li>Chest: ' . esc_html( $chest ) . '</li>';
    if ( !empty( $waist ) ) echo '<li>Waist: ' . esc_html( $waist ) . '</li>';
    echo '</ul>';
    echo '</div>';
} else {
    echo '<p>No fit data saved yet. Fill out the form below to add your measurements.</p>';
}
?>

3. Add Delete Functionality #

Update your form in my-account-fit.php to include a delete button (only show if data exists):

<?php if ( !empty( $chest ) || !empty( $waist ) ) : ?>
    <button type="submit" name="delete_fit" class="button delete-button" onclick="return confirm('Are you sure you want to delete your fit data?');">Delete Fit Data</button>
<?php endif; ?>

Then add this block to the handle_fit_form_submission function to process deletions:

// Handle DELETE logic
if ( isset( $_POST['delete_fit'] ) ) {
    delete_user_meta( $user_id, 'fit_chest' );
    delete_user_meta( $user_id, 'fit_waist' );
    wc_add_notice( 'Fit data deleted successfully!', 'success' );
    wp_redirect( wc_get_account_endpoint_url( 'fit' ) );
    exit;
}

4. Repeat for the "Services" Endpoint #

You can copy this exact pattern for your services endpoint:

• Add a nonce-protected form in page-templates/my-account-services.php
• Create a submission handler function (e.g., handle_services_form_submission) with admin_post_save_services_data hooks
• Use user meta keys specific to services (like service_type, service_notes, etc.)

Important Reminders #

• Security: Always sanitize input data and verify nonces to protect your site from attacks.
• Rewrite Rules: After adding endpoints, flush WordPress rewrite rules by going to Settings → Permalinks and clicking "Save Changes" (no need to edit anything).
• User Meta: We're using WordPress user meta here because it's simple and tied directly to the logged-in user—perfect for My Account-specific data. For more complex needs, you could create a custom post type, but user meta works great for most cases.

That's it! You now have full CRUD functionality for your custom My Account pages. If you run into issues with specific form fields or data types, feel free to tweak the code to match your needs.

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