How to add Order Tracking Details in WooCommerce

Post's average rating is: 5 (By 1 visitors)

In today’s fast-paced e-commerce world, providing order tracking information to customers is essential. WooCommerce, a popular e-commerce platform, offers various ways to enhance your online store’s functionality. In this article, we’ll guide you through adding order tracking details in WooCommerce without the need for a plugin. We’ll do this using code snippets.

Video Tutorial [Hindi Language]

Steps to add Order Tracking Details in WooCommerce without plugin

• Take a full backup of your website or atleast of functions.php file.
• If you are not comfortable editing functions.php file then install this free plugin and add the snippet by using a single plugin.
• Use a child theme to make customizations. If you have not yet created the child theme then go to this article to create one. Or Use this free plugin to create a child theme (you can delete the plugin after creating child theme, but do not delete the parent theme).

Step 1: Access functions.php file

Click on the Appearance > Theme File Edito > Theme Functions (functions.php).

Step 2: Adding Custom Fields

We’ll begin by adding custom fields for the courier company name and tracking number. These fields will allow you to input and store the relevant information for each order. Copy Below Code and paste in the end of function.php file.

// Add custom fields to WooCommerce orders below Shipping section
add_action('woocommerce_admin_order_data_after_shipping_address', 'add_custom_order_fields_below_shipping', 10, 1);
function add_custom_order_fields_below_shipping($order) {
    $courier_company_name = get_post_meta($order->get_id(), 'courier_company_name', true);
    $tracking_number = get_post_meta($order->get_id(), 'tracking_number', true);

    $courier_companies = array(
        'Amazon Easy Ship',
	  'Aramex',
        'Blue Dart',
        'Delhivery',
        'DTDC',
        'Ekart',
        'Ecom Express',
        'FedEx India',
        'Gati',
        'India Post',
        'Rivigo',
        'Shadowfax',
        'ShipKaro',
        'Shiprocket',
        'XpressBees',
        //Add more courier options here
    );

    echo '<div class="order_data_column" style="width:100%;">';

    woocommerce_wp_select(array(
        'id' => 'courier_company_name',
        'label' => '<strong>' . __('Courier Company Name', 'woocommerce') . '</strong>', // Bold label
        'value' => $courier_company_name,
        'options' => array_merge(array('-select-'), array_combine($courier_companies, $courier_companies)), // Add the "-select-" option at the beginning
    ));

    woocommerce_wp_text_input(array(
        'id' => 'tracking_number',
        'label' => '<strong>' . __('Tracking Number', 'woocommerce') . '</strong>', // Bold label
        'value' => $tracking_number,
        'placeholder' => __('Enter Tracking Number', 'woocommerce'), // Add placeholder
    ));

    echo '</div>';
}

With this code, you can add and select the courier company name and input the tracking number for each order. The dropdown menu includes various courier company options for your convenience.

Please note: If you want to add more courier Company name then add them just like we added other names. For example: if you want to add a courier company name XYZ, then you can enter that name enclosed in single quotes and separated by commas like ‘XYZ’, just below the name ‘XpressBees’,

Step 3: Saving Custom Fields

Now that you’ve added the custom fields, you need to save the entered information when the order is updated. This ensures that the tracking details are stored and accessible for each order. Copy Below Code and paste in the end of function.php file.

// Save custom fields to order meta data
add_action('woocommerce_process_shop_order_meta', 'save_custom_order_fields');
function save_custom_order_fields($order_id) {
    if (isset($_POST['courier_company_name'])) {
        if ($_POST['courier_company_name'] !== '-select-') {
            update_post_meta($order_id, 'courier_company_name', sanitize_text_field($_POST['courier_company_name']));
        } else {
            delete_post_meta($order_id, 'courier_company_name'); // Remove the meta data if "-select-" is chosen
        }
    }

    if (isset($_POST['tracking_number'])) {
        update_post_meta($order_id, 'tracking_number', sanitize_text_field($_POST['tracking_number']));
    }
}

This code will save the courier company name and tracking number to the respective order’s meta data. If the “-select-” option is chosen for the courier company, it will remove the meta data, indicating that no company has been selected.

Step 4: Displaying Tracking Details

To display the tracking details on the view order page, you can use the following code snippet. Copy Below Code and paste in the end of function.php file.

// Display Courier Company Name and Tracking Number in a table above Order Details
add_action('woocommerce_order_details_before_order_table', 'display_tracking_details_on_view_order', 10, 1);
function display_tracking_details_on_view_order($order) {
    $courier_company_name = get_post_meta($order->get_id(), 'courier_company_name', true);
    $tracking_number = get_post_meta($order->get_id(), 'tracking_number', true);

    // Display the courier details in a table if both courier company and tracking number exist
    if (!empty($courier_company_name) && !empty($tracking_number)) {
        echo '<div class="tracking-details">';
        echo '<table>';
        echo '<tr><th>Courier Company:</th><td>' . esc_html($courier_company_name) . '</td></tr>';
        echo '<tr><th>Tracking Number:</th><td>' . esc_html($tracking_number) . '</td></tr>';
        echo '</table>';
        echo '</div>';
    }
}

This code displays the courier company name and tracking number in a table format above the order details on the view order page.

Step 5: Add CSS code for Designing

Add below CSS code in additional CSS by going to Appearance > Customize > Additional CSS.

.tracking-details table {
  width: auto;
  table-layout: auto;
}

These CSS codes will add some margin and width to the courier details table.

Conclusion

Adding order tracking details in WooCommerce without using a plugin is a straightforward process. By following these steps and implementing the provided code snippets, you can enhance your online store’s functionality and provide a better shopping and order tracking experience for your customers.

Also read:
Add Order Tracking Button in Woocommerce.
Automatically add WordPress image alt text without plugin.
Woocommerce Hide Add to Cart for already purchased products.
Woocommerce Change Add to Cart Button Text.