Question

我知道如何在结帐页面添加自定义字段，以及如何处理该字段。

但是当我向表单添加自定义字段时，它总是出现在表单的末尾。如何让它出现在其他字段之上？

我当前的剧本：

<?php *// Add a new checkout field
function kia_filter_checkout_fields($fields){
    $fields['extra_fields'] = array(
            'message_field' => array(
                'type' => 'textarea',
                'required'      => true,
                'label' => __( 'Message Field' )
                ),
            );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'kia_filter_checkout_fields' );

// display the extra field on the checkout form
function kia_extra_checkout_fields(){ 

    $checkout = WC()->checkout(); ?>

    <div class="extra-fields">
    <h3><?php _e( 'WRITE A MESSAGE TO RECIPIENT' ); ?><span>(<?php _e( 'Leave blank if not required' ); ?>)</span></h3>

    <?php 
    // because of this foreach, everything added to the array in the previous function will display automagically
    foreach ( $checkout->checkout_fields['extra_fields'] as $key => $field ) : ?>

            <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

        <?php endforeach; ?>
    </div>

<?php }
add_action( 'woocommerce_checkout_after_customer_details' ,'kia_extra_checkout_fields' );
// save the extra field when checkout is processed
function kia_save_extra_checkout_fields( $order_id, $posted ){
    // don't forget appropriate sanitization if you are using a different field type
    if( isset( $posted['message_field'] ) ) {
        update_post_meta( $order_id, '_message_field', sanitize_text_field( $posted['message_field'] ) );
    }

}
add_action( 'woocommerce_checkout_update_order_meta', 'kia_save_extra_checkout_fields', 10, 1);

// display the extra data on order recieved page and my-account order review
function kia_display_order_data( $order_id ){  ?>
    <h2><?php _e( 'Additional Info' ); ?></h2>
    <table class="shop_table shop_table_responsive additional_info">
        <tbody>
            <tr>
                <th><?php _e( 'message_field:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_message_field', true ); ?></td>
            </tr>
            <tr>

            </tr>
        </tbody>
    </table>
<?php }
add_action( 'woocommerce_thankyou', 'kia_display_order_data', 20 );
add_action( 'woocommerce_view_order', 'kia_display_order_data', 20 );


// display the extra data in the order admin panel
function kia_display_order_data_in_admin( $order ){  ?>
    <div class="order_data_column">
        <h4><?php _e( 'Extra Details', 'woocommerce' ); ?></h4>
        <?php 
            echo '<p><strong>' . __( 'Some field' ) . ':</strong>' . get_post_meta( $order->id, '_message_field', true ) . '</p>';
           // echo '<p><strong>' . __( 'Another field' ) . ':</strong>' . get_post_meta( $order->id, '_another_field', true ) . '</p>'; ?>
    </div>
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'kia_display_order_data_in_admin' );
?>*

Answer 1

您需要挂钩woocommerce_checkout_after_customer_details，而不是挂钩woocommerce_checkout_before_customer_details，这样您的自定义字段就会显示在其他字段的顶部。

因此，请更改以下代码行

add_action( 'woocommerce_checkout_after_customer_details' ,'kia_extra_checkout_fields' );

到

add_action( 'woocommerce_checkout_before_customer_details' ,'kia_extra_checkout_fields' );

Answer 2

请尝试删除class =“extra-fields”

<div id="my_custom_checkout_field">
<h3><?php _e( 'WRITE A MESSAGE TO RECIPIENT' ); ?><span>(<?php _e( 'Leave blank if not required' ); ?>)</span></h3>

<?php 
// because of this foreach, everything added to the array in the previous function will display automagically
foreach ( $checkout->checkout_fields['extra_fields'] as $key => $field ) : ?>

        <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

    <?php endforeach; ?>
</div>

我已将它与id一起使用，对我来说效果很好。像这样

如何在woocommerce结帐页面

2 个答案: