WooCommerce es una potente herramienta para crear tiendas online con WordPress, que se encarga de todo, desde la presentación de los productos hasta el procesamiento de las compras, la gestión de los impuestos y muchas cosas más.

Una característica destacada de WooCommerce es su capacidad para mantener información detallada de los pedidos. Almacena meticulosamente todos los aspectos de un pedido, incluido el importe, la divisa, los detalles de envío, los impuestos y mucho más.

Esta información detallada es valiosa tanto para los propietarios de la tienda como para los clientes. Imagina crear una página en la que los usuarios puedan comprobar sin esfuerzo los detalles de su pedido y personalizarla para que muestre información adicional.

Esta guía te explica los pasos para crear una página de WooCommerce personalizada que muestre los detalles del pedido basándose en el ID del pedido.

¿Por qué crear una página personalizada con los detalles del pedido?

Crear una página personalizada con los detalles del pedido en WooCommerce puede ofrecer varias ventajas, que satisfacen tanto las necesidades del propietario de la tienda como las del cliente. Aquí tienes algunas poderosas razones por las que te conviene seguir este camino:

  1. Experiencia de usuario mejorada — Una página de detalles del pedido personalizada te permite presentar la información del pedido que mejor se adapte a las necesidades de tus clientes. Te permite adaptar el diseño y el contenido de tu página para que puedas destacar detalles importantes como el estado del envío, los detalles del producto y las fechas de entrega, facilitando a los clientes encontrar rápidamente lo que buscan.
  2. Funciones adicionales — una página de detalles de pedido personalizada puede permitirte añadir funciones no disponibles por defecto en WooCommerce. Por ejemplo, puedes mostrar campos personalizados como mensajes sobre regalos, instrucciones especiales o notas personalizadas exclusivas para cada pedido.
  3. Interactividad — Una página de detalles del pedido personalizada te permite incluir elementos interactivos como barras de progreso para el seguimiento del pedido, enlaces a productos relacionados o acceso directo al servicio de atención al cliente, proporcionando una experiencia más rica y atractiva a tus usuarios.
  4. Flexibilidad y adaptabilidad — Crear una página de detalles del pedido personalizada puede permitirte implementar una lógica específica de negocio y adaptarte a las necesidades cambiantes. Puedes mostrar información diferente en función de criterios exclusivos de tu tienda, como la ubicación del cliente o el tipo de productos pedidos.

Cómo obtener datos del pedido del objeto $order

En WooCommerce, el objeto $order es una pieza central que contiene toda la información sobre un pedido concreto. Aprovechando este objeto, puedes recuperar varios detalles sobre un pedido, como el ID del pedido, la fecha del pedido, la información de facturación y envío, y los productos comprados.

Veamos en detalle cómo acceder y utilizar estos distintos datos del objeto $order.

1. Recuperar el objeto pedido

En primer lugar, debes obtener el objeto pedido utilizando la función wc_get_order. Esta función toma un ID de pedido y devuelve el objeto de pedido correspondiente.

$order_id = 123; // Example order ID
$order = wc_get_order( $order_id );

2. Información básica del pedido

Una vez que tengas el objeto $order, puedes recuperar información básica sobre el pedido. Aquí tienes algunos ejemplos:

  • ID del pedido — El identificador único del pedido. 
    $order_id = $order->get_id();
echo 'Order ID: ' . $order_id;
  • Fecha del pedido — La fecha en que se creó el pedido. 
    $order_date = $order->get_date_created();
echo 'Order date: ' . wc_format_datetime( $order_date );
  • Total del pedido — El importe total del pedido. 
    $order_total = $order->get_formatted_order_total();
echo 'Order total: ' . $order_total;

3. Información de facturación

La información de facturación incluye los datos proporcionados por el cliente durante el proceso de pago. Puedes recuperar estos detalles utilizando los siguientes métodos:

  • Dirección de facturación: 
    $billing_address = $order->get_formatted_billing_address();
echo 'Billing address: ' . $billing_address;
  • Correo electrónico de facturación: 
    $billing_email = $order->get_billing_email();
echo 'Billing email: ' . $billing_email;
  • Teléfono de facturación: 
    $billing_phone = $order->get_billing_phone();
echo 'Billing phone: ' . $billing_phone;

4. Información de envío

La información de envío incluye los detalles de dónde se enviará el pedido. De forma similar a la información de facturación, puedes acceder a estos detalles utilizando el objeto $order:

  • Dirección de envío: 
    $shipping_address = $order->get_formatted_shipping_address();
