在WooCommerce购物车页面添加折扣复选框并应用固定折扣

DDD

发布时间：2025-10-04 12:39:32

788人浏览过

来源于php中文网

原创

在WooCommerce购物车页面添加折扣复选框并应用固定折扣

本教程详细指导如何在WooCommerce购物车页面添加一个自定义复选框，当用户选中时应用一个固定金额折扣，取消选中时移除折扣。文章涵盖了前端复选框的集成、JavaScript交互逻辑、后端PHP折扣计算与会话管理，以及如何确保折扣在购物车、结算页、迷你购物车、订单邮件及管理员后台订单详情中正确显示和处理，旨在提供一个完整且专业的解决方案。

在woocommerce商店中，为用户提供额外的折扣选项可以有效提升转化率。本教程将引导您实现一个功能，即在购物车页面添加一个复选框，允许用户选择是否应用一个预设的固定金额折扣。此方案确保折扣能实时更新并正确反映在整个购物流程中，包括迷你购物车、结算页、订单邮件，并能在管理员后台的订单详情中清晰展示。

1. 添加折扣复选框到购物车页面

首先，我们需要在购物车总计区域添加一个复选框。这可以通过使用WooCommerce提供的woocommerce_cart_totals_before_shipping动作钩子来实现。

将以下代码添加到您的主题的functions.php文件或自定义插件中：

/**
 * 1. 在购物车总计区域添加自定义折扣复选框
 */
add_action('woocommerce_cart_totals_before_shipping', 'my_custom_discount_checkbox');
function my_custom_discount_checkbox() {
    // 检查当前会话中是否已应用折扣，以保持复选框状态
    $checked = WC()->session->get('apply_fixed_discount') ? 'checked' : '';

    // 输出复选框的HTML结构
    echo '';
    echo '' . __('应用固定折扣', 'your-text-domain') . '';
    echo '';
    echo '';
    echo '';
    echo '';
}

代码解释：

add_action('woocommerce_cart_totals_before_shipping', ...): 将我们的函数挂载到购物车总计表格中运费计算之前的位置。
WC()->session->get('apply_fixed_discount'): 检查用户会话中是否设置了应用折扣的标志，以便在页面刷新时保持复选框的选中状态。
id="apply_fixed_discount": 这是复选框的关键标识符，JavaScript将通过它来监听状态变化。
__('应用固定折扣', 'your-text-domain'): 使用文本域进行国际化，方便翻译。

2. 后端处理折扣逻辑

接下来，我们需要在后端根据复选框的状态来实际应用或移除折扣。我们将使用woocommerce_cart_calculate_fees钩子来添加一个负数费用（即折扣）。

/**
 * 2. 根据会话变量应用/移除固定折扣
 */
add_action('woocommerce_cart_calculate_fees', 'my_apply_fixed_discount_fee', 10, 1);
function my_apply_fixed_discount_fee($cart) {
    // 避免在管理后台或非AJAX请求中重复计算
    if (is_admin() && !defined('DOING_AJAX')) {
        return;
    }

    // 检查会话中是否设置了应用折扣的标志
    if (WC()->session->get('apply_fixed_discount')) {
        $fixed_discount_amount = 20; // 定义您的固定折扣金额，例如20元
        // 添加一个负数费用作为折扣
        $cart->add_fee(__('固定折扣', 'your-text-domain'), -$fixed_discount_amount, true, 'discount');
    }
}

代码解释：

add_action('woocommerce_cart_calculate_fees', ...): 在WooCommerce计算购物车费用时触发我们的函数。
is_admin() && !defined('DOING_AJAX'): 这是一个重要的检查，防止在WordPress管理后台或非AJAX请求中不必要的执行，避免潜在的冲突。
$fixed_discount_amount = 20;: 您可以在此处自定义您的固定折扣金额。
$cart->add_fee(__('固定折扣', 'your-text-domain'), -$fixed_discount_amount, true, 'discount');: 这是应用折扣的核心。add_fee方法用于添加费用，传入负值即可实现折扣效果。true表示该费用是可税的（如果您的商店设置了税费），'discount'是费用类型标识符。

3. 使用JavaScript处理复选框状态与AJAX更新

为了实现用户选中/取消选中复选框时实时更新购物车总计，我们需要使用JavaScript监听复选框的变化，并通过AJAX请求将状态发送到后端。

3.1 注册并加载JavaScript文件

首先，我们需要注册并加载我们的JavaScript文件。

唱鸭

音乐创作全流程的AI自动作曲工具，集 AI 辅助作词、AI 自动作曲、编曲、混音于一体

下载

/**
 * 3.1 注册并加载JavaScript文件
 */
add_action('wp_enqueue_scripts', 'my_enqueue_discount_checkbox_script');
function my_enqueue_discount_checkbox_script() {
    // 仅在购物车和结算页面加载脚本
    if (is_cart() || is_checkout()) {
        // 确保您的JS文件位于主题或插件的 /js/ 目录下
        wp_enqueue_script('discount-checkbox-script', plugins_url('/js/discount-checkbox.js', __FILE__), array('jquery', 'wc-cart'), null, true);
        // 将AJAX URL和nonce传递给JavaScript
        wp_localize_script('discount-checkbox-script', 'my_ajax_object', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce'    => wp_create_nonce('discount_checkbox_nonce') // 创建一个安全nonce
        ));
    }
}

