Php 将优惠券表格移至WooCommerce结帐中的付款部分之前

我想将结帐时的优惠券字段移至付款前的

woocommerce\u review\u order\u

hook

将优惠券字段放在页面顶部会对转换产生负面影响，因为用户会立即尝试查找优惠券代码，如果找不到则放弃签出

我在网上看到，这并不是那么简单，因为优惠券字段也是一种表单。将优惠券字段放置在结帐表单中的任何位置都会导致“应用优惠券”提交订单表单，而不是应用优惠券

我也在网上读到有解决这个问题的有效方法。但是，即使人们多年来一直在问这个问题，也没有关于如何做到这一点的教程

---

有人能提供一个关于如何正确移动优惠券字段并一劳永逸地结束此问题的分步教程吗？

您可以修改答案代码之类的内容，但由于许多原因，它不起作用

重新访问更新的答案（与WooCommerce默认答案一样，没有Ajax简化）：

//只需隐藏默认优惠券字段
添加操作（'woocommerce\u before\u checkout\u form'，'hide\u checkout\u优惠券\u form'，5）；
函数隐藏\签出\优惠券\表单（）{
echo'.woocommerce表单优惠券切换{display:none；}'；
}
//在结帐付款部分之前添加自定义优惠券字段
添加操作（“付款前woocommerce检查订单”、“woocommerce结帐、优惠券、表格、定制”）；
功能商业\结帐\优惠券\表格\定制（）{
回音(
__（“有优惠券吗？%s”），“
) . '';
回声'
“.”（“如果您有优惠券代码，请在下面应用。”）




“申请优惠券”

';
}
//jQuery代码
添加操作（'wp\u footer'，'custom\u checkout\u jquery\u script'）；
函数自定义\u签出\u jquery\u脚本（）{
如果（is_checkout（）&&！is_wc_endpoint_url（））：
?>
jQuery（函数（$）{
$（'.优惠券表单'）.css（“显示”，“无”）；//确保优惠券字段已隐藏
//显示或隐藏优惠券字段
$（'.checkout-coupon-toggle.show-coupon'）。打开（'click'，函数（e）{
$（'.优惠券格式'）。切换（200）；
e、 预防默认值（）；
})
//将输入的优惠券代码复制到隐藏的默认优惠券字段
$（'.优惠券表单输入[name=“优惠券代码”]'）。在（'input change'，function（）上{
$（'form.checkout_优惠券输入[name=“优惠券代码”]）.val（$（this.val（））；
//console.log（$（this.val（））；//取消对测试的注释
});
//点击按钮，提交默认优惠券表格
$（'.优惠券表单按钮[name=“apply_优惠券”]'）。在（'单击'，函数（）上）{
$（'form.checkout_优惠券'）。提交（）；
//log（'click:submit form'）；//取消对测试的注释
});
});
您好@LoicTheAztec。谢谢您的回答。该代码目前是您可以在网上找到的解决此问题的最佳方案。但它可能更好。是否可以将优惠券字段设置为手风琴（单击文本显示；再次单击隐藏）？始终打开“优惠券”字段可能会分散很多客户对重要内容的注意力，即填写账单详细信息，因为“优惠券”字段占用了大量屏幕空间。嘿@LoicTheAztec，很抱歉打扰您，但我有一个问题。我如何使优惠券表单的宽度为100%，但将按钮保持在1Line也是。当前，在上，优惠券窗体占宽度的70%，在上，它占宽度的100%，但按钮跳到优惠券字段下方。@LoicTheAztec如果我将优惠券字段的宽度设置为100%，字段会向外延伸，但按钮跳到字段下方，则无论我针对优惠券窗体的哪个元素，它都不会停留在一行中t、 @JOKKER最好提出一个新问题，提供所有相关内容：CSS生成的html摘录、实时链接和清晰的解释（我从未亲自回答与CSS相关的问题）Hi@LoicTheAztec，对于代码的简化版本，是否可以根据优惠券代码是否正确为优惠券表单指定特定的CSS类？
// Just hide default woocommerce coupon field
add_action( 'woocommerce_before_checkout_form', 'hide_checkout_coupon_form', 5 );
function hide_checkout_coupon_form() {
    echo '<style>.woocommerce-form-coupon-toggle {display:none;}</style>';
}


