WooCommerce：未注册用户点击加入购物车按钮弹出联系表单需求

Got it, let's tackle this requirement step by step. Here's how you can implement a contact form popup for unregistered users when they click "Add to Cart" in WooCommerce, plus set up the dual email notifications:

1. Override Default Add-to-Cart Behavior for Guests #

First, we'll redirect guest users to our popup form instead of letting them add items to the cart. We'll also store the selected product ID in a session to reference it later. Add this code to your child theme's functions.php file or a custom plugin:

add_filter( 'woocommerce_add_to_cart_redirect', 'guest_redirect_to_contact_form' );
function guest_redirect_to_contact_form( $url ) {
    if ( ! is_user_logged_in() ) {
        // Store product ID in session for later use
        if ( isset( $_REQUEST['add-to-cart'] ) ) {
            WC()->session->set( 'guest_product_id', absint( $_REQUEST['add-to-cart'] ) );
        }
        // Add a query arg to trigger the popup on page load
        return add_query_arg( 'show-contact-form', '1', get_permalink() );
    }
    return $url;
}

2. Inject the Popup Contact Form #

Next, we'll add the popup HTML to the page when the show-contact-form query parameter is present. This form will capture the user's details and include the product info we stored earlier:

add_action( 'wp_footer', 'guest_contact_form_popup' );
function guest_contact_form_popup() {
    if ( ! is_user_logged_in() && isset( $_GET['show-contact-form'] ) ) {
        $product_id = WC()->session->get( 'guest_product_id' );
        if ( ! $product_id ) return;
        
        $product = wc_get_product( $product_id );
        if ( ! $product ) return;
        ?>
        <div id="guest-contact-popup" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.2); z-index: 9999;">
            <h3>Request Product Details</h3>
            <p>Please fill out this form, and we'll send you all info about <strong><?php echo esc_html( $product->get_name() ); ?></strong> right away!</p>
            <form id="guest-contact-form" method="post" action="">
                <?php wp_nonce_field( 'guest_contact_form_nonce', 'guest_contact_nonce' ); ?>
                <input type="hidden" name="product_id" value="<?php echo esc_attr( $product_id ); ?>">
                <p>
                    <label for="guest-name">Your Full Name *</label>
                    <input type="text" id="guest-name" name="guest_name" required style="width: 100%; padding: 8px; margin-top: 5px;">
                </p>
                <p>
                    <label for="guest-email">Your Email *</label>
                    <input type="email" id="guest-email" name="guest_email" required style="width: 100%; padding: 8px; margin-top: 5px;">
                </p>
                <p>
                    <label for="guest-phone">Your Phone Number</label>
                    <input type="tel" id="guest-phone" name="guest_phone" style="width: 100%; padding: 8px; margin-top: 5px;">
                </p>
                <p>
                    <label for="guest-message">Additional Message (Optional)</label>
                    <textarea id="guest-message" name="guest_message" rows="3" style="width: 100%; padding: 8px; margin-top: 5px;"></textarea>
                </p>
                <p>
                    <button type="submit" name="submit_guest_contact" style="background: #2271b1; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer;">Send Request</button>
                </p>
            </form>
            <button id="close-popup" style="position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 20px; cursor: pointer;">&times;</button>
        </div>
        <div id="popup-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9998;"></div>
        <script>
            // Close popup when clicking overlay or close button
            document.getElementById('close-popup').addEventListener('click', function() {
                document.getElementById('guest-contact-popup').style.display = 'none';
                document.getElementById('popup-overlay').style.display = 'none';
            });
            document.getElementById('popup-overlay').addEventListener('click', function() {
                document.getElementById('guest-contact-popup').style.display = 'none';
                document.getElementById('popup-overlay').style.display = 'none';
            });
        </script>
        <?php
    }
}

3. Process Form Submission & Send Emails #

Now we'll validate the form data, generate the email content, and send messages to both the user and WordPress admin:

add_action( 'init', 'handle_guest_contact_form_submission' );
function handle_guest_contact_form_submission() {
    if ( isset( $_POST['submit_guest_contact'] ) && isset( $_POST['guest_contact_nonce'] ) ) {
        // Security check: verify nonce
        if ( ! wp_verify_nonce( $_POST['guest_contact_nonce'], 'guest_contact_form_nonce' ) ) {
            wp_die( 'Security verification failed.' );
        }
        
        // Sanitize and validate user input
        $product_id = absint( $_POST['product_id'] );
        $name = sanitize_text_field( $_POST['guest_name'] );
        $email = sanitize_email( $_POST['guest_email'] );
        $phone = sanitize_text_field( $_POST['guest_phone'] );
        $message = sanitize_textarea_field( $_POST['guest_message'] );
        
        if ( ! $product_id || ! $name || ! is_email( $email ) ) {
            wc_add_notice( 'Please fill in all required fields correctly.', 'error' );
            return;
        }
        
        $product = wc_get_product( $product_id );
        if ( ! $product ) {
            wc_add_notice( 'Invalid product selected.', 'error' );
            return;
        }
        
        // Prepare product details for emails
        $product_name = $product->get_name();
        $product_url = get_permalink( $product_id );
        $product_price = wc_price( $product->get_price() );
        
        // Send email to the user
        $user_subject = "Your Request for $product_name";
        $user_message = "Hi $name,\n\nThanks for reaching out about $product_name!\n\nHere are the details you asked for:\n- Product Name: $product_name\n- Price: $product_price\n- Product Link: $product_url\n\nYour message: $message\n\nWe'll follow up with you shortly. If you have more questions, feel free to reply to this email.\n\nBest regards,\n" . get_bloginfo( 'name' );
        
        wp_mail( $email, $user_subject, $user_message );
        
        // Send email to admin
        $admin_subject = "New Product Info Request: $product_name";
        $admin_message = "A new product info request has been submitted:\n\nUser Details:\nName: $name\nEmail: $email\nPhone: $phone\nMessage: $message\n\nProduct Details:\nName: $product_name\nPrice: $product_price\nProduct Link: $product_url";
        
        wp_mail( get_option( 'admin_email' ), $admin_subject, $admin_message );
        
        // Clean up session and show success message
        WC()->session->set( 'guest_product_id', '' );
        wc_add_notice( 'Your request has been sent! We\'ve emailed you the product details.', 'success' );
        
        // Redirect back to the product page
        wp_redirect( get_permalink( $product_id ) );
        exit;
    }
}

4. Optional: Polish the Popup with CSS #

The inline styles are basic—replace them with this custom CSS in your theme's stylesheet for a more professional look:

#guest-contact-popup {
    max-width: 500px;
    width: 90%;
    font-family: inherit;
}
#guest-contact-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333;
}
#guest-contact-form input, #guest-contact-form textarea {
    margin-bottom: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}
#close-popup {
    color: #666;
    transition: color 0.2s ease;
}
#close-popup:hover {
    color: #000;
}

Quick Notes: #

• Always test this on a staging site first to avoid breaking your live store.
• Use a child theme or custom plugin to add this code (so changes don't get overwritten during theme updates).
• You can tweak form fields, email content, or styling to match your store's brand.

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