[WooCommerce] 商品頁快速結帳按鈕功能

這主題是 WordPress 一月聚會分享的,算是 WooCommerce 小技巧篇!用在行銷上,可以讓購物車功能整合銷售頁、登陸頁很方便!

功能如上圖的「直接購買」按鈕,點下去就直接到結帳頁面不過購物車流程不囉唆~

優點自然就是不要讓人對於消費流程有一點困擾或是不清楚,盡快結帳就對惹!

原理是利用網址帶入「add-to-cart」變數與產品編號參數值,告訴 WooCommerce 加入商品於購物車中,範例如下:

https://www.mxp.tw/checkout/?add-to-cart=123

解讀:「123」假設就是我的商品編號,執行「add-to-cart」加入購物車的動作,並且前往「/checkout」頁面

那既然有「加入購物車」的神秘變數,還有其他的嗎? 有!

加入購物車的數量:quantity 範例:https://www.mxp.tw/checkout/?add-to-cart=123&quantity=2 (加入 2 組 123 編號的商品)

如果看到這邊還不知道商品編號「123」怎麼找到的,請前往「商品」頁面看列表中商品名稱下一行,會有個 ID:xxx xxx 就是了~

其他像是變化商品也是可以使用,更多介紹歡迎看這篇終極指南,寫得很詳細!我就不多說了。

最後,補上針對商品內頁的這個功能化程式,讓商品內頁就可以自成一個銷售頁,看到喜歡就可以直接購買。

<?php
function mxp_woocommerce_after_add_to_cart_button() {
    $checkout_url = wc_get_checkout_url();
    echo '<div id="mxp_quick_checkout"><a href="' . $checkout_url . '?add-to-cart=' . get_queried_object_id() . '" class="button alt">直接結帳</a></div>';
    ?>
<script>
jQuery(document).ready(function() {
    var v_product = jQuery('form.variations_form.cart').data();
    if (v_product === undefined) {
        return;
    }
    var p_vdata = v_product.product_variations;
    var p_id = v_product.product_id;
    var keys = [];
    for (var i = 0; i < p_vdata.length; i++) {
        var e = p_vdata[i];
        var attrs = e.attributes;
        var v_id = e.variation_id;

        for (var key in attrs) {
            var index = key;
            var data = attrs[key];
            keys[index] = 1;
        }
    }
    jQuery('#mxp_quick_checkout>a').attr('href', 'javascript:');
    jQuery('#mxp_quick_checkout').click(function() {
        //掃描現在的選擇
        var pass = true;
        for (var check in keys) {
            if (jQuery('select[name="' + check + '"]').val() == "") {
                pass = false;
            }
        }
        if (pass){
        var form = jQuery('form.variations_form.cart');
        form.attr('action', '/checkout/');
        form.submit();
    } else {
        alert('請先選擇項目!');
    }});
});
</script>
<?php
}
add_action('woocommerce_after_add_to_cart_button', 'mxp_woocommerce_after_add_to_cart_button');

Gist: Link

上述程式碼片段,放在主題中的 functions.php 裡就會有效果。(記得確認有安裝 WooCommerce 外掛)。

功能面,一般商品就不用特別解釋了。對於變化商品會偵測選項是否有選,都做出選擇後點擊就會直接過去結帳,否則會彈出訊息警告!

看得懂程式碼的人可以自行設計過符合自己使用的工具拉! 有任何不錯的想法或是建議都歡迎留言跟我說~

Facebook 外掛整合


Share: