WooCommerce移优惠券字段至cart-totals.php后按钮失效求助

嘿，作为WooCommerce新手碰到这种情况太正常啦！你把优惠券字段从cart.php挪到cart-totals.php后按钮失效，核心问题确实是缺了处理优惠券提交的必要JS和验证逻辑——毕竟cart.php里默认自带这些依赖，而cart-totals.php没自动加载~ 下面给你几个靠谱的解决办法：

1. 先补全完整的优惠券表单代码 #

你提供的代码片段不全，先把表单补全（包含必要的表单结构和安全验证字段）：

<?php if ( wc_coupons_enabled() ) { ?>
    <div class="coupon">
        <h2>Aplica tu descuento exclusivo</h2>
        <div class="text-box-cupon">Si esta es tu segunda compra no olvides de usar tu cupon de descuento exlusivo.</div>
        <!-- 完整的优惠券表单 -->
        <form class="checkout_coupon woocommerce-form-coupon" method="post" style="display:block">
            <!-- 添加WooCommerce安全验证nonce -->
            <?php wp_nonce_field( 'woocommerce-apply-coupon', 'woocommerce-apply-coupon-nonce' ); ?>
            <p>
                <input type="text" name="coupon_code" class="input-text" placeholder="<?php esc_attr_e( 'Código de cupón', 'woocommerce' ); ?>" id="coupon_code" value="" />
                <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Aplicar cupón', 'woocommerce' ); ?>"><?php esc_html_e( 'Aplicar cupón', 'woocommerce' ); ?></button>
            </p>
        </form>
    </div>
<?php } ?>

2. 添加优惠券提交的JS处理逻辑 #

cart-totals.php默认没加载处理优惠券提交的JS，你可以在表单后面加上这段代码，用来处理表单提交时的加载状态和请求：

<?php
if ( wc_coupons_enabled() ) {
    wc_enqueue_js( "
        jQuery( function( $ ) {
            // 监听优惠券表单提交事件
            $( 'form.checkout_coupon' ).on( 'submit', function() {
                // 提交时给购物车总计区域添加加载遮罩
                $( 'div.cart_totals' ).block({
                    message: null,
                    overlayCSS: {
                        background: '#fff',
                        opacity: 0.6
                    }
                });
            });
        });
    " );
}
?>

3. 更稳妥的方式：用WooCommerce钩子添加字段 #

直接硬编码到模板容易漏依赖，推荐用WooCommerce的钩子woocommerce_before_cart_totals来添加优惠券字段，这样系统会自动处理所有必要的依赖（JS、验证逻辑等），还能避免以后模板更新时你的修改被覆盖。

把这段代码放到你的子主题functions.php里就行：

add_action( 'woocommerce_before_cart_totals', 'custom_add_coupon_field_to_cart_totals' );
function custom_add_coupon_field_to_cart_totals() {
    if ( wc_coupons_enabled() ) { ?>
        <div class="coupon">
            <h2>Aplica tu descuento exclusivo</h2>
            <div class="text-box-cupon">Si esta es tu segunda compra no olvides de usar tu cupon de descuento exlusivo.</div>
            <form class="checkout_coupon woocommerce-form-coupon" method="post" style="display:block">
                <?php wp_nonce_field( 'woocommerce-apply-coupon', 'woocommerce-apply-coupon-nonce' ); ?>
                <p>
                    <input type="text" name="coupon_code" class="input-text" placeholder="<?php esc_attr_e( 'Código de cupón', 'woocommerce' ); ?>" id="coupon_code" value="" />
                    <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Aplicar cupón', 'woocommerce' ); ?>"><?php esc_html_e( 'Aplicar cupón', 'woocommerce' ); ?></button>
                </p>
            </form>
        </div>
    <?php }
}

用钩子的方式不仅能解决按钮失效的问题，还能让你的代码更符合WooCommerce的开发规范，对新手来说更省心~

内容的提问来源于stack exchange，提问作者Elizabeth parodi roman