如何让PayPal Express Checkout按钮固定显示在产品页加入购物车按钮下方

我刚好遇到过类似的需求，折腾了一阵终于搞定了，给你分享个靠谱的方案：

核心思路 #

默认的PayPal Express插件会把按钮限制在页面四边，而且可能需要商品加入购物车后才显示。我们要做的就是绕过插件的默认位置逻辑，直接把按钮渲染到「加入购物车」按钮的后面，同时确保按钮加载不受购物车状态影响。

步骤1：关闭插件默认的按钮位置 #

先去PayPal Express Checkout插件的设置页面，把所有默认的按钮位置选项（左/上/右/底部）都取消勾选，避免重复渲染按钮。

步骤2：用钩子把按钮插入到指定位置 #

以WooCommerce为例，它有个专门的钩子woocommerce_after_add_to_cart_button，正好对应「加入购物车」按钮的下方位置。把下面的代码加到你的主题functions.php文件里，或者用自定义代码插件来添加：

add_action('woocommerce_after_add_to_cart_button', 'custom_render_paypal_express_button');
function custom_render_paypal_express_button() {
    // 检查PayPal插件是否已加载
    if (class_exists('WC_PayPal_Express_Checkout')) {
        $paypal_plugin = WC_PayPal_Express_Checkout::instance();
        // 调用插件的按钮渲染方法（不同版本可能方法名不同，不行就看插件源码找对应函数）
        echo $paypal_plugin->get_button_html();
    }
}

如果你的PayPal插件版本比较新，get_button_html()可能换成了generate_button()，可以根据插件的源码调整。

步骤3：确保按钮始终显示（无需加购刷新） #

如果上面的方法还是只有加购后才显示按钮，说明插件的渲染逻辑里做了购物车检查。这时候可以直接用PayPal的智能按钮代码手动渲染，完全绕过插件的限制：

把下面的代码替换掉上面的函数内容：

add_action('woocommerce_after_add_to_cart_button', 'custom_render_paypal_express_button');
function custom_render_paypal_express_button() {
    $product_price = get_post_meta(get_the_ID(), '_price', true);
    ?>
    <div id="custom-paypal-button" style="margin-top:15px;"></div>
    <script src="https://www.paypal.com/sdk/js?client-id=你的PayPal客户端ID"></script>
    <script>
        paypal.Buttons({
            createOrder: function(data, actions) {
                // 动态创建当前产品的订单
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: '<?php echo esc_js($product_price); ?>'
                        },
                        description: '<?php echo esc_js(get_the_title()); ?>'
                    }]
                });
            },
            onApprove: function(data, actions) {
                // 支付成功后的处理逻辑，比如跳转到感谢页或者同步订单到后台
                return actions.order.capture().then(function(details) {
                    // 这里可以根据需要写自定义逻辑，比如发送AJAX到后台创建订单
                    window.location.href = '<?php echo esc_url(get_permalink(get_option('woocommerce_thanks_page_id'))); ?>';
                });
            }
        }).render('#custom-paypal-button');
    </script>
    <?php
}

记得把你的PayPal客户端ID换成你自己的ID，这个可以在PayPal开发者后台找到。

步骤4：样式微调（可选） #

如果按钮的位置或样式和页面不协调，可以加一点自定义CSS：

#custom-paypal-button {
    width: 100%;
    margin-top: 15px;
}

这样操作后，PayPal按钮就会稳稳地显示在「加入购物车」按钮下方，而且不管有没有加购商品，页面加载时就会直接显示出来啦！

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