WooCommerce结账页添加多个自定义下单按钮技术咨询

I’ve tackled this exact requirement before—here are two solid ways to add extra "Place Order" buttons to your WooCommerce checkout page, complete with working functionality:

Method 1: Use WooCommerce Hooks to Insert Additional Buttons #

WooCommerce provides built-in hooks that let you inject content right before or after the default submit button. You can replicate the default button’s structure to keep functionality and styling consistent with your site’s design.

Add this code to your child theme’s functions.php file or a custom plugin (never edit the parent theme directly):

add_action('woocommerce_review_order_after_submit', 'add_extra_place_order_buttons');
function add_extra_place_order_buttons() {
    // Pull the default button text (supports multi-language sites)
    $button_text = __('Place Order', 'woocommerce');
    
    // Output first extra button (adjust ID/classes if needed)
    echo '<button type="submit" class="button alt" id="place-order-2" name="woocommerce_checkout_place_order" value="1">';
    echo esc_html($button_text);
    echo '</button>';
    
    // Add a second button if you need more
    echo '<button type="submit" class="button alt" id="place-order-3" name="woocommerce_checkout_place_order" value="1">';
    echo esc_html($button_text);
    echo '</button>';
}

Key Details: #

• We’re using the same name attribute (woocommerce_checkout_place_order) as the default button, so WooCommerce will recognize the submit action immediately.
• The class="button alt" ensures new buttons inherit your theme’s default WooCommerce button styling.
• Unique id attributes prevent conflicts with JavaScript or CSS.

Method 2: Ensure Buttons Trigger Full Checkout Flow #

In some cases, custom buttons might skip validation steps. Add this JavaScript to ensure they trigger the same validation and submission as the default button. You can add this to your theme’s footer.php (right before </body>) or enqueue it via a custom script:

jQuery(document).ready(function($) {
    // Target your extra buttons by ID
    $('#place-order-2, #place-order-3').on('click', function(e) {
        e.preventDefault();
        // Trigger the checkout form's native submission
        $('form.checkout').submit();
    });
});

Optional Styling Tweaks #

If buttons stack vertically instead of sitting side-by-side, add this CSS to align them properly:

.woocommerce-checkout .form-row.place-order .button.alt {
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 0;
}

Quick Pro Tips: #

• Always test on a staging site first—breaking the checkout flow is no joke!
• If you use a checkout customization plugin (like Checkout Field Editor), verify the woocommerce_review_order_after_submit hook still works (some plugins modify the checkout structure).
• For multi-language sites, sticking with __('Place Order', 'woocommerce') ensures button text matches your site’s language settings.

内容的提问来源于stack exchange，提问作者Kevin.a