Woocommerce shortcodes track order

WooCommerce, a widely-used WordPress plugin, offers robust e-commerce functionalities. Among its powerful features are shortcodes, which simplify the process of adding dynamic content to your website without needing advanced coding skills. For online store owners, providing customers with an easy way to track their orders is crucial. WooCommerce shortcodes for order tracking accomplish this efficiently. This article will delve into the key shortcodes available for order tracking and how to implement them effectively.

Understanding WooCommerce Shortcodes

Shortcodes are small pieces of code enclosed in square brackets ([]) that you can insert into WordPress pages or posts. They enable you to perform complex functions with minimal effort. WooCommerce comes with a variety of built-in shortcodes for different functionalities, including order tracking.

Essential WooCommerce Shortcodes for Order Tracking

1. `[woocommerce_order_tracking]`

The primary shortcode for tracking orders in WooCommerce is [woocommerce_order_tracking]. This shortcode creates a form where customers can enter their order details to track the status of their orders.

Usage: To use this shortcode, simply add it to any page or post where you want to display the order tracking form.

php
[woocommerce_order_tracking]

When customers visit this page, they will see a form asking for their order ID and billing email. Upon submitting the form, they will be able to view the current status and details of their order.

How to Implement the Order Tracking Shortcode

Create a New Page:
- Log in to your WordPress dashboard.
- Go to Pages > Add New.
- Title the page appropriately, such as "Order Tracking".
Insert the Shortcode:
- In the content area of the new page, enter the [woocommerce_order_tracking] shortcode.
- Publish the page.

This simple step will create an order tracking page that your customers can use to check their order status.

Customizing the Order Tracking Page

While the default order tracking form provided by WooCommerce is functional, you might want to customize it to better match your site’s design or improve user experience. Here are a few tips for customization:

1. Styling with CSS:

You can add custom CSS to style the order tracking form. This can be done by adding CSS rules to your theme’s stylesheet or using the WordPress Customizer.

css
/* Example CSS for customizing the order tracking form */
.woocommerce form.track_order {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
}

.woocommerce form.track_order input[type="text"] {
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
}

2. Adding Additional Information:

You might want to add more content above or below the order tracking form. This can be done by editing the page where you inserted the shortcode.

php
<h2>Track Your Order</h2>
<p>Enter your order ID and billing email to see the status of your order.</p>
[woocommerce_order_tracking]

Troubleshooting Common Issues

While using shortcodes is generally straightforward, you might encounter some issues. Here are common problems and their solutions:

1. Shortcode Not Working:

If the shortcode isn’t rendering properly, ensure that WooCommerce is installed and activated. Also, check for conflicts with other plugins or themes by deactivating them one by one.

2. Order Not Found:

Customers might enter incorrect order IDs or email addresses. Ensure that the instructions are clear and possibly add a note about where to find the order ID in their confirmation email.

WooCommerce shortcodes for order tracking provide a simple yet effective way to enhance customer experience on your e-commerce site. By using the [woocommerce_order_tracking] shortcode, you can create a seamless and efficient order tracking system. Customizing the tracking page to match your site's aesthetic and providing clear instructions will further improve the user experience. Implement these shortcodes today to ensure your customers can easily track their orders, leading to higher satisfaction and repeat business.

Here are some custom code snippets related to enhancing and customizing the WooCommerce order tracking functionality:

1. Custom CSS for Styling the Order Tracking Form

To make the order tracking form visually appealing, you can add custom CSS. Add the following code to your theme’s style.css file or via the WordPress Customizer (Appearance > Customize > Additional CSS):

css
/* Custom CSS for the WooCommerce Order Tracking Form */
.woocommerce form.track_order {
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.woocommerce form.track_order input[type="text"] {
    border: 1px solid #dcdcdc;
    padding: 12px;
    width: 100%;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 16px;
}

.woocommerce form.track_order button {
    background-color: #0073aa;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

.woocommerce form.track_order button:hover {
    background-color: #005a8c;
}

2. Adding Additional Content Above and Below the Order Tracking Form

To add custom content or instructions above and below the order tracking form, you can modify the page where you placed the [woocommerce_order_tracking] shortcode. Here’s an example of how you can do this:

php
<h2>Track Your Order</h2>
<p>Enter your order ID and billing email below to track your order. You can find the order ID in your order confirmation email.</p>

[woocommerce_order_tracking]

<p>If you have any questions, please contact our support team at 
 This e-mail address is being protected from spambots. You need JavaScript enabled to view it
 .</p>

3. Custom PHP to Automatically Redirect to the Order Tracking Page After Checkout

To enhance user experience, you can automatically redirect customers to the order tracking page after they complete a purchase. Add the following code to your theme’s functions.php file:

php
// Redirect to the Order Tracking page after checkout
add_action('woocommerce_thankyou', 'custom_redirect_after_purchase');
function custom_redirect_after_purchase($order_id) {
    $order = wc_get_order($order_id);
    $order_tracking_url = site_url('/order-tracking'); // Replace with your actual order tracking page URL

    if ($order->get_status() == 'completed') {
        wp_redirect($order_tracking_url);
        exit;
    }
}

4. Custom PHP to Display Order Tracking Information on a Custom Page

If you want to create a more customized order tracking page with additional information, you can use the following PHP code in a custom page template. This code retrieves and displays order tracking information based on user input:

php
<?php
/* Template Name: Custom Order Tracking */
get_header(); ?>

<div class="custom-order-tracking">
    <h2>Track Your Order</h2>
    <form action="" method="post" class="track_order_form">
        <p><input type="text" name="order_id" placeholder="Order ID" required></p>
        <p><input type="email" name="billing_email" placeholder="Billing Email" required></p>
        <p><button type="submit">Track Order</button></p>
    </form>

    <?php
    if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['order_id']) && !empty($_POST['billing_email'])) {
        $order_id = sanitize_text_field($_POST['order_id']);
        $billing_email = sanitize_email($_POST['billing_email']);

        $order = wc_get_order($order_id);
        if ($order && $order->get_billing_email() == $billing_email) {
            echo '<h3>Order Details</h3>';
            echo '<p>Order ID: ' . $order->get_id() . '</p>';
            echo '<p>Status: ' . wc_get_order_status_name($order->get_status()) . '</p>';
            echo '<p>Date: ' . wc_format_datetime($order->get_date_created()) . '</p>';
            echo '<p>Total: ' . $order->get_formatted_order_total() . '</p>';
        } else {
            echo '<p class="error">Order not found or email does not match.</p>';
        }
    }
    ?>
