添加“立即购买”，简化购买流程

默认情况下，wordpress+woocommerce商店购买流程比较长：进入产品详情后，首先要把产品加入购物车，再进入购物车，然后才是进入结账页面填写各种信息，最后完成付款。有些朋友觉得这个过程太繁琐了，这篇文章就是教大家如何在”加入购物车“按钮后面，添加一个”直接购买“按钮，让客户快速进入结账页面，简化购买流程。效果如下图：

准备阶段

首先要确认一下我们有没有安装“Code Snippets”插件。这个插件的功能是让我们不用直接修改系统代码、也不用使用插件，就能直接使用代码添加某些功能。

如上图所示，证明我们已经安装了“Code Snippets”插件。如果没有安装，自己去插件中心搜索“Code Snippets”安装开启即可。这是非常基础的技能，这里就不详细说明了。

开始正式操作

鼠标放到左侧导航中的“Snippets”上，点击弹出的“All Snippets”选项，如下图所示

如下图所示条目，就是用来实现各种功能的代码片段，可以看到，我们已经有“立即购买”这个代码片段了。你们还没有操作过，但是也有可能有很多其它代码片段，只要下图的开关按钮没有开启，它就不会生效，可以不用管它。如下图所示，我的两个代码片段都是开启了的，左边的按钮都是开启状态。

点击左上角的“Add New”，即可进入添加新代码片段界面，如下图：

如上图所示，分别填写标题，代码内容后，就可以点击提交按钮保存了。标题可以自定义，你想写什么就写什么。代码内容不能 随便写。如果你懂编程，你自己写代码即可。如果不懂编程，直接复制下面的代码进去，然后提交即可。

代码内容：

/**
 * 添加“马上购买”按钮 - 直接跳转结账
 * 支持简单产品和可变产品，双按钮等宽对齐，间距强制生效
 */
add_action( 'woocommerce_after_add_to_cart_button', 'add_buy_now_button_direct' );
function add_buy_now_button_direct() {
    global $product;
    
    $product_id = $product->get_id();
    $is_variable = $product->is_type( 'variable' );
    
    $button_class = 'single_add_to_cart_button button alt buy-now-button';
    $disabled = $is_variable ? ' disabled' : '';
    
    echo '<button type="button" id="buy-now-direct" class="' . esc_attr( $button_class ) . '"' . $disabled . '>' . esc_html__( 'Buy now', 'woocommerce' ) . '</button>';
    
    ?>
    <script type="text/javascript">
    jQuery( function( $ ) {
        var $btn = $( '#buy-now-direct' );
        var $form = $( 'form.cart' );
        var isVariable = <?php echo $is_variable ? 'true' : 'false'; ?>;
        var productId = <?php echo (int) $product_id; ?>;
        
        function getVariationId() {
            var variationId = 0;
            if ( isVariable ) {
                var $variationIdInput = $form.find( 'input[name="variation_id"]' );
                if ( $variationIdInput.length ) {
                    variationId = $variationIdInput.val();
                }
            }
            return variationId;
        }
        
        function getQuantity() {
            var qty = $form.find( 'input[name="quantity"]' ).val();
            return qty ? parseInt( qty ) : 1;
        }
        
        function getAttributes() {
            var attrs = {};
            if ( ! isVariable ) return attrs;
            $form.find( 'select' ).each( function() {
                var name = $( this ).attr( 'name' );
                if ( name && name.indexOf( 'attribute_' ) === 0 ) {
                    attrs[ name ] = $( this ).val();
                }
            } );
            return attrs;
        }
        
        function buildCheckoutUrl() {
            var checkoutUrl = '<?php echo esc_url( wc_get_checkout_url() ); ?>';
            var quantity = getQuantity();
            var finalProductId = productId;
            
            if ( isVariable ) {
                var variationId = getVariationId();
                if ( ! variationId ) {
                    return '';
                }
                finalProductId = variationId;
            }
            
            var url = checkoutUrl + '?add-to-cart=' + finalProductId + '&quantity=' + quantity;
            var attrs = getAttributes();
            for ( var key in attrs ) {
                if ( attrs[ key ] ) {
                    url += '&' + encodeURIComponent( key ) + '=' + encodeURIComponent( attrs[ key ] );
                }
            }
            return url;
        }
        
        $btn.on( 'click', function( e ) {
            e.preventDefault();
            if ( isVariable && $btn.prop( 'disabled' ) ) {
                return;
            }
            var url = buildCheckoutUrl();
            if ( url ) {
                window.location.href = url;
            } else {
                alert( '请先选择完整的产品选项' );
            }
        } );
        
        if ( isVariable ) {
            $form.on( 'found_variation', function( event, variation ) {
                $btn.prop( 'disabled', false );
            } ).on( 'hide_variation', function() {
                $btn.prop( 'disabled', true );
            } );
        }
    } );
    </script>
    <style>
    /* ========== 方案：直接控制按钮间距，不依赖父容器 ========== */
    /* 1. 让两个按钮在同一行（如果主题强制换行，则覆盖） */
    form.cart .single_add_to_cart_button,
    .variations_form .single_add_to_cart_button {
        display: inline-block !important;
        float: none !important;
        vertical-align: middle;
    }
    .buy-now-button {
        display: inline-block !important;
        float: none !important;
        vertical-align: middle;
    }
    
    /* 2. 关键：给“马上购买”按钮添加左边距（间距可调） */
    .buy-now-button {
        margin-left: 5px !important;   /* 可修改数值：15px, 20px, 30px */
    }
    
    /* 3. 两个按钮等宽（可选，保持视觉一致） */
    form.cart .single_add_to_cart_button,
    .variations_form .single_add_to_cart_button,
    .buy-now-button {
        text-align: center;
        box-sizing: border-box;
    }
    
    /* 4. 移动端：按钮占满宽度，取消左边距，改为上边距 */
    @media (max-width: 768px) {
        .single_add_to_cart_button,
        .buy-now-button {
            display: block !important;
            width: 100% !important;
            margin: 0 0 10px 0 !important;
        }
        .buy-now-button {
            margin-left: 0 !important;
            margin-top: 0 !important;
        }
    }
    </style>
    <?php
}

OK，教程就完成了。祝大家好运，祝大家大卖！