WooCommerce：如果我将优惠券包裹在折叠元素中，则优惠券无法在购物车中使用

Question

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

编辑：在@gael 发表评论后（WooCommerce：如果我将优惠券包裹在折叠元素中，优惠券将无法在购物车中使用），我发现，如果我在模板的其他位置显示该表单，则该表单有效。但是现在它不再显示任何成功或错误消息了？！

这是我的代码：

<?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

}

Answer 1

我会覆盖 WooCommerce 上的购物车页面，以将优惠券包装在折叠元素中。可以通过将文件从模板复制wp-content/plugins/woocommerce/templates/cart/cart.php到wp-content/themes/yourtheme/woocommerce/cart/cart.php.然后从 WooCommerce v4 中的第 142 行到第 150 行，您可以像这样插入您的代码段：<?php if ( wc_coupons_enabled() ) { ?>&nbsp; &nbsp; <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>&nbsp; &nbsp; <div class="coupon collapse"&nbsp; id="collapseCartCoupon">&nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; <?php do_action( 'woocommerce_cart_coupon' ); ?>&nbsp; &nbsp; </div><?php } ?>由于我的主题已经在使用 Bootstrap，collapse该类已经隐藏了整个 div，因此我不必添加您的内联样式。我确实测试过将它移到新<tr>的桌子底下，优惠券代码仍然有效。我想它只需要在里面<form>...</form>就可以使用。另请注意模板文件顶部来自 WooCommerce 的警告：&nbsp;* HOWEVER, on occasion WooCommerce will need to update template files and you&nbsp;* (the theme developer) will need to copy the new files to your theme to&nbsp;* maintain compatibility. We try to do this as little as possible, but it does&nbsp;* happen. When this occurs the version of the template file will be bumped and&nbsp;* the readme will list any important changes.