免外掛, 在Woocommerce內加入一鍵結帳按鈕

一鍵結帳的好處

現今,因為網路的發達,許多購物網站平台盛行,以大多數正常的購物流程來說都是選好商品 > 加入購物車 > 填寫資料結帳。
然而根據外部調查及展躍網頁設計團隊研究,越少的流程,越簡單的操作,會大幅增加購買意願這是肯定的!
因此一鍵結帳也是一種趨勢,使顧客少了加入購物車的流程,直接選好要的商品迅速結帳。

如何讓Woocommerce擁有一鍵結帳的功能?

在WordPress裡面,光是一鍵結帳這樣的小功能就有許多廠商會開發這樣的外掛來滿足架設網站的設計師(包含Woocommerce本身也有開發類似的外掛)。
例如: YITH Woocommerce One-Click CheckoutDirect Checkout for WoocommerceCashier 等等..
可是大家都忽略掉一點,Woocommerce的外掛插件裝得越多,等同於開了越多扇門給小偷(駭客)有機會進入,也相對會影響效能
因此,固然達到效果很重要,但網站做得好往往不是只有效果與功能,而是後續維護、效能、資安都需要考慮進去,這也是展躍網頁設計團隊一直在精進的事情。

不想透過外掛,如何簡單加入一鍵結帳?

只要透過簡單的一個魔法,就是將下列語法複製貼上到你WordPress網站後台的外觀 > 佈景主題編輯器 > functions.php內貼上。

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );
function addOneClickCheckoutBtn() {
    // 取得商品ID
    $current_product_id = get_the_ID();
    // 依據商品ID取得商品
    $product = wc_get_product( $current_product_id );
    // 取得結帳網址
    $checkout_url = WC()->cart->get_checkout_url();
    // 只在簡單商品中運行
    if( $product->is_type( 'simple' ) ){
        ?>
        <script>
            jQuery(function($) {
                   $(".custom-checkout-btn").on("click", function() 
                    {
                       $(this).attr("href", function() 
                        {
                            return this.href + '&quantity=' + $('input.qty').val();
                        });
                    });?>
            });
        </script>
        <style>
        .raiseup_one_click_checkout_btn {
            margin: 0px 1em !important;
        }
        </style>
        <?php
        echo '<a href="'.$checkout_url.'?add-to-cart='.$current_product_id.'" class="single_add_to_cart_button button raiseup_one_click_checkout_btn">直接結帳</a>';
    }
}
add_action( 'woocommerce_after_add_to_cart_button', 'addOneClickCheckoutBtn' );

這樣就大功告成囉!
woocommerce直接結帳按鈕範例

相關文章