如何在WooCommerce的PHP函数else分支中运行CSS与jQuery？

首先得明确：woocommerce_before_calculate_totals是一个后端运行的钩子，它负责计算购物车总额，运行时机还在页面渲染的早期阶段。你不能直接在这个钩子的else分支里写CSS或jQuery代码——直接输出的话会破坏页面结构，导致前端代码出现在错误的位置（比如购物车的JSON数据里）。

正确的思路是：后端判断状态（无优惠券），然后传递这个状态到前端，再由前端代码执行样式或JS逻辑。下面给你两种可行的方案：

方案一：添加自定义Body类（推荐） #

这种方式更符合WordPress的开发规范，把样式和JS逻辑和后端逻辑解耦。

1. 修改你的PHP函数，添加Body类 #

add_action( 'woocommerce_before_calculate_totals', 'adding_custom_price', 10, 1);
function adding_custom_price( $cart ) {
    // 防止钩子重复触发（WooCommerce会多次调用这个钩子）
    if ( did_action( 'woocommerce_before_calculate_totals' ) >= 2 ) {
        return;
    }

    // 判断购物车是否无优惠券
    $has_no_coupons = empty(WC()->cart->applied_coupons);
    
    if ( $has_no_coupons ) {
        // 添加一个过滤器，给body标签加自定义类
        add_filter( 'body_class', 'add_no_coupon_body_class' );
    }
}

// 定义添加body类的函数
function add_no_coupon_body_class( $classes ) {
    $classes[] = 'no-applied-coupons';
    return $classes;
}

2. 编写CSS样式 #

在你的主题样式文件（比如style.css）或者自定义CSS面板中添加：

/* 当无优惠券时，给目标元素加样式 */
.no-applied-coupons .cart-totals {
    background-color: #fff3f3;
    border: 1px solid #ff6b6b;
    padding: 1rem;
}

.no-applied-coupons .product-price {
    color: #dc3545;
}

3. 编写jQuery代码 #

在主题的自定义JS文件中（或者通过wp_enqueue_script加载的JS文件）添加：

jQuery(document).ready(function($) {
    // 检查body是否有我们添加的类
    if ( $('body').hasClass('no-applied-coupons') ) {
        // 执行你的自定义逻辑
        $('.cart-empty-message').append('<p class="coupon-prompt">💡 使用优惠券可享受额外折扣哦！</p>');
        
        // 比如添加一个动画效果
        $('.cart-totals').slideUp(300).slideDown(300);
    }
});

方案二：直接输出内联样式和脚本 #

如果你的需求比较简单，也可以通过后端直接输出前端代码，但要确保代码输出到正确的页面位置（比如页面底部）：

add_action( 'woocommerce_before_calculate_totals', 'adding_custom_price', 10, 1);
function adding_custom_price( $cart ) {
    if ( did_action( 'woocommerce_before_calculate_totals' ) >= 2 ) {
        return;
    }

    $has_no_coupons = empty(WC()->cart->applied_coupons);
    
    if ( $has_no_coupons ) {
        // 用wp_footer钩子输出代码，确保在页面底部加载
        add_action( 'wp_footer', 'output_no_coupon_frontend_code' );
    }
}

function output_no_coupon_frontend_code() {
    ?>
    <!-- 输出自定义CSS -->
    <style>
        .cart-totals {
            background-color: #fff3f3;
            border: 1px solid #ff6b6b;
        }
    </style>

    <!-- 输出自定义jQuery -->
    <script>
        jQuery(document).ready(function($) {
            alert('您当前没有使用优惠券，建议领取优惠券后再结算！');
            $('.coupon-field').addClass('highlight');
        });
    </script>
    <?php
}

关键注意事项 #

• 一定要加did_action的判断：woocommerce_before_calculate_totals钩子在WooCommerce中会被多次触发，不加判断会导致重复添加钩子或输出多次代码。
• 不要直接在woocommerce_before_calculate_totals里输出HTML/CSS/JS：这个钩子的输出会被混入购物车的计算流程中，导致页面结构错误或AJAX请求失败。

内容的提问来源于stack exchange，提问作者PHCoder