在Woocommerce的订单支付页面上询问并保存账单信息

Question

在WooCommerce后端，我手动为电话客户创建订单，然后向他们发送“客户支付页面”链接，以便他们完成支付。

在该页面("order-pay"，使用模板模板/checkout/form-pay.php)上，我添加了以下代码以显示账单表单

<h3><?php _e( 'Billing details', 'woocommerce' ); ?></h3>
<?php do_action( 'woocommerce_before_checkout_billing_form', $order ); ?>
<div class="woocommerce-billing-fields__field-wrapper">
    <?php
    $fields = WC()->checkout->get_checkout_fields( 'billing' );
    foreach ( $fields as $key => $field ) {
        $field_name = $key;

        if ( is_callable( array( $order, 'get_' . $field_name ) ) ) {
            $field['value'] = $order->{"get_$field_name"}( 'edit' );
        } else {
            $field['value'] = $order->get_meta( '_' . $field_name );
        }   
        woocommerce_form_field( $key, $field, $field['value'] );
    }
    ?>

</div>
<?php do_action( 'woocommerce_after_checkout_billing_form', $order ); ?>

我希望客户能够编辑他们的账单信息(姓名，电子邮件，电话，地址)和保存在付款。这是在使用下面一行的“常规”签出页面上完成的，但在订单支付端点上不起作用。

$('body').trigger('update_checkout');

如何在付款时验证和保存这些字段的值(覆盖退出账单信息)？

Answer 1

这是一个多步骤的解决方案，但它一直在为我工作。

确保您已经将表单-Pay.php文件复制到您的子主题( your /woocommerce/checkout/ form-pay.php )，这样就不会丢失更新方面的全部工作。