// Add a custom coupon field before checkout payment section
add_action( 'woocommerce_review_order_before_payment', 'woocommerce_checkout_coupon_form_custom' );
function woocommerce_checkout_coupon_form_custom() {
    echo '<div class="checkout-coupon-toggle"><div class="woocommerce-info">' . sprintf(
        __("Have a coupon? %s"), '<a href="#" class="show-coupon">' . __("Click here to enter your code") . '</a>'
    ) . '</div></div>';

    echo '<div class="coupon-form" style="margin-bottom:20px;" style="display:none !important;">
        <p>' . __("If you have a coupon code, please apply it below.") . '</p>
        <p class="form-row form-row-first woocommerce-validated">
            <input type="text" name="coupon_code" class="input-text" placeholder="' . __("Coupon code") . '" id="coupon_code" value="">
        </p>
        <p class="form-row form-row-last">
            <button type="button" class="button" name="apply_coupon" value="' . __("Apply coupon") . '">' . __("Apply coupon") . '</button>
        </p>
        <div class="clear"></div>
    </div>';
}

// jQuery code
add_action( 'wp_footer', 'custom_checkout_jquery_script' );
function custom_checkout_jquery_script() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('.coupon-form').css("display", "none"); // Be sure coupon field is hidden
        
        // Show or Hide coupon field
        $('.checkout-coupon-toggle .show-coupon').on( 'click', function(e){
            $('.coupon-form').toggle(200);
            e.preventDefault();
        })
        
        // Copy the inputed coupon code to WooCommerce hidden default coupon field
        $('.coupon-form input[name="coupon_code"]').on( 'input change', function(){
            $('form.checkout_coupon input[name="coupon_code"]').val($(this).val());
            // console.log($(this).val()); // Uncomment for testing
        });
        
        // On button click, submit WooCommerce hidden default coupon form
        $('.coupon-form button[name="apply_coupon"]').on( 'click', function(){
            $('form.checkout_coupon').submit();
            // console.log('click: submit form'); // Uncomment for testing
        });
    });
    </script>
    <?php
    endif;
}

// Remove default coupon field
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

// Add a custom coupon field before checkout payment section
add_action( 'woocommerce_review_order_before_payment', 'woocommerce_checkout_coupon_form_custom' );
function woocommerce_checkout_coupon_form_custom() {
    echo '<div class="coupon-form" style="margin-bottom:20px;">
        <p>' . __("If you have a coupon code, please apply it below.") . '</p>
        <p class="form-row form-row-first woocommerce-validated">
            <input type="text" name="coupon_code" class="input-text" placeholder="' . __("Coupon code") . '" id="coupon_code" value="">
        </p>
        <p class="form-row form-row-last">
            <button type="button" class="button" name="apply_coupon" value="' . __("Apply coupon") . '">' . __("Apply coupon") . '</button>
        </p>
        <div class="clear"></div>
    </div>';
}

// jQuery - Send Ajax request
add_action( 'wp_footer', 'custom_checkout_jquery_script' );
function custom_checkout_jquery_script() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script type="text/javascript">
    jQuery( function($){
        if (typeof wc_checkout_params === 'undefined')
            return false;

        var couponCode = '';

        $('input[name="coupon_code"]').on( 'input change', function(){
            couponCode = $(this).val();
        });

        $('button[name="apply_coupon"]').on( 'click', function(){
            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'apply_checkout_coupon',
                    'coupon_code': couponCode,
                },
                success: function (response) {
                    $(document.body).trigger("update_checkout"); // Refresh checkout
                    $('.woocommerce-error,.woocommerce-message').remove(); // Remove other notices
                    $('input[name="coupon_code"]').val(''); // Empty coupon code input field
                    $('form.checkout').before(response); // Display notices
                    // console.log(response); // Uncomment for testing
                }
            });
        });
    });
    </script>
    <?php
    endif;
}

// Ajax receiver function
add_action( 'wp_ajax_apply_checkout_coupon', 'apply_checkout_coupon_ajax_receiver' );
add_action( 'wp_ajax_nopriv_apply_checkout_coupon', 'apply_checkout_coupon_ajax_receiver' );
function apply_checkout_coupon_ajax_receiver() {
    if ( isset($_POST['coupon_code']) && ! empty($_POST['coupon_code']) ) {
        WC()->cart->add_discount( wc_format_coupon_code( wp_unslash( $_POST['coupon_code'] ) ) ); // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
    } else {
        wc_add_notice( WC_Coupon::get_generic_coupon_error( WC_Coupon::E_WC_COUPON_PLEASE_ENTER ), 'error' );
    }
    wc_print_notices();
    wp_die();
}