WooCommerce: купон не будет работать в корзине, если я оберну его в элемент свернуть

Question

Я хочу скрыть поле купона в корзине. Для этого я обернул его в элемент свертки Bootstrap и добавил display:none к существующему полю купона.

РЕДАКТИРОВАТЬ: после комментария от @gael ( WooCommerce: Coupon doens ' Если я заверну его в элемент свернутого элемента ), я понял, что форма работает, если я покажу его в других местах шаблона. Но теперь он больше не показывает никаких сообщений об ошибках или ошибках?!

Вот мой код:

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

* 1006. * Затем из строки 142-150 в WooCommerce v4 вы можете вставить свой фрагмент следующим образом:

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