Magento 2: Add Track Order link with the Order on Order History Page

Hello Magento Friends 👋,

Welcome back to Magento Technical Blog series. Today I will throw light on Magento 2: Add Track Order link with the Order on Order History Page. Look at what our previous blog has to say, How to add Stock Status column in Admin Product Grid Magento 2.

As soon as the customer places an order, he/she is eager to know about when their products will arrive. An order tracking process allows the customer to know the status of their orders like pending, processing, shipped, delivered. My orders section displays the order information that comprises information like the order number, date, amount, status, etc. What if you want to provide an order tracking link to the customers of your Magento 2 store into their My Orders page?

Let us know How to Add Track Order link with the Order on Order History Page in Magento 2 🚀

How to Add Track Order link with the Order on Order History Page in Magento 2:

Copy the vendor/magento/module-sales/view/frontend/templates/order/history.phtml file in your theme under the below path:

app/design/frontend/Themes/Yourtheme/Magento_Sales/templates/order/history.phtml 

Now, add the below code:

<?php $_orders = $block->getOrders(); ?>
<?= $block->getChildHtml('info') ?>
<?php if ($_orders && count($_orders)): ?>
    <div class="table-wrapper orders-history">
        <table class="data table table-order-items history" id="my-orders-table">
            <caption class="table-caption"><?= /* @escapeNotVerified */                __('Orders') ?></caption>
            <thead>
            <tr>
                <th scope="col" class="col id"><?= /* @escapeNotVerified */                    __('Order #') ?></th>
                <th scope="col" class="col date"><?= /* @escapeNotVerified */                    __('Date') ?></th>
                <?= /* @noEscape */                $block->getChildHtml('extra.column.header') ?>
                <th scope="col" class="col shipping"><?= /* @escapeNotVerified */                    __('Ship To') ?></th>
                <th scope="col" class="col total"><?= /* @escapeNotVerified */                    __('Order Total') ?></th>
                <th scope="col" class="col status"><?= /* @escapeNotVerified */                    __('Status') ?></th>
                <th scope="col" class="col actions"><?= /* @escapeNotVerified */                    __('Action') ?></th>
                <th scope="col" class="col actions">Track Order</th>
            </tr>
            </thead>
            <tbody>
            <?php foreach ($_orders as $_order): ?>
                <tr>
                    <td data-th="<?= $block->escapeHtml(__('Order #')) ?>" class="col id"><?= /* @escapeNotVerified */                        $_order->getRealOrderId() ?></td>
                    <td data-th="<?= $block->escapeHtml(__('Date')) ?>" class="col date"><?= /* @escapeNotVerified */                        $block->formatDate($_order->getCreatedAt()) ?></td>
                    <?php $extra = $block->getChildBlock('extra.container'); ?>
                    <?php if ($extra): ?>
                        <?php $extra->setOrder($_order); ?>
                        <?= /* @noEscape */                        $extra->getChildHtml() ?>
                    <?php endif; ?>
                    <td data-th="<?= $block->escapeHtml(__('Ship To')) ?>"
                        class="col shipping"><?= $_order->getShippingAddress() ? $block->escapeHtml($_order->getShippingAddress()->getName()) : '&nbsp;' ?></td>
                    <td data-th="<?= $block->escapeHtml(__('Order Total')) ?>"
                        class="col total"><?= /* @escapeNotVerified */                        $_order->formatPrice($_order->getGrandTotal()) ?></td>
                    <td data-th="<?= $block->escapeHtml(__('Status')) ?>"
                        class="col status"><?= /* @escapeNotVerified */                        $_order->getStatusLabel() ?></td>
                    <td data-th="<?= $block->escapeHtml(__('Actions')) ?>" class="col actions">
                        <a href="<?= /* @escapeNotVerified */                        $block->getViewUrl($_order) ?>" class="action view">
                            <span><?= /* @escapeNotVerified */                                __('View Order') ?></span>
                        </a>
                        <?php if ($this->helper('Magento\Sales\Helper\Reorder')->canReorder($_order->getEntityId())) : ?>
                            <a href="#" data-post='<?php /* @escapeNotVerified */                            echo
                            $this->helper(\Magento\Framework\Data\Helper\PostHelper::class)
                                ->getPostData($block->getReorderUrl($_order))
                            ?>' class="action order">
                                <span><?= /* @escapeNotVerified */                                    __('Reorder') ?></span>
                            </a>
                        <?php endif ?>
                    </td>
                    <td class="col actions">
                        <a href="#" class="action track" title="Track Your Order"
                           data-mage-init='{"popupWindow": {"windowURL":"<?= $this->helper('\Magento\Shipping\Helper\Data')->getTrackingPopupUrlBySalesModel($_order); ?>","windowName":"trackorder","width":800,"height":600,"left":0,"top":0,"resizable":1,"scrollbars":1}}'>
                            <span>Track Your Order</span>
                        </a>
                    </td>
                </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php if ($block->getPagerHtml()): ?>
        <div class="order-products-toolbar toolbar bottom"><?= $block->getPagerHtml() ?></div>
    <?php endif ?>
<?php else: ?>
    <div class="message info empty"><span><?= /* @escapeNotVerified */            __('You have placed no orders.') ?></span></div>
<?php endif ?>

 Flush the cache after the changes. That’s it.

With the implementation of the above code, the track order column link will be added to the order home page as shown below:

Conclusion:

Expectantly, all are able to Add Track Order link with the Order on Order History Page in Magento 2. Apart from this, increase the customer experience of your store with Order Tracking Extension for Magento 2, which enables tracking order directly from the customer’s My Account section.

In case of any issues while implementing the code, notify me in the comment section below. Do share the article with your Magento colleagues and friends. Keep in touch for more such solutions.

Happy Coding 😊