O WooCommerce é uma ferramenta avançada para criação de lojas on-line com WordPress, que lida com tudo, desde vitrines de produtos até o processamento de compras, gerenciamento de impostos e muito mais.

Um recurso de destaque do WooCommerce é sua capacidade de manter informações detalhadas sobre os pedidos. Ele armazena meticulosamente todos os aspectos de um pedido, inclusive o valor, a moeda, os detalhes de envio, os impostos, e outros.

Essas informações detalhadas são valiosas tanto para os proprietários de lojas quanto para os clientes. Imagine criar uma página em que os usuários possam verificar sem esforço os detalhes do pedido e personalizá-la para exibir informações adicionais.

Este guia orienta você nas etapas para criar uma página de WooCommerce personalizada que exibe os detalhes do pedido com base no ID do pedido.

Por que uma página personalizada de detalhes do pedido?

Criar uma página personalizada de detalhes do pedido no WooCommerce pode oferecer várias vantagens, atendendo tanto às necessidades do proprietário da loja quanto as do cliente. Aqui estão alguns motivos para você querer seguir por esse caminho:

  1. Experiência do usuário aprimorada. Uma página de detalhes do pedido personalizada permite apresentar informações sobre o pedido que atendem melhor às necessidades dos seus clientes. Permite personalizar o layout e o conteúdo da página para destacar informações importantes, como status do envio, detalhes do produto e datas de entrega, facilitando para os clientes encontrarem rapidamente o que estão procurando.
  2. Recursos adicionais. Uma página personalizada de detalhes do pedido permite que você adicione recursos não disponíveis por padrão no WooCommerce. Por exemplo, você pode exibir campos personalizados como mensagens de presente, instruções especiais ou notas personalizadas exclusivas para cada pedido.
  3. Interatividade. Uma página personalizada de detalhes do pedido permite incluir elementos interativos, como barras de progresso para rastreamento do pedido, links para produtos relacionados ou acesso direto ao suporte ao cliente, proporcionando uma experiência mais rica e envolvente para seus usuários.
  4. Flexibilidade e adaptabilidade. A criação de uma página de detalhes do pedido personalizada pode permitir que você implemente uma lógica específica do negócio e se adapte a necessidades em constante mudança. Você pode exibir informações diferentes com base em critérios únicos da sua loja, como a localização do cliente ou o tipo de produtos pedidos.

Como obter dados do pedido do objeto $order

No WooCommerce, o objeto $order é uma peça central que contém todas as informações sobre um pedido específico. Você pode aproveitar esse objeto para recuperar vários detalhes sobre um pedido, como o ID do pedido, a data do pedido, informações de cobrança e frete, e os produtos comprados.

Vamos examinar detalhadamente como acessar e usar essas diferentes partes de dados do objeto $order.

1. Recupere o objeto de pedido

Primeiro você deve obter o objeto de pedido usando a função wc_get_order. Essa função recebe um ID de pedido e retorna o objeto de pedido correspondente.

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

2. Informações básicas do pedido

Quando tiver o objeto $order, você poderá recuperar informações básicas sobre o pedido. Aqui estão alguns exemplos:

  • ID do pedido — O identificador exclusivo do pedido. 
    $order_id = $order->get_id();
echo 'Order ID: ' . $order_id;
  • Data do pedido — A data em que o pedido foi criado. 
    $order_date = $order->get_date_created();
echo 'Order date: ' . wc_format_datetime( $order_date );
  • Total do pedido — O valor total do pedido. 
    $order_total = $order->get_formatted_order_total();
echo 'Order total: ' . $order_total;

3. Informações de cobrança

As informações de cobrança incluem detalhes fornecidos pelo cliente durante o processo de checkout. Você pode recuperar esses detalhes usando os seguintes métodos:

  • Endereço de cobrança: 
    $billing_address = $order->get_formatted_billing_address();
echo 'Billing address: ' . $billing_address;
  • E-mail de cobrança: 
    $billing_email = $order->get_billing_email();
echo 'Billing email: ' . $billing_email;
  • Telefone de cobrança: 
    $billing_phone = $order->get_billing_phone();
echo 'Billing phone: ' . $billing_phone;

4. Informações de envio

As informações de envio incluem os detalhes de onde o pedido será entregue. Da mesma forma que as informações de cobrança, você pode acessar esses detalhes usando o objeto $order:

  • Endereço de entrega: 
    $shipping_address = $order->get_formatted_shipping_address();
echo 'Shipping address: ' . $shipping_address;

5. Itens do pedido

Você pode recuperar os itens incluídos em um pedido, o que é particularmente útil se você quiser exibir os produtos comprados. Veja a seguir como obter os itens do 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 pagamento e envio

Você também pode recuperar informações sobre os métodos de pagamento e envio usados para o pedido:

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

7. Status do pedido

O status do pedido pode ser útil para várias funcionalidades, como o rastreio do andamento do pedido:

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

Criando uma página para exibir detalhes do pedido pelo ID do pedido

Para proporcionar uma experiência perfeita aos seus clientes, é útil criar uma página personalizada na qual eles possam visualizar os detalhes do pedido simplesmente inserindo o ID do pedido.

Vamos mostrar como você pode criar essa página, incluindo a configuração do template e a exibição das informações do pedido.

Etapa 1: Crie um template de página personalizado

Primeiro, crie um template de página personalizado em seu tema WordPress. Esse template será usado para exibir os detalhes do pedido.

Para fazer isso, navegue até o código-fonte do seu projeto. Se você criou o projeto com DevKinsta, será fácil acessá-lo. Você também pode usar um cliente FTP usando as configurações na página de informações do seu site (Sites WordPress > nome do site > Informações).

No diretório do seu tema filho (child theme), crie um novo arquivo chamado page-order-details.php. Adicione o seguinte código a esse arquivo:

<?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 detalhar esse código para você entendê-lo.

Primeiro, você notará as funções get_header() e get_footer(), que incluem o cabeçalho e o rodapé padrão do WordPress para a página, garantindo que mantenha o design e o layout geral do site.

Temos também algumas marcações básicas de HTML que são importantes para a exibição de texto na web. O próximo código importante que você notará é a condição que verifica se um order_id é passado como parâmetro de 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>';
}

Se existir um order_id, ela higieniza a entrada usando intval() e chama a função display_order_details. Se nenhum order_id for fornecido, retorna uma mensagem indicando isso.

A função display_order_details é a função declarada abaixo de get_footer(). Essa função recebe o ID do pedido como entrada e recupera o objeto de pedido correspondente usando wc_get_order().

Se o ID do pedido for inválido, ela retorna uma mensagem de erro. Caso contrário, recupera e exibe vários detalhes do pedido, como ID do pedido, data, total, endereços de cobrança e entrega, e-mail, telefone, método de pagamento e status do pedido em uma lista não ordenada.

Além disso, percorre os itens do pedido e exibe o nome do produto, a quantidade e o preço total de cada item em outra lista não ordenada.

Etapa 2: Adicione o template ao seu tema e crie uma nova página no WordPress

Salve o arquivo page-order-details.php no diretório do seu tema filho. Isso tornará o template disponível para seleção quando você criar uma nova página no WordPress.

Em seguida, vá para Páginas > Adicionar nova no painel WordPress. Dê um nome à página e, na seção Atributos da página à direita, selecione o template Detalhes do pedido no menu suspenso Template.

Se não ver a seção Atributos da página, você pode voltar para Páginas, onde verá uma lista de todas as páginas com algumas opções quando passar o mouse sobre cada página. Selecione Edição rápida, e então verá a seção Atributos da página.

Publique a página, e agora você poderá testar a página de detalhes do pedido personalizada.

Para testar, vá ao navegador e acrescente ?order_id=ORDER_ID à URL, substituindo ORDER_ID por um ID de pedido válido de WooCommerce. Por exemplo, https://yourwebsite.com/order-details/?order_id=70

Isso deve exibir os detalhes do pedido para o ID do pedido especificado.

Detalhes do pedido a partir do ID do pedido.
Detalhes do pedido a partir do ID do pedido.

Você pode adicionar estilo ao template conforme desejar.

Criando uma página de detalhes do pedido usando o shortcode de rastreamento de pedidos de WooCommerce

Outra opção que talvez você não conheça é o shortcode de rastreamento de pedidos de WooCommerce, que fornece uma interface para que os usuários pesquisem os detalhes do pedido inserindo o número do pedido e o endereço de e-mail.

Detalhes do pedido a partir do shortcode de rastreamento de pedidos do WooCommerce.
Detalhes do pedido com o shortcode de rastreamento de pedidos de WooCommerce.

Essa página exibe o número do pedido, a data, o status, os itens, o frete e o endereço de cobrança. Isso pode ser útil se você não pretende mostrar informações mais detalhadas.

Criar uma página de rastreamento de pedidos usando o shortcode de rastreamento de pedidos de WooCommerce é uma maneira simples de aprimorar a experiência do cliente sem se aprofundar em codificação personalizada.

Para fazer isso, siga estas etapas:

  1. Faça login no painel WordPress.
  2. A seguir, crie uma nova página navegando até Páginas > Adicionar nova.
  3. Dê um título à página e, no editor de páginas, adicione o seguinte shortcode: 
    [woocommerce_order_tracking]
  4. Em seguida, clique no botão Publicar para colocar a página no ar.

É simples assim. Mas isso pode não lhe dar a flexibilidade que deseja.

Resumo

Criando uma página de detalhes do pedido no WooCommerce, você aprimora a experiência do cliente ao fornecer acesso fácil às informações do pedido, melhorando a transparência e a satisfação do cliente.

Se você estiver enfrentando lentidão em sua loja no WordPress, especialmente lojas grandes com muitos produtos, é essencial saber que uma parte significativa do desempenho do seu site depende da qualidade da sua hospedagem.

Felizmente, com a Kinsta como seu provedor de hospedagem da sua loja WooCommerce, você não precisará se preocupar com isso.

Joel Olawanle Kinsta

Joel é um desenvolvedor Frontend que trabalha na Kinsta como Editor Técnico. Ele é um professor apaixonado com amor pelo código aberto e já escreveu mais de 200 artigos técnicos, principalmente sobre JavaScript e seus frameworks.