Move coupon field after checkout payment in Woocommerce?

问题

I want to move the coupon file after the checkout payment. This is what I have tried all ready:

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form');
add_action( 'woocommerce_after_checkout_form', 'woocommerce_checkout_coupon_form' );

Now is currently after the checkout form.

Thanks!

回答1:

You should try this:

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_review_order_before_payment', 'woocommerce_checkout_coupon_form' );

But not sure that it will be functional… You should need also to customize the Woocommerce template checkout/form-coupon.php via your active theme…

回答2:

Coupan code is separate form so you need to follow below steps:

To implement this move, I will use the jQuery UI Dialog library to help me with the dialog functionality. In functions.php, add the following code (in the case, if your website doesn’t already include the jQuery UI Dialog library).

function cw_scripts() {
    wp_enqueue_script('jquery-ui-dialog');
}
add_action('wp_enqueue_scripts', 'cw_scripts');

Next, create an instance of jQuery Model Dialog that contains all the content of the coupon code. Position the model dialog so that it anchors to a HTML element inside the checkout form. Use the existing WooCommerce filters (or actions) to position the HTML element at your desired location within the checkout form. In the functions.php, add the following code:

function cw_show_coupon_js() {
    wc_enqueue_js('$("a.showcoupon").parent().hide();');
    wc_enqueue_js('dialog = $("form.checkout_coupon").dialog({
                       autoOpen: false,
                       width: 500,
                       minHeight: 0,
                       modal: false,
                       appendTo: "#coupon-anchor",
                       position: { my: "left", at: "left", of: "#coupon-anchor"},
                       draggable: false,
                       resizable: false,
                       dialogClass: "coupon-special",
                       closeText: "Close",
                       buttons: {}});');
    wc_enqueue_js('$("#show-coupon-form").click( function() {
                       if (dialog.dialog("isOpen")) {
                           $(".checkout_coupon").hide();
                           dialog.dialog( "close" );
                       } else {
                           $(".checkout_coupon").show();
                           dialog.dialog( "open" );
                       }
                       return false;});');
}
add_action('woocommerce_before_checkout_form', 'cw_show_coupon_js');

Next, to show the coupon field in the form, add the “Click here to enter your code link”. This code will add the link between the customer details and order details sections. In order to check out other locations for this link, you could look into other WooCommerce actions and filters on the checkout page (woocommerce_checkout_fields or woocommerce_before_checkout_billing_form). If you could not find the right filter or method, you could override the default WooCommerce checkout page template and locate the link at your desired location.

function cw_show_coupon() {
    global $woocommerce;

    if ($woocommerce->cart->needs_payment()) {
        echo '<p style="padding-bottom: 5px;"> Have a coupon? <a href="#" id="show-coupon-form">Click here to enter your coupon code</a>.</p><div id="coupon-anchor"></div>';
    }
}
add_action('woocommerce_checkout_after_customer_details', 'cw_show_coupon');

来源：https://stackoverflow.com/questions/47011688/move-coupon-field-after-checkout-payment-in-woocommerce

标签

php

wordpress

woocommerce

hook-woocommerce