WooCommerce：如果我将优惠券包装在折叠元素中，则优惠券在购物车中不起作用答案

【问题标题】：WooCommerce: Coupon doens't work in cart if I wrap it in collapse elementWooCommerce：如果我将优惠券包装在折叠元素中，则优惠券在购物车中不起作用
【发布时间】：2020-07-27 08:21:51
【问题描述】：

我想隐藏购物车中的优惠券字段。为此，我将其包装在 Bootstrap 折叠元素中，并将 display:none 添加到现有的优惠券字段中。

编辑：在@gael (WooCommerce: Coupon doens't work in cart if I wrap it in collapse element) 发表评论后，我发现如果我在模板的其他位置显示该表单，它就可以工作。但是现在它不再显示任何成功或错误消息了？！

这是我的代码：

<?php

add_action( 'woocommerce_after_cart_table', 'display_coupon_form_below_proceed_checkout', 50 );

function display_coupon_form_below_proceed_checkout() {
   ?>

    <small><a class="text-muted" data-toggle="collapse" href="#collapseCartCoupon" role="button" aria-expanded="false" aria-controls="collapseCartCoupon"><?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?></a></small>

        <form class="woocommerce-coupon-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
            <div class="collapse" id="collapseCartCoupon">
            <?php if ( wc_coupons_enabled() ) { ?>
            <div class="coupon under-proceed">
                <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" style="width: 100%" />
                <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>" style="width: 100%"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>
            </div>
            <?php } ?>
            </div>
        </form>

    <style>
        .woocommerce table.shop_table .coupon {display: none !important;}
    </style>
    <?php
}

【问题讨论】：

您需要在产品列表下有优惠券表格还是可以将其移动到页面的其他位置？
其实我是想把它移到桌子底下
奇怪，事实上它在woocommerce_after_cart_table 中不起作用。优惠券代码适用于woocommerce_after_cart_contents，但可折叠显示在购物车表的顶部。还有woocommerce_proceed_to_checkout，但它仍然没有显示在所需的位置。我工作的主题确实为此创建了一个特定的 WooCommerce cart.php。如果你愿意，我可以给你 sn-p 作为答案。
奇怪。一个 sn-p 会很棒。
@gael，你说得对，如果我在模板的其他地方显示它就可以了。但是现在它不再显示任何成功或错误消息了？！

标签： php wordpress woocommerce bootstrap-4 coupon

【解决方案1】：

我会覆盖 WooCommerce 上的购物车页面以将优惠券包装在折叠元素中。

可以通过将文件从wp-content/plugins/woocommerce/templates/cart/cart.php 复制到wp-content/themes/yourtheme/woocommerce/cart/cart.php 来覆盖此模板。

然后从 WooCommerce v4 的第 142 行到第 150 行，您可以像这样插入您的 sn-p：

<?php if ( wc_coupons_enabled() ) { ?>
    <small><a class="text-muted" data-toggle="collapse" href="#collapseCartCoupon" role="button" aria-expanded="false" aria-controls="collapseCartCoupon"><?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?></a></small>
    <div class="coupon collapse"  id="collapseCartCoupon">
        <label for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label> <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>
        <?php do_action( 'woocommerce_cart_coupon' ); ?>
    </div>
<?php } ?>

由于我的主题已经在使用 Bootstrap，collapse 类已经隐藏了整个 div，所以我不必添加你的内联样式。

我进行了测试以将其移至桌子下方的新<tr> 并且优惠券代码仍然有效。我想它只需要在<form>...</form> 内就可以使用。

另请注意模板文件顶部来自 WooCommerce 的警告：

 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.

【讨论】：