在订单编辑页面上添加自定义元框并在客户订单页面上显示

问题描述:

在 WooCommerce 中,想在 WooCommerce 管理订单页面上添加自定义元框.

In WooCommerce, would like to add a custom meta box on WooCommerce Admin order pages.

在此框中,我只想在保存到该订单的文本字段中输入跟踪编号.

In this box, I just want to enter a tracking number in a text field that saves to that order.

然后在客户查看订单页面上,我想显示一个按钮,该按钮打开带有跟踪信息的模式.模态只会拉入一个带有 URL 的 iframe,该 URL 的末尾带有跟踪编号.

Then on the customer view order page, I would like to display a button that opens a modal with tracking information. The modal will just pull in an iframe with a URL that has the tracking number at the end.

我使用的快递公司有一个跟踪网站,所以现在我将使用在管理订单页面上输入的跟踪号在模式中显示 iframe.

The courier company I'm using has a tracking website so for now I'm just going to display the iframe in the modal using the tracking number that was entered on the admin order page.

如果这没有意义,请告诉我.

Please let me know if this doesn't make sense.

如何保存和使用它?

到目前为止我有这个:

// Add meta box
function tcg_tracking_box() {
    add_meta_box(
        'tcg-tracking-modal',
        'The Courier Guy Tracking',
        'tcg_meta_box_callback',
        'shop_order',
        'side',
        'high'
    );
}
add_action( 'add_meta_boxes', 'tcg_tracking_box' );

// Callback
function tcg_meta_box_callback( $post )
{
    $values = get_post_custom( $post->ID );
    $text = isset( $values['tcg_tracking_box'] ) ? esc_attr( $values['tcg_tracking_box'][0] ) : '';
    echo '<input type="text" name="tcg_tracking_box" id="tcg_tracking_box" value="' . $text . '" />';
}

// Saving
add_action( 'save_post', 'tcg_tracking_box_save' );
function tcg_tracking_box_save( $post_id )
{

}

您可以通过多种方式实现.我已更正您的代码并在最后添加了一个自定义挂钩函数,该函数将在我的帐户订单视图页面中显示此自定义字段值:

You can do it in multiple ways. I have corrected your code and added a custom hooked function at the end that will display this custom field value in my Account Order view pages:

// Add meta box
add_action( 'add_meta_boxes', 'tcg_tracking_box' );
function tcg_tracking_box() {
    add_meta_box(
        'tcg-tracking-modal',
        'The Courier Guy Tracking',
        'tcg_meta_box_callback',
        'shop_order',
        'side',
        'core'
    );
}

// Callback
function tcg_meta_box_callback( $post )
{
    $value = get_post_meta( $post->ID, '_tracking_box', true );
    $text = ! empty( $value ) ? esc_attr( $value ) : '';
    echo '<input type="text" name="tracking_box" id="tcg_tracking_box" value="' . $text . '" />';
    echo '<input type="hidden" name="tracking_box_nonce" value="' . wp_create_nonce() . '">';
}

// Saving
add_action( 'save_post', 'tcg_save_meta_box_data' );
function tcg_save_meta_box_data( $post_id ) {

    // Only for shop order
    if ( 'shop_order' != $_POST[ 'post_type' ] )
        return $post_id;

    // Check if our nonce is set (and our cutom field)
    if ( ! isset( $_POST[ 'tracking_box_nonce' ] ) && isset( $_POST['tracking_box'] ) )
        return $post_id;

    $nonce = $_POST[ 'tracking_box_nonce' ];

    // Verify that the nonce is valid.
    if ( ! wp_verify_nonce( $nonce ) )
        return $post_id;

    // Checking that is not an autosave
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
        return $post_id;

    // Check the user’s permissions (for 'shop_manager' and 'administrator' user roles)
    if ( ! current_user_can( 'edit_shop_order', $post_id ) && ! current_user_can( 'edit_shop_orders', $post_id ) )
        return $post_id;

    // Saving the data
    update_post_meta( $post_id, '_tracking_box', sanitize_text_field( $_POST[ 'tracking_box' ] ) );
}

// Display To My Account view Order
add_action( 'woocommerce_order_details_after_order_table', 'tcg_display_tracking_box_in_order_view', 10, 1 );
function tcg_display_tracking_box_in_order_view( $order )
{
    $tracking_box = get_post_meta( $order->get_id(), '_tracking_box', true );
    // Output Tracking box
    if( ! empty( $tracking_box ) && is_account_page() )
        echo '<p>Tracking box: '. $tracking_box .'</p>';
}

代码位于活动子主题(或主题)的 function.php 文件或任何插件文件中.

此代码已在 woocommerce 版本 3+ 上测试并有效

This code is tested on woocommerce version 3+ and works