我想将结帐时的优惠券字段移动到 woocommerce_review_order_before_payment 挂钩。
在页面顶部设置优惠券字段会对转化产生负面影响，因为用户会立即尝试寻找优惠券代码并在找不到时放弃结帐。
我在网上看到没那么简单，因为优惠券字段也是一个表格。并且将优惠券字段放置在结帐表单内的任何位置都会导致“应用优惠券”提交订单而不是应用优惠券。
我还在网上看到有解决此问题的有效解决方案。但是，即使人们多年来一直在问同样的问题，也没有关于如何做到这一点的教程。
有人可以提供有关如何正确移动优惠券字段并一劳永逸地结束此问题的分步教程吗？
【问题讨论】：
标签： php jquery ajax wordpress woocommerce
你可以修改类似 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 文件中。经过测试并且可以工作。
【讨论】：