echo 'Shipping address: ' . $shipping_address;

5. Artículos del pedido

Puedes recuperar los artículos incluidos en un pedido, lo que resulta especialmente útil si quieres mostrar los productos comprados. A continuación te indicamos cómo conseguir los elementos del pedido:

$items = $order->get_items();
foreach ( $items as $item_id => $item ) {
    $product_name = $item->get_name();
    $product_quantity = $item->get_quantity();
    $product_total = $item->get_total();
    echo 'Product name: ' . $product_name . '<br>';
    echo 'Quantity: ' . $product_quantity . '<br>';
    echo 'Total: ' . wc_price( $product_total ) . '<br>';
}

6. Métodos de pago y envío

También puedes obtener información sobre los métodos de pago y envío utilizados para el pedido:

  • Método de pago: 
    $payment_method = $order->get_payment_method_title();
echo 'Payment method: ' . $payment_method;
  • Método de envío: 
    $shipping_methods = $order->get_shipping_methods();
foreach ( $shipping_methods as $shipping_method ) {
echo 'Shipping method: ' . $shipping_method->get_name();
}

7. Estado del pedido

El estado del pedido puede ser útil para diversas funcionalidades, como el seguimiento del progreso del pedido:

$order_status = wc_get_order_status_name( $order->get_status() );
echo 'Order status: ' . $order_status;

Crear una página para mostrar los detalles del pedido por el ID de pedido

Para ofrecer una experiencia fluida a tus clientes, es beneficioso crear una página personalizada en la que puedan ver los detalles de su pedido con sólo introducir su ID de pedido.

Vamos a guiarte en la creación de una página, incluyendo la configuración de la plantilla y la visualización de la información del pedido.

Paso 1: Crear una plantilla de página personalizada

En primer lugar, crea una plantilla de página personalizada en tu tema de WordPress. Esta plantilla se utilizará para mostrar los detalles del pedido.

Para ello, navega hasta el código fuente de tu proyecto. Si creaste tu proyecto con DevKinsta, es fácil acceder a él. También puedes utilizar un cliente FTP utilizando la configuración de la página de información de tu sitio (Sitios WordPress > nombre del sitio > Información).

En el directorio de tu tema hijo, crea un nuevo archivo llamado page-order-details.php. Añade el siguiente código a este archivo:

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

<div id="primary" class="content-area">
    <main id="main" class="site-main">

        <?php
        if ( isset( $_GET['order_id'] ) ) {
            $order_id = intval( $_GET['order_id'] );
            display_order_details( $order_id );
        } else {
            echo '<p>No order ID provided.</p>';
        }
        ?>

    </main>
</div>

<?php
get_footer();

// Function to display order details
function display_order_details( $order_id ) {
    $order = wc_get_order( $order_id );
    if ( ! $order ) {
        echo '<p>Invalid order ID.</p>';
        return;
    }

    echo '<h2>Order Details</h2>';
    echo '<ul>';
    echo '<li>Order ID: ' . $order->get_id() . '</li>';
    echo '<li>Order Date: ' . wc_format_datetime( $order->get_date_created() ) . '</li>';
    echo '<li>Order Total: ' . $order->get_formatted_order_total() . '</li>';
    echo '<li>Billing Address: ' . $order->get_formatted_billing_address() . '</li>';
    echo '<li>Shipping Address: ' . $order->get_formatted_shipping_address() . '</li>';
    echo '<li>Billing Email: ' . $order->get_billing_email() . '</li>';
    echo '<li>Billing Phone: ' . $order->get_billing_phone() . '</li>';
    echo '<li>Payment Method: ' . $order->get_payment_method_title() . '</li>';
    echo '<li>Order Status: ' . wc_get_order_status_name( $order->get_status() ) . '</li>';
    echo '</ul>';

    echo '<h3>Order Items</h3>';
    echo '<ul>';
    $items = $order->get_items();
    foreach ( $items as $item_id => $item ) {
        echo '<li>';
        echo 'Product Name: ' . $item->get_name() . '<br>';
        echo 'Quantity: ' . $item->get_quantity() . '<br>';
        echo 'Total: ' . wc_price( $item->get_total() ) . '<br>';
        echo '</li>';
    }
    echo '</ul>';
}

Vamos a desglosar este código para que lo entiendas.