代码解释：

plugins_url('/js/discount-checkbox.js', __FILE__): 假设您的JavaScript文件名为discount-checkbox.js，并且位于您的插件或主题根目录下的js文件夹中。
array('jquery', 'wc-cart'): 确保在我们的脚本之前加载jQuery和WooCommerce的购物车脚本。
wp_localize_script(): 用于将PHP变量（如AJAX URL和安全nonce）安全地传递给JavaScript。

3.2 JavaScript交互逻辑 (js/discount-checkbox.js)

在您的主题或插件的js文件夹中创建discount-checkbox.js文件，并添加以下内容：

jQuery(document).ready(function($) {
    // 监听复选框的change事件
    $(document.body).on('change', '#apply_fixed_discount', function() {
        var isChecked = $(this).is(':checked'); // 获取复选框的当前状态

        // 发送AJAX请求到后端
        $.ajax({
            type: 'POST',
            url: my_ajax_object.ajax_url, // 从wp_localize_script获取AJAX URL
            data: {
                action: 'update_discount_checkbox_state', // 后端处理的动作名称
                apply_discount: isChecked,
                nonce: my_ajax_object.nonce // 安全nonce
            },
            success: function(response) {
                if (response.success) {
                    // 触发WooCommerce的购物车更新事件，刷新购物车片段
                    $(document.body).trigger('wc_update_cart');
                    console.log('折扣复选框状态已更新，购物车已刷新。');
                } else {
                    console.error('AJAX Error:', response.data);
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX Request Failed:', status, error);
            }
        });
    });
});

代码解释：

$(document.body).on('change', '#apply_fixed_discount', function() { ... });: 使用事件委托监听复选框的change事件，确保即使购物车内容通过AJAX更新，事件监听器也能正常工作。
$.ajax({...}): 发送POST请求到admin-ajax.php。
action: 'update_discount_checkbox_state': 这是后端将处理的自定义AJAX动作。
apply_discount: isChecked: 将复选框的布尔状态发送到后端。
nonce: my_ajax_object.nonce: 发送安全nonce以验证请求的合法性。
$(document.body).trigger('wc_update_cart');: 这是关键！它会触发WooCommerce的内置机制，通过AJAX获取更新后的购物车片段并刷新购物车UI，包括总计、迷你购物车等。

4. 后端AJAX处理函数

最后，我们需要在后端创建一个PHP函数来处理来自JavaScript的AJAX请求。此函数将更新会话中的折扣状态，并重新计算购物车总计。

/**
 * 4. 后端AJAX处理函数：更新会话中的折扣状态
 */
add_action('wp_ajax_update_discount_checkbox_state', 'my_update_discount_checkbox_state_callback');
add_action('wp_ajax_nopriv_update_discount_checkbox_state', 'my_update_discount_checkbox_state_callback');
function my_update_discount_checkbox_state_callback() {
    // 安全验证：检查nonce
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'discount_checkbox_nonce')) {
        wp_send_json_error('权限不足！'); // 返回错误信息
    }

    $apply_discount = isset($_POST['apply_discount']) && $_POST['apply_discount'] === 'true';

    // 更新会话变量
    WC()->session->set('apply_fixed_discount', $apply_discount);

    // 重新计算购物车总计，以便后续wc_update_cart能获取到正确的数据
    WC()->cart->calculate_totals();

    wp_send_json_success(); // 返回成功响应
}

代码解释：

add_action('wp_ajax_update_discount_checkbox_state', ...): 为已登录用户注册AJAX动作。
add_action('wp_ajax_nopriv_update_discount_checkbox_state', ...): 为未登录用户注册AJAX动作。
wp_verify_nonce($_POST['nonce'], 'discount_checkbox_nonce'): 验证请求的安全性，防止CSRF攻击。
WC()->session->set('apply_fixed_discount', $apply_discount);: 将复选框的最新状态存储在WooCommerce会话中，确保折扣状态在不同页面间持久化。
WC()->cart->calculate_totals();: 强制WooCommerce重新计算购物车总计。这是非常关键的一步，它会触发woocommerce_cart_calculate_fees钩子，从而根据新的会话状态应用或移除折扣。
wp_send_json_success(): 发送一个标准的JSON成功响应给前端。

注意事项与总结

代码位置： 强烈建议将所有PHP代码放入一个自定义插件中，而不是直接修改主题的functions.php。这样可以避免主题更新时代码丢失，并提高代码的可移植性。如果您选择在functions.php中添加，请确保是在子主题中进行。
固定折扣金额： 在my_apply_fixed_discount_fee函数中，您可以修改$fixed_discount_amount变量来设置您想要的固定折扣金额。
文本域： 记得将`'your-text-