在 WooCommerce 结帐的付款部分之前移动优惠券表格

Posted 2023-02-24

【中文标题】在 WooCommerce 结帐的付款部分之前移动优惠券表格

【英文标题】：Move coupon form before payment section in WooCommerce checkout

【发布时间】：2021-04-17 21:18:06

【问题描述】：

我想将结帐时的优惠券字段移动到 woocommerce_review_order_before_payment 挂钩。

在页面顶部设置优惠券字段会对转化产生负面影响，因为用户会立即尝试寻找优惠券代码并在找不到时放弃结帐。

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

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

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

【参考方案1】：

你可以修改类似 Move coupon form before subtotal in WooCommerce checkout 的答案代码，但由于很多原因它不起作用......

重新审视了更新的答案（在没有 Ajax 的情况下进行了简化，就像 WooCommerce 的默认答案一样）：

// 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 文件中。经过测试并且可以工作。

---

原第一答案：

您将需要一些完全自定义的东西，以便能够在结帐付款部分之前将优惠券输入字段用作工作。它还需要 Ajax 和 jQuery 代码，如下所示：

// 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 文件中。经过测试并且可以工作。

【讨论】：

嗨@LoicTheAztec。谢谢您的回答。该代码工作目前是您可以在网上找到的解决此问题的最佳解决方案。但它可能会更好。是否可以将优惠券字段制作成手风琴（单击文本以显示；再次单击以隐藏）？始终打开优惠券字段可能仍会使许多客户分心，因为优惠券字段会占用大量屏幕空间。

嘿@LoicTheAztec，很抱歉打扰你，但我有一个问题。如何使优惠券表格占据 100% 的宽度，但同时将按钮保持在 1 行。目前，在desktop 上，优惠券表单占据了大约 70% 的宽度，在 mobile 上占据了 100% 的宽度，但按钮跳到优惠券字段下方。

@LoicTheAztec 如果我将优惠券字段的宽度设置为 100%，则字段会延伸但按钮会跳到字段下方，无论优惠券表单的哪个元素，它都不会停留在 1 行我的目标。

@JOKKER 最好提出一个新问题，提供所有相关内容：CSS 生成的 html 摘录、实时链接和清晰的解释（我从不亲自回答 CSS 相关问题）

嗨@LoicTheAztec，对于您的代码的简化版本，是否可以根据优惠券代码的正确与否为优惠券表格提供特定的CSS类？