php 在WooCommerce结帐前移动优惠券表单付款部分

u0njafvf  于 2023-04-04  发布在  PHP
关注(0)|答案(3)|浏览(119)

我想在结帐时将优惠券字段移动到woocommerce_review_order_before_payment钩子。
将优惠券字段放在页面顶部会对转换产生负面影响，因为用户会立即尝试寻找优惠券代码，如果找不到，则放弃结账。
我在网上读到，这并不那么简单，因为优惠券字段也是一个表单。将优惠券字段放置在结帐表单中的任何位置都会导致“Apply Coupon”提交订单表单，而不是应用优惠券。
我也在网上读到有解决这个问题的工作方案。但是没有关于如何做到这一点的教程，尽管人们多年来一直在问同样的问题。

有人可以给予一步一步的教程如何正确地移动优惠券领域，并一劳永逸地结束这个问题？

php

3条答案

按热度按时间
krcsximq

krcsximq1#

你可以适应的东西像 * 移动优惠券形式之前小计在WooCommerce结帐 * 回答代码，但它不会工作的原因很多...

重访更新答案（简化后不带 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文件中的活动子主题（或活动主题）.测试和作品.

赞(0）分享  回复(0）举报  2023-04-04
mbyulnm0

mbyulnm02#

如果其他人遇到这个问题…
当我尝试实现代码时，我发现一个问题，当我点击“虚拟”表单时，它尝试并提交了订单。
为了解决这个问题，将按钮修改为一个span，并将span的样式设置为外观和行为都像一个按钮。

// 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">
            <span class="button" name="apply_coupon" value="' . __("Apply coupon") . '">' . __("Apply coupon") . '</span>
        </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 span[name="apply_coupon"]').on( 'click', function(){
            $('form.checkout_coupon').submit();
            // console.log('click: submit form'); // Uncomment for testing
        });
    });
    </script>
    <?php
    endif;
}
赞(0）分享  回复(0）举报  2023-04-04
7ajki6be

7ajki6be3#

我更新了代码，以更简洁的外观显示优惠券表单。New coupon form look
1.使用此自定义CSS代码。

.woocommerce .woocommerce-info {
border: 0px;
background: none;
margin:0px;
padding-left:42px;
padding-bottom:10px;
padding-top:10px;}
    
.woocommerce .woocommerce-info:before {
color: #a1a1a1;
content: "\f145";
font-family: "fontawesome";
padding-top: 0.8em;}

.woocommerce-info .show-coupon{
float:none !important;
font-weight:400 !important;}

.coupon-form .form-row.form-row-first{
width:30%;margin-right:20px;margin-left:20px}

#coupon_code.input-text{
border-radius:4px;}

.coupon-form .form-row.form-row-last{
float:left;}

.coupon-form .form-row.form-row-last .button{
font-size: 12px;
font-weight:600;
text-transform:uppercase;
font-family:montserrat;
color:#000;
position: absolute;
padding-top: 10px;}

.coupon-form .form-row.form-row-last .button:hover{text-decoration:underline;}

1.仅更新此php部分。

// 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(
        '<a href="#" class="show-coupon">' . __("Have a promo code?") . '</a>'
    ) . '</div></div>';

    echo '<div class="coupon-form" style="margin-bottom:0px;" style="display:none !important;">
        <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">
            <span class="button" name="apply_coupon" value="' . __("Apply coupon") . '">' . __("Apply coupon") . '</span>
        </p>
        <div class="clear"></div>
    </div>';
}

1.此部分为测试版本，仅为可选。
现在，如果你想改变整个优惠券形式的位置，你必须更新这个woocommerce挂钩'woocommerce_review_order_before_payment'
改变挂钩工作，但不知何故导致优惠券形式重复和停留在顶部。我仍在研究一个解决方案，并更新这一点，一旦我学会。
Changing hook live example

赞(0）分享  回复(0）举报  2023-04-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com