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

Question

在 WooCommerce 中，希望在 WooCommerce 管理订单页面上添加自定义元框。

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

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

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

如果这没有意义，请告诉我。

如何保存和使用？

到目前为止我有这个：

// 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 )
{

}

Answer 1

您可以通过多种方式做到这一点。我已更正您的代码并在末尾添加了一个自定义挂钩函数，该函数将在我的帐户订单视图页面中显示此自定义字段值：

// 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+ 上经过测试并且可以正常工作