在窗体的顶部-pay.php，在定义( 'ABSPATH‘)\#\{e76f}\

$tempateURL = get_stylesheet_directory_uri();
$orderID = wc_get_order_id_by_order_key($_GET["key"]);

接下来，您将在order_review表单中添加您的账单字段。我在收尾表之后加上了我的，但在付款字段之前。

<h3><?php _e( 'Billing details', 'woocommerce' ); ?></h3>
<?php do_action( 'woocommerce_before_checkout_billing_form', $order ); ?>
<div class="woocommerce-billing-fields__field-wrapper">
    <?php
    $fields = WC()->checkout->get_checkout_fields( 'billing' );
    foreach ( $fields as $key => $field ) {
        $field_name = $key;

        if ( is_callable( array( $order, 'get_' . $field_name ) ) ) {
            $field['value'] = $order->{"get_$field_name"}( 'edit' );
        } else {
            $field['value'] = $order->get_meta( '_' . $field_name );
        }   
        woocommerce_form_field( $key, $field, $field['value'] );
    }
    ?>

</div>

然后在关闭?>之后创建一个"next“按钮，但在关闭账单详细信息之前创建，如下所示：

<div class="my-button">
    <input type="button" id="update-billing" class="button-next" value="Next">
</div>

它看起来是这样的：

<h3><?php _e( 'Billing details', 'woocommerce' ); ?></h3>
<?php do_action( 'woocommerce_before_checkout_billing_form', $order ); ?>
<div class="woocommerce-billing-fields__field-wrapper">
    <?php
    $fields = WC()->checkout->get_checkout_fields( 'billing' );
    foreach ( $fields as $key => $field ) {
        $field_name = $key;

        if ( is_callable( array( $order, 'get_' . $field_name ) ) ) {
            $field['value'] = $order->{"get_$field_name"}( 'edit' );
        } else {
            $field['value'] = $order->get_meta( '_' . $field_name );
        }   
        woocommerce_form_field( $key, $field, $field['value'] );
    }
    ?>
    <div class="my-button">
        <input type="button" id="update-billing" class="button-next" value="Next">
    </div>
</div>

我在子主题中创建了一个js文件夹，并创建了一个名为custom-jquery.js的文件。我使用以下代码将新的js文件排队在我的functions.php中：

add_action( 'wp_enqueue_scripts',  'my_enqueue_assets' ); 
function my_enqueue_assets() {
    wp_enqueue_script( 'my-jquery', get_stylesheet_directory_uri() . '/js/custom-jquery.js',"", false, false ); 
} 

然后，我在js文件夹中创建了一个名为woo-function的文件夹，并创建了一个名为update-cart.php的文件。

然后我编写了以下代码：

<?php
    require_once(rtrim($_SERVER['DOCUMENT_ROOT'], '/') . '/wp-load.php');
    print_r($_POST);
    $orderID = $_POST["orderID"];
    $firstName = $_POST["firstName"];
    $lastName = $_POST["lastName"];
    $billingCompany = $_POST["billingCompany"];
    $billingAddress_1 = $_POST["billingAddress_1"];
    $billing_city = $_POST["billing_city"];
    $billing_state = $_POST["billing_state"];
    $billing_postcode = $_POST["billing_postcode"];
    $billing_phone = $_POST["billing_phone"];
    $billing_email = $_POST["billing_email"];

    update_post_meta( $orderID, '_billing_first_name', $firstName );
    update_post_meta( $orderID, '_billing_last_name', $lastName );
    update_post_meta( $orderID, '_billing_company', $billingCompany );
    update_post_meta( $orderID, '_billing_address_1', $billingAddress_1 );
    update_post_meta( $orderID, '_billing_city', $billing_city );
    update_post_meta( $orderID, '_billing_state', $billing_state );
    update_post_meta( $orderID, '_billing_postcode', $billing_postcode );
    update_post_meta( $orderID, '_billing_phone', $billing_phone );
    update_post_meta( $orderID, '_billing_email', $billing_email );

    echo $firstName;
?>

然后，我在定制的jquery.js文件中编写了以下jquery，以便在单击我创建的"next“按钮时更新信息。

jQuery(document).ready(function($) {

$("#update-billing").on("click", function(e){
    var stylesheetURL = $("#order_review").attr("data-theme-url");
    var orderID = $("#order_review").attr("data-order-id");
    var firstName = $("#billing_first_name").val();
    var lastName = $("#billing_last_name").val();
    var billingCompany = $("#billing_company").val();
    var billingAddress_1 = $("#billing_address_1").val();
    var billing_city = $("#billing_city").val();
    var billing_state = $("#billing_state").val();
    var billing_postcode = $("#billing_postcode").val();
    var billing_phone = $("#billing_phone").val();
    var billing_email = $("#billing_email").val();

    console.log(firstName);
    $.ajax({
        method: "POST",
        url: stylesheetURL +  "/js/woo-functions/update-cart.php",
        data: {
            orderID: orderID,
            firstName: firstName,
            lastName: lastName,
            billingCompany: billingCompany,
            billingCountry: "US",
            billingAddress_1: billingAddress_1,
            billing_city: billing_city,
            billing_state: billing_state,
            billing_postcode: billing_postcode,
            billing_phone: billing_phone,
            billing_email: billing_email
        }
    })
    .done(function( msg ) {
        console.log(msg);
        $(".page-id-10 table.shop_table, .page-id-10 .the-payment-fields").slideToggle();
        $(".woocommerce-billing-fields__field-wrapper").slideToggle();
    });
});

当单击"next“按钮时，我还添加了一个.slideToggle函数来隐藏计费字段。Woocommerce动态地将信息添加到结帐页面，您的正常结帐页面将具有相同的页面编号。如果不使slideToggle函数成为唯一的类，它将影响您的正常签出页面。因此，我在表单-pay.php文件中向div id“pay.php”添加了一个类“.-payment”。

<div id="payment" class="the-payment-fields">

当客户单击“下一步”按钮时，它会将数据保存到他们的配置文件中，您可以看到订单上的账单信息。

希望这能有所帮助！