Add Order Tracking Button in Woocommerce
Introduction:
WooCommerce is a versatile e-commerce platform for WordPress users, offering numerous features to enhance the online shopping experience. Among these features, providing customers with the ability to track their orders is essential. While there are various plugins available for this purpose, you can implement an order tracking solution without relying on third-party extensions. In this article, we’ll guide you through the process using custom code to add order tracking button in woocommerce.
Video Tutorial Of the article [Hindi Language]
Steps to add order tracking button in WooCommerce without plugin
Before starting, you should:
- 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).
1. Access Your WordPress Dashboard:
Begin by logging into your WordPress admin dashboard with the necessary administrative privileges.
2. Edit Your Theme Files:
Access your website’s theme files by going to “Appearance” and then “Theme File Editor.” It’s advisable to work with a child theme to avoid potential issues during theme updates. If you have not yet created the child theme then go to this article to create one.
3. Add Custom Tracking Fields:
To capture tracking information, you’ll need to add custom fields to your ‘edit order details page‘ through admin dashboard. Insert the following code snippet into your theme’s functions.php file:
// Add tracking link field
add_action('woocommerce_admin_order_data_after_order_actions', 'add_tracking_link_field_below_order_actions', 10, 1);
function add_tracking_link_field_below_order_actions($order){
?>
<div class="order_data_column">
<span style="display: inline-block; width: 10px;"> </span> <!-- Padding-like space -->
<?php
woocommerce_wp_text_input(array(
'id' => '_tracking_link',
'label' => __('Tracking Link', 'woocommerce'),
'placeholder' => 'Enter Tracking Link',
'value' => get_post_meta($order->get_id(), '_tracking_link', true),
'desc_tip' => true,
'description' => __('Enter the tracking link for this order.', 'woocommerce'),
'type' => 'url',
));
?>
</div>
<?php
}
// Move order actions below the tracking link field
add_filter('woocommerce_order_actions', 'move_order_actions_below_tracking_link', 10, 1);
function move_order_actions_below_tracking_link($actions){
global $post;
if ($post && $post->post_type == 'shop_order') {
$tracking_link_field = woocommerce_wp_text_input(array(
'id' => '_tracking_link',
'label' => __('Tracking Link', 'woocommerce'),
'placeholder' => 'Enter Tracking Link',
'value' => get_post_meta($post->ID, '_tracking_link', true),
'desc_tip' => true,
'description' => __('Enter the tracking link for this order.', 'woocommerce'),
'type' => 'url',
));
$actions = array_merge(array('tracking_link_field' => $tracking_link_field), $actions);
}
return $actions;
}
// Save tracking link field to order meta data
add_action( 'woocommerce_process_shop_order_meta', 'save_tracking_link_field' );
function save_tracking_link_field( $order_id ){
if( isset($_POST['_tracking_link']) ) {
$tracking_link = sanitize_text_field( $_POST['_tracking_link'] );
update_post_meta( $order_id, '_tracking_link', $tracking_link );
}
}
5. Display the Tracking Button on order’s list Under ‘Actions‘ Tab:
Next, you’ll need to display the tracking button on the customer’s My Account page. Add the following code into your theme’s functions.php file:
// Display track button on My Account orders tab
add_action( 'woocommerce_my_account_my_orders_actions', 'add_tracking_button_to_my_account_orders', 10, 2 );
function add_tracking_button_to_my_account_orders( $actions, $order ) {
$tracking_link = get_post_meta( $order->get_id(), '_tracking_link', true );
if ( ! empty( $tracking_link ) ) {
$url = esc_url( $tracking_link );
$actions['track'] = array(
'url' => $url,
'name' => __( 'Track Order', 'woocommerce' )
);
}
// Hide track button if order status is cancelled
if ( $order->get_status() === 'cancelled' ) {
unset( $actions['track'] );
}
return $actions;
}
6. Display Order Tracking on the View Orders Page:
Finally, you’ll want to display the order tracking link to customers on the view orders page. Add the following code into your theme’s functions.php file:
// Display the tracking text and button inline on the View Order page
add_action('woocommerce_order_details_before_order_table', 'add_tracking_button_to_view_orders', 10, 1);
function add_tracking_button_to_view_orders($order) {
$tracking_link = get_post_meta($order->get_id(), '_tracking_link', true);
$order_status = $order->get_status();
if (!empty($tracking_link) && $order_status != 'cancelled') {
$url = esc_url($tracking_link);
echo '<h2>' . __('Order Tracking', 'woocommerce') . '</h2>';
echo '<div class="order-tracking" style="display: flex; align-items: center;">'; // Inline style added here
echo '<p style="margin: 0 10px 0 0;">' . __('Track my order:', 'woocommerce') . '</p>';
echo '<a href="' . $url . '" class="button track-button">' . __('Track', 'woocommerce') . '</a>';
echo '</div>';
}
}
7. Designing Track Button using CSS
Now, it’s time to design the Track buttons both on Orders list and order view page. Go to Appearance > Customize > Additional CSS then paste below CSS code after that click on Publish button.
Please Note: If you want to change the button color or other things then you can add below CSS code into your website, otherwise if you want to go with default button color of your theme then don’t add below code.
.woocommerce-orders-table__cell-order-actions .view {
box-shadow: 0px 2px 5px 0px rgba(213,217,217,.5) !important;
border-radius: 25px !important;
}
.woocommerce-orders-table__cell-order-actions .track {
background-color: #c6e8e8 !important;
border-radius: 25px !important;
color: #000000 !important;
box-shadow: 0px 2px 5px 0px rgba(213,217,217,.5) !important;
}
.tracking-text {
margin-bottom: 10px !important;
}
.track-button {
background-color: #6cd9d9 !important;
border-radius: 25px !important;
color: #000000 !important;
box-shadow: 0px 2px 5px 0px rgba(213,217,217,.5) !important;
}
8. Conclusion:
Implementing an order tracking button in WooCommerce without relying on plugins is achievable through custom code integration. This approach not only offers customization but also reduces your dependency on third-party extensions, providing a seamless and efficient online shopping experience for your customers. Periodically check the functionality to ensure it works flawlessly with updates to WooCommerce or your theme.
Also read:
Display Discount Amount on WooCommerce Product Page.
Display Discount Percentage on Woocommerce product image.
Display Reviews Count next to Star Rating in Woocommerce.
Add Buy Now Button in WooCommerce Without Plugin.
working perfectly fine.
it’s working. thanks.