</div>

<?php get_footer(); ?>

5. Custom PHP to Send an Email Notification When Order Status Changes

To keep your customers informed about their order status, you can send an email notification whenever the order status changes. Add this code to your theme’s functions.php file:

php
// Send an email notification when the order status changes
add_action('woocommerce_order_status_changed', 'custom_order_status_changed_email', 10, 4);
function custom_order_status_changed_email($order_id, $old_status, $new_status, $order) {
    $to = $order->get_billing_email();
    $subject = 'Your Order Status Has Changed';
    $headers = array('Content-Type: text/html; charset=UTF-8');
    $message = '<p>Dear ' . $order->get_billing_first_name() . ',</p>';
    $message .= '<p>Your order with ID ' . $order_id . ' status has changed from ' . ucfirst($old_status) . ' to ' . ucfirst($new_status) . '.</p>';
    $message .= '<p>Thank you for shopping with us!</p>';
    $message .= '<p>Best Regards,</p>';
    $message .= '<p>Your Store Team</p>';

    wp_mail($to, $subject, $message, $headers);
}

These custom code snippets can significantly enhance the WooCommerce order tracking experience for your customers. From styling the order tracking form to redirecting customers and providing additional content, these examples offer practical ways to improve user engagement and satisfaction. Always remember to back up your site before making any changes to your theme’s files.

6. Adding Custom Fields to Order Tracking Form

To add custom fields to the WooCommerce order tracking form, you can use a combination of shortcodes and custom PHP functions. This example adds a custom field to capture the customer's phone number during order tracking.

Step 1: Customize the Order Tracking Form

Add this code to your theme’s functions.php file to modify the order tracking form:

php
// Add custom fields to the order tracking form
add_filter('woocommerce_order_tracking_form', 'add_custom_fields_to_order_tracking_form');
function add_custom_fields_to_order_tracking_form() {
    echo '<p class="form-row form-row-first">
            <label for="order_phone">Phone Number</label>
            <input type="text" class="input-text" name="order_phone" id="order_phone" placeholder="Phone Number" />
          </p>';
}

Step 2: Validate Custom Fields

Ensure the custom field is validated when the form is submitted:

php
// Validate custom fields in order tracking form
add_filter('woocommerce_shortcode_order_tracking_validate_order_id', 'validate_custom_fields_order_tracking', 10, 2);
function validate_custom_fields_order_tracking($order_id, $billing_email) {
    if (isset($_POST['order_phone']) && !empty($_POST['order_phone'])) {
        $order_phone = sanitize_text_field($_POST['order_phone']);
        $order = wc_get_order($order_id);
        
        if ($order && $order->get_billing_phone() === $order_phone) {
            return true;
        } else {
            wc_add_notice(__('Invalid phone number provided.', 'woocommerce'), 'error');
            return false;
        }
    }
    return true;
}

7. Display Order Tracking Information on My Account Page

To enhance user experience, you can display the order tracking information directly on the "My Account" page for logged-in users. Add the following code to your theme’s functions.php file:

php
// Display order tracking information on My Account page
add_action('woocommerce_account_dashboard', 'custom_order_tracking_on_account_page');
function custom_order_tracking_on_account_page() {
    $customer_orders = wc_get_orders(array(
        'customer_id' => get_current_user_id(),
        'status' => array('completed', 'processing', 'on-hold'),
    ));

    if (!empty($customer_orders)) {
        echo '<h2>Track Your Orders</h2>';
        foreach ($customer_orders as $customer_order) {
            echo '<div class="order-tracking">';
            echo '<p>Order ID: ' . $customer_order->get_id() . '</p>';
            echo '<p>Status: ' . wc_get_order_status_name($customer_order->get_status()) . '</p>';
            echo '<p>Date: ' . wc_format_datetime($customer_order->get_date_created()) . '</p>';
            echo '<p>Total: ' . $customer_order->get_formatted_order_total() . '</p>';
            echo '</div>';
        }
    } else {
        echo '<p>You have no orders to track.</p>';
    }
}

