如何在WooCommerce移动端结账页面添加第二个下单按钮？

可行性与按钮协同性 #

• 完全可行：WooCommerce的结账流程基于表单提交，只要新增按钮能正确触发原生的结账提交逻辑，就能实现需求。
• 完美协同：两个按钮本质上都是触发同一个结账表单的提交动作——点击新增按钮时，我们让它模拟点击原生底部按钮，这样所有的表单验证、订单创建流程都会沿用WooCommerce原生逻辑，不会出现功能不一致或者重复提交的问题。

修改方式（推荐两种安全方案） #

方案1：通过子主题函数添加（无需修改模板） #

这种方式不需要改动WooCommerce的核心模板文件，避免插件更新后丢失修改，只需要在你的子主题 functions.php 文件里添加以下代码：

add_action( 'woocommerce_after_checkout_billing_form', 'add_additional_mobile_place_order_button' );
function add_additional_mobile_place_order_button() {
    ?>
    <div class="mobile-additional-place-order-button" style="display: none; margin: 20px 0;">
        <?php
        $order_button_text = apply_filters( 'woocommerce_order_button_text', __( 'Place order', 'woocommerce' ) );
        echo apply_filters( 'woocommerce_order_button_html', '<button type="button" class="button alt" id="additional_place_order">' . esc_html( $order_button_text ) . '</button>' );
        ?>
    </div>

    <script>
    jQuery(document).ready(function($) {
        // 控制仅在移动端显示新增按钮
        function toggleMobileButton() {
            var isMobile = window.innerWidth < 768;
            $('.mobile-additional-place-order-button').toggle(isMobile);
        }

        // 初始化检查屏幕尺寸
        toggleMobileButton();
        // 窗口大小变化时重新检查
        $(window).resize(toggleMobileButton);

        // 点击新增按钮时触发原生按钮的点击事件
        $('#additional_place_order').on('click', function() {
            $('#place_order').trigger('click');
        });
    });
    </script>
    <?php
}

这段代码会在结账表单的账单字段末尾添加一个按钮，并且仅在屏幕宽度小于768px的移动端显示，点击时触发原生底部按钮的提交动作。

方案2：修改子主题内的结账模板文件 #

如果你更习惯修改模板文件，绝对不要直接修改WooCommerce核心插件里的文件，正确步骤是：

1. 复制WooCommerce核心模板文件 wp-content/plugins/woocommerce/templates/checkout/form-checkout.php 到你的子主题目录下，路径为 wp-content/themes/你的子主题名/woocommerce/checkout/form-checkout.php（没有对应的文件夹就手动创建）。
2. 打开子主题里的这个文件，找到所有表单字段的末尾位置（比如在 <?php do_action( 'woocommerce_checkout_after_order_review' ); ?> 之后），添加以下代码：

<?php // 移动端额外添加的提交按钮 ?>
<div class="mobile-additional-place-order-button" style="display: none; margin: 20px 0;">
    <?php echo apply_filters( 'woocommerce_order_button_html', '<button type="button" class="button alt" id="additional_place_order">' . esc_html( $order_button_text ) . '</button>' ); ?>
</div>

<script>
jQuery(document).ready(function($) {
    function checkAndToggleButton() {
        $('.mobile-additional-place-order-button').toggle(window.innerWidth < 768);
    }

    checkAndToggleButton();
    $(window).resize(checkAndToggleButton);

    $('#additional_place_order').on('click', function() {
        $('#place_order').trigger('click');
    });
});
</script>

这样修改后，新增按钮会出现在表单字段末尾，同样只在移动端显示，功能和原生按钮完全一致。

注意事项 #

• 不要直接修改WooCommerce核心文件，否则插件更新后你的修改会被覆盖。
• 可以根据自己的需求调整移动端的判断宽度（比如把768px改成你需要的数值）。
• 如果你的主题有自定义的结账样式，可能需要给新增按钮添加额外的CSS类来匹配主题风格。

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