本篇文章更新時間：2022/09/12
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知或向一介資男的 LINE 社群反應。
如果本站內容對你有幫助，歡迎贊助支持 。
這主題是 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 就是了～
其他像是變化商品也是可以使用，更多介紹歡迎看這篇 終極指南，寫得很詳細！我就不多說了。
最後，補上針對商品內頁的這個功能化程式，讓商品內頁就可以自成一個銷售頁，看到喜歡就可以直接購買。
function mxp_woocommerce_after_add_to_cart_button() {
global $woocommerce;
$checkout_url = $woocommerce->cart->get_checkout_url();
echo '<div id="ks_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 v_pricing_key = [];
for (var i = 0; i < p_vdata.length; i++) {
var e = p_vdata[i];
var attrs = e.attributes;
var v_id = e.variation_id;
var subkey = [];
for (var key in attrs) {
var index = key;
var data = attrs[key];
if (data != "") {
vpush = { v_id: v_id, v_v: data, v_key: index, p_id: p_id };
} else {
subkey.push(index);
}
}
vpush.sub = subkey;
v_pricing_key.push(vpush);
}
// console.log(v_pricing_key);
jQuery('#ks_quick_checkout>a').attr('href', 'javascript:');
jQuery('#ks_quick_checkout').click(function() {
//掃描現在的選擇
for (var i = 0; i < v_pricing_key.length; i++) {
var v = v_pricing_key[i];
if (jQuery('select[name="' + v.v_key + '"]').val() == "") {
alert('請先選擇項目！');
return;
}
if (jQuery('select[name="' + v.v_key + '"]').val() == v.v_v) {
var vkey = decodeURI(v.v_key.split('_').join('_pa_'));
var checkout_url = '/checkout/?add-to-cart=' + v.p_id + '&variation_id=' + v.v_id + '&' + vkey + '=' + encodeURI(v.v_v) + '&';
for (var j = 0; j < v.sub.length; j++) {
var other_attr = v.sub[j];
if (jQuery('select[name="' + other_attr + '"]').val() == "") {
alert('請先選擇項目！');
return;
}
checkout_url += decodeURI(other_attr.split('_').join('_pa_')) + '=' + encodeURI(jQuery('select[name="' + other_attr + '"]').val());
}
// console.log(checkout_url);
}
}
var form = jQuery('form.variations_form.cart');
form.attr('action', '/checkout/');
form.submit();
});
});
</script>
<?php
}
add_action('woocommerce_after_add_to_cart_button', 'mxp_woocommerce_after_add_to_cart_button');Gist: Link
上述程式碼片段，放在主題中的 functions.php 裡就會有效果。（記得確認有安裝 WooCommerce 外掛）。
功能面，一般商品就不用特別解釋了。對於變化商品會偵測選項是否有選，都做出選擇後點擊就會直接過去結帳，否則會彈出訊息警告！
看得懂程式碼的人可以自行設計過符合自己使用的工具拉！ 有任何不錯的想法或是建議都歡迎留言跟我說～