8. Create a Custom Order Tracking Page with AJAX

To improve user experience, you can create an AJAX-enabled order tracking page, allowing customers to check their order status without reloading the page.

Step 1: Create the Order Tracking Form

Create a custom page template (page-order-tracking.php) and add the following code:

php
<?php
/* Template Name: AJAX Order Tracking */
get_header(); ?>

<div id="order-tracking-container">
    <h2>Track Your Order</h2>
    <form id="order-tracking-form">
        <p>
            <label for="order_id">Order ID</label>
            <input type="text" id="order_id" name="order_id" required>
        </p>
        <p>
            <label for="billing_email">Billing Email</label>
            <input type="email" id="billing_email" name="billing_email" required>
        </p>
        <p>
            <button type="submit">Track Order</button>
        </p>
    </form>
    <div id="order-tracking-result"></div>
</div>

<?php get_footer(); ?>

Step 2: Add AJAX Handling in JavaScript

Add the following JavaScript to handle the AJAX request. You can add this script to your theme’s scripts.js file and enqueue it properly in functions.php.

javascript
// JavaScript for AJAX order tracking
jQuery(document).ready(function ($) {
    $('#order-tracking-form').on('submit', function (e) {
        e.preventDefault();

        var order_id = $('#order_id').val();
        var billing_email = $('#billing_email').val();

        $.ajax({
            url: woocommerce_params.ajax_url,
            type: 'POST',
            data: {
                action: 'track_order',
                order_id: order_id,
                billing_email: billing_email
            },
            success: function (response) {
                $('#order-tracking-result').html(response);
            }
        });
    });
});

Step 3: Handle AJAX Request in PHP

Add this code to your theme’s functions.php file to handle the AJAX request:

php
// Handle AJAX order tracking request
add_action('wp_ajax_track_order', 'handle_ajax_order_tracking');
add_action('wp_ajax_nopriv_track_order', 'handle_ajax_order_tracking');
function handle_ajax_order_tracking() {
    $order_id = sanitize_text_field($_POST['order_id']);
    $billing_email = sanitize_email($_POST['billing_email']);

    $order = wc_get_order($order_id);

    if ($order && $order->get_billing_email() === $billing_email) {
        $response = '<h3>Order Details</h3>';
        $response .= '<p>Order ID: ' . $order->get_id() . '</p>';
        $response .= '<p>Status: ' . wc_get_order_status_name($order->get_status()) . '</p>';
        $response .= '<p>Date: ' . wc_format_datetime($order->get_date_created()) . '</p>';
        $response .= '<p>Total: ' . $order->get_formatted_order_total() . '</p>';
    } else {
        $response = '<p class="error">Order not found or email does not match.</p>';
    }

    echo $response;
    wp_die();
}

9. Shortcode to Display Recent Orders with Tracking Link

Create a shortcode to display recent orders with a tracking link for logged-in users. Add this to your theme’s functions.php file:

php
// Shortcode to display recent orders with tracking link
add_shortcode('recent_orders_with_tracking', 'recent_orders_with_tracking_shortcode');
function recent_orders_with_tracking_shortcode($atts) {
    if (!is_user_logged_in()) {
        return '<p>Please log in to view your recent orders.</p>';
    }

    $customer_orders = wc_get_orders(array(
        'customer_id' => get_current_user_id(),
        'status' => array('completed', 'processing', 'on-hold'),
        'limit' => 5,
    ));

    if (empty($customer_orders)) {
        return '<p>You have no recent orders.</p>';
    }

    $output = '<h2>Your Recent Orders</h2>';
    $output .= '<ul class="recent-orders">';
    foreach ($customer_orders as $customer_order) {
        $output .= '<li>';
        $output .= '<p>Order ID: ' . $customer_order->get_id() . '</p>';
        $output .= '<p>Status: ' . wc_get_order_status_name($customer_order->get_status()) . '</p>';
        $output .= '<p>Date: ' . wc_format_datetime($customer_order->get_date_created()) . '</p>';
        $output .= '<p>Total: ' . $customer_order->get_formatted_order_total() . '</p>';
        $output .= '<p><a href="' . site_url('/order-tracking') . '?order_id=' . $customer_order->get_id() . '&billing_email=' . $customer_order->get_billing_email() . '">Track this order</a></p>';
        $output .= '</li>';
    }
    $output .= '</ul>';

    return $output;
}

These additional code snippets provide more ways to customize WooCommerce order tracking functionality, from adding custom fields and displaying order tracking on the My Account page to creating AJAX-enabled tracking pages and shortcodes for recent orders. Implementing these enhancements will improve the user experience and streamline the order tracking process for your customers. Always remember to test these changes in a staging environment before applying them to your live site.