将优待券表格移至WooCommerce结帐的“付款"部分之前 [英] Move coupon form before payment section in WooCommerce checkout

问题描述

我想在结帐时将优惠券字段移到 woocommerce_review_order_before_payment 挂钩.

I would like to move the coupon field at checkout to the woocommerce_review_order_before_payment hook.

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

Having the coupon field at the top of the page negatively affects conversions as users immediately try looking for a coupon code and abandon checkout if they fail to find one.

我在网上阅读说，这不是那么简单，因为优惠券字段也是一种形式.并且将优惠券字段放置在结帐表格内的任何地方都将导致申请优惠券"的出现.提交订单而不是应用优惠券.

I read online that it's not that simple because the coupon field is also a form. And placing the coupon field anywhere inside the checkout form causes the "Apply Coupon" to submit the order form instead of applying the coupon.

我还在线阅读了一些可以解决此问题的解决方案.但是，即使人们多年来一直在问同样的问题，也没有关于该方法的教程.

I also read online that there are working solutions to fix this issue. But there are no tutorials on how to do it even though people have been asking this same question for years.

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

推荐答案

您可以修改

You could adapt something like Move coupon form before subtotal in WooCommerce checkout answer code, but it will not work for many reasons…

重新访问更新的答案(简化为不使用Ajax，就像WooCommerce的默认答案一样):

Revisited updated answer (simplified without Ajax, just like WooCommerce default one):

// 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;
}

代码进入活动子主题(或活动主题)的functions.php文件中.经过测试，可以正常工作.

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

原始第一答案:

您将需要完全自定义的内容，以便能够在结帐付款部分之前将优惠券输入字段用作工作.它还需要如下的Ajax和jQuery代码:

You will need something completely custom, to be able to make work a coupon input field just before checkout payment section. It additionally requires Ajax and jQuery code as follows:

// 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();
}

代码进入活动子主题(或活动主题)的functions.php文件中.经过测试，可以正常工作.

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

这篇关于将优待券表格移至WooCommerce结帐的“付款"部分之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！