En primer lugar, observa las funciones get_header() y get_footer(), que incluyen la cabecera y el pie de página estándar de WordPress para la página, asegurándose de que mantiene el diseño y la disposición generales del sitio.

También tenemos algunas etiquetas básicas de HTML que son importantes para mostrar texto en la web. El siguiente código importante que observas es la condición que comprueba si se pasa un order_id como parámetro de la URL.

if ( isset( $_GET['order_id'] ) ) {
    $order_id = intval( $_GET['order_id'] );
    display_order_details( $order_id );
} else {
    echo '<p>No order ID provided.</p>';
}

Lo que hace es que si existe un order_id, limpia la entrada utilizando intval() y llama a la función display_order_details. Si no se proporciona order_id, muestra un mensaje indicándolo.

La función display_order_details es la función declarada debajo de get_footer(). Esta función toma el ID de pedido como entrada y recupera el objeto de pedido correspondiente utilizando wc_get_order().

Si el ID del pedido no es válido, muestra un mensaje de error. De lo contrario, recupera y muestra varios detalles del pedido, como el ID del pedido, la fecha, el total, las direcciones de facturación y envío, el correo electrónico, el teléfono, la forma de pago y el estado del pedido en una lista desordenada.

Además, recorre los artículos del pedido y muestra el nombre del producto, la cantidad y el precio total de cada artículo en otra lista desordenada.

Paso 2: Añade la plantilla a tu tema y crea una nueva página en WordPress

Guarda el archivo page-order-details.php en el directorio de tu tema hijo. Esto hará que la plantilla esté disponible para su selección al crear una nueva página en WordPress.

A continuación, ve a Páginas > Añadir Nueva en tu panel de administración de WordPress. Dale un nombre a la página y, en la sección Atributos de Página de la derecha, selecciona la plantilla Detalles del Pedido en el desplegable Plantilla.

Si no ves la sección Atributos de Página, puedes volver a Páginas, donde verás una lista de todas las páginas con algunas opciones cuando pases el ratón por encima de cada página. Selecciona Edición Rápida, y entonces verás la sección Atributos de Página.

Publica la página y ya podrás probar la página personalizada de detalles del pedido.

Para probarla, navega por tu navegador y añade ?order_id=ORDER_ID a la URL, sustituyendo ORDER_ID por un ID de pedido válido de WooCommerce. Por ejemplo https://yourwebsite.com/order-details/?order_id=70

Esto debería mostrar los detalles del pedido para el ID de pedido especificado.

Detalles del pedido del ID de pedido.
Detalles del pedido del ID de pedido.

A continuación, puedes añadir el estilo que desees a la plantilla.

Crear una página de detalles del pedido utilizando el shortcode de seguimiento de pedidos de WooCommerce

Otra opción que quizá no conozcas es el shortcode de seguimiento de pedidos de WooCommerce, que proporciona una interfaz de usuario para que los usuarios busquen los detalles de su pedido introduciendo su número de pedido y su dirección de correo electrónico.

Detalles del pedido desde el shortcode de seguimiento de pedidos de WooCommerce.
Detalles del pedido desde el shortcode de seguimiento de pedidos de WooCommerce.

Esta página muestra el número de pedido, la fecha, el estado, los artículos, el envío y la dirección de facturación. Puede ser útil si no tienes intención de mostrar información más detallada.

Crear una página de seguimiento de pedidos utilizando el shortcode de seguimiento de pedidos de WooCommerce es una forma sencilla de mejorar la experiencia del cliente sin profundizar en la programación personalizada.

Para ello, sigue estos pasos:

  1. Accede a tu panel de control de WordPress.
  2. A continuación, crea una nueva página accediendo a Páginas > Añadir Nueva.
  3. Dale un título a la página y, en el editor de páginas, añade el siguiente shortcode: 
    [woocommerce_order_tracking]
  4. A continuación, haz clic en el botón Publicar para activar la página.

Así de sencillo. Pero puede que esto no te dé la flexibilidad que deseas.

Resumen

Crear una página de detalles del pedido en WooCommerce mejora la experiencia del cliente al proporcionarle un acceso fácil a la información del pedido, mejorando la transparencia y la satisfacción del cliente.

Si estás experimentando lentitud en tu tienda WordPress, especialmente en tiendas grandes con muchos productos, es esencial que sepas que una parte importante del rendimiento de tu sitio depende de la calidad de tu alojamiento.

Afortunadamente, con Kinsta como proveedor de alojamiento para tu tienda WooCommerce, no tendrás que preocuparte por esto.

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.