更接近一頁式的結帳比較不像詐騙
隨著電子商務網站的日益普及，提供流暢且無障礙的購物體驗變得極其重要。特別是在 WooCommerce 這樣的平台上，這樣做的目的是簡化購物流程，確保使用者在結帳前必須有選擇商品，可以顯著改善購物體驗並減少購物車放棄率。本文將透過一個簡單的例子，說明如何在 WooCommerce 購物車空的時候禁止結帳並且發出警告通知使用者要選購商品才能進結帳頁。
首先，這個功能是通過在 WordPress 主題的 functions.php 檔案或 Code Snippet 中添加特定的程式碼實現的。以下是實現這一功能的步驟和程式碼：
註冊 Ajax 操作
add_action('wp_ajax_check_cart_contents', 'check_cart_contents');
add_action('wp_ajax_nopriv_check_cart_contents', 'check_cart_contents');
function check_cart_contents() {
if (WC()->cart->is_empty()) {
echo 'empty';
} else {
echo 'not_empty';
}
wp_die(); // 結束 Ajax 請求
}
這段程式碼註冊了一個 Ajax 操作，允許我們檢查 WooCommerce 購物車是否為空。當購物車是空的時候，它會回應 'empty' 字串；否則，它回應 'not_empty'。
前端 JavaScript 處理
接下來，我們需要在網站前端添加一些 JavaScript，以便在使用者嘗試進行結帳時執行這個檢查：
jQuery(document).ready(function($) {
$('body').on('click', 'a[href$="/checkout/"], button.checkout', function(e) {
e.preventDefault(); // 先阻止默認行為
var href = $(this).attr('href'); // 獲取連結的 URL
// 使用 Ajax 檢查購物車是否為空
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
data: {
'action': 'check_cart_contents'
},
success: function(response) {
if (response == 'empty') {
alert('您的購物車是空的。請先加入一些商品再進行結帳。');
} else {
window.location.href = href; // 購物車不為空時進行跳轉
}
}
});
});
});這段程式碼會攔截所有指向結帳頁面的點擊行為，並使用 Ajax 請求檢查購物車的內容。如果購物車為空，則顯示一個警告訊息；如果不是空的，則允許進行結帳。
運作原理
這個解決方案的運作原理基於 Ajax 請求和 WordPress 鉤子系統。當使用者嘗試進行結帳時，我們透過 Ajax 向後端發送一個請求，後端則檢查 WooCommerce 購物車的狀態。根據購物車是否為空，後端回應不同的結果，前端根據這個回應決定是否允許使用者進行結帳。
透過這種方法，我們可以在不影響網站性能的同時，提供一個更好的使用者體驗。此外，這種方法的好處是可以輕鬆地在任何 WooCommerce 網站上實現，而不需要依賴特定的外掛。
希望這篇文章能幫助您改善 WooCommerce 網站的使用者體驗，並確保顧客在結帳前已經選擇了商品。如有任何問題或需要進一步的幫助，請隨時聯繫我們。
