如何将WooCommerce支付方式迁移至独立专属页面？

Hey there! I’ve helped several folks with this exact WooCommerce customization, so let’s break down how to pull this off smoothly. From your screenshot, it looks like your payment options are currently embedded right in the checkout order review section—we’ll move that entire block to a dedicated page while keeping the payment flow fully functional.

Step 1: Create the Standalone Payment Page #

First, make a new page in WordPress (Pages → Add New). Name it something clear like "Complete Payment" and add the shortcode [wc_standalone_payment] to its content area. Publish it and note down its slug (you’ll need this later for redirects).

Step 2: Remove Payment Section from Checkout Page #

We’ll use a WooCommerce hook to strip the payment gateway section from the default checkout page. Add this code to your theme’s functions.php file or a custom plugin:

// Remove payment section from checkout order review
add_action( 'woocommerce_checkout_order_review', 'remove_checkout_payment_block', 1 );
function remove_checkout_payment_block() {
    remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
}

Step 3: Add Shortcode to Render Payment Section on New Page #

This shortcode will load the payment gateways only when there’s a pending order waiting for payment. Add this to your functions.php or custom plugin:

// Shortcode for standalone payment page
add_shortcode( 'wc_standalone_payment', 'display_standalone_payment_gateways' );
function display_standalone_payment_gateways() {
    ob_start();

    // Check if there's an order awaiting payment in the session
    $pending_order_id = WC()->session->get('order_awaiting_payment');
    if ( !$pending_order_id ) {
        echo '<p>Oops! No pending payment found. Please finish your checkout first.</p>';
        return ob_get_clean();
    }

    $order = wc_get_order( $pending_order_id );
    if ( !$order || !$order->needs_payment() ) {
        echo '<p>This order has already been paid or doesn\'t require payment.</p>';
        WC()->session->__unset('order_awaiting_payment');
        return ob_get_clean();
    }

    // Render the payment gateways
    woocommerce_checkout_payment();

    return ob_get_clean();
}

Step 4: Redirect to Payment Page After Order Creation #

We need to send users to the new payment page right after they submit their order details (before paying). Add this code:

// Redirect to standalone payment page post-checkout
add_action( 'woocommerce_checkout_order_processed', 'redirect_to_payment_page_after_checkout', 10, 1 );
function redirect_to_payment_page_after_checkout( $order_id ) {
    $order = wc_get_order( $order_id );
    if ( $order->needs_payment() ) {
        // Store the order ID in session for the payment page
        WC()->session->set('order_awaiting_payment', $order_id);
        // Replace 'complete-payment' with your payment page's slug
        $payment_page_url = get_permalink( get_page_by_path( 'complete-payment' ) );
        wp_redirect( $payment_page_url );
        exit;
    }
}

Step 5: Handle Payment Success/Failure Redirects #

Most payment gateways automatically redirect back to WooCommerce’s default pages, but you can tweak this if needed. For example, to redirect to a custom thank you page after successful payment:

// Custom redirect after successful payment
add_action( 'woocommerce_payment_complete', 'redirect_to_custom_thank_you', 10, 1 );
function redirect_to_custom_thank_you( $order_id ) {
    WC()->session->__unset('order_awaiting_payment');
    // Replace 'thank-you' with your thank you page slug
    wp_redirect( get_permalink( get_page_by_path( 'thank-you' ) ) );
    exit;
}

Important Notes #

• Test Thoroughly: Test with different payment gateways (Stripe, PayPal, etc.) to ensure the flow works for all options.
• Style Adjustments: The payment section might inherit checkout page styles—you may need to add custom CSS to make it fit your standalone page’s design.
• Session Management: WooCommerce sessions handle the order ID, but make sure your site’s caching settings don’t break this (exclude the payment page from caching).

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