WooCommerce è un potente strumento per la creazione di negozi online con WordPress, in grado di gestire tutto, dalle vetrine dei prodotti all’elaborazione degli acquisti, alla gestione delle tasse e altro ancora.

Una delle caratteristiche principali di WooCommerce è la sua capacità di mantenere informazioni dettagliate sugli ordini. Memorizza meticolosamente ogni aspetto di un ordine, compresi l’importo, la valuta, i dettagli di spedizione, le tasse e altro ancora.

Queste informazioni dettagliate sono preziose sia per i proprietari del negozio che per i clienti. Immagina di creare una pagina in cui gli utenti possano controllare facilmente i dettagli dell’ordine e personalizzarla per visualizzare ulteriori informazioni.

Questa guida spiega come creare una pagina WooCommerce personalizzata che mostri i dettagli dell’ordine in base all’ID dell’ordine.

Perché creare una pagina di dettagli dell’ordine personalizzata?

La creazione di una pagina personalizzata per i dettagli dell’ordine in WooCommerce può offrire diversi vantaggi, soddisfacendo sia le esigenze del proprietario del negozio che quelle del cliente. Ecco alcuni motivi validi per scegliere questa strada:

  1. Esperienza utente migliorata: una pagina di dettagli dell’ordine personalizzata permette di presentare le informazioni sull’ordine in modo da soddisfare al meglio le esigenze dei propri clienti. Permette di personalizzare il layout e il contenuto della pagina in modo da evidenziare dettagli importanti come lo stato della spedizione, le specifiche del prodotto e le date di consegna, rendendo più facile per i clienti trovare rapidamente ciò che stanno cercando.
  2. Funzioni aggiuntive: una pagina di dettagli dell’ordine personalizzata può permettere di aggiungere funzioni non disponibili di default in WooCommerce. Ad esempio, è possibile mostrare visualizzare campi personalizzati come messaggi regalo, istruzioni speciali o note personalizzate uniche per ogni ordine.
  3. Interattività: una pagina di dettaglio dell’ordine personalizzata permette di includere elementi interattivi come barre di avanzamento per il monitoraggio dell’ordine, link a prodotti correlati o accesso diretto all’assistenza clienti, offrendo un’esperienza più ricca e coinvolgente agli utenti.
  4. Flessibilità e adattabilità: la creazione di una pagina di dettagli dell’ordine personalizzata permette di implementare una logica specifica per l’azienda e di adattarsi alle mutevoli esigenze. È possibile visualizzare informazioni diverse in base a criteri esclusivi del negozio, come la posizione del cliente o il tipo di prodotti ordinati.

Come ottenere i dati dell’ordine dall’oggetto $order

In WooCommerce, l’oggetto $order è un elemento centrale che contiene tutte le informazioni su un ordine specifico. Sfruttando questo oggetto, potete recuperare diversi dettagli su un ordine, come l’ID dell’ordine, la data dell’ordine, le informazioni di fatturazione e spedizione e i prodotti acquistati.

Vediamo nel dettaglio come accedere e utilizzare questi dati dall’oggetto $order.

1. Recuperare l’oggetto ordine

Per prima cosa, è necessario ottenere l’oggetto ordine utilizzando la funzione wc_get_order. Questa funzione prende l’ID di un ordine e restituisce l’oggetto ordine corrispondente.

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

2. Informazioni di base sull’ordine

Una volta ottenuto l’oggetto $order, potete recuperare le informazioni di base dell’ordine. Ecco alcuni esempi:

  • ID ordine – L’identificativo univoco dell’ordine. 
    $order_id = $order->get_id();
echo 'Order ID: ' . $order_id;
  • Data ordine– La data di creazione dell’ordine. 
    $order_date = $order->get_date_created();
echo 'Order date: ' . wc_format_datetime( $order_date );
  • Totale ordine – L’importo totale dell’ordine. 
    $order_total = $order->get_formatted_order_total();
echo 'Order total: ' . $order_total;

3. Informazioni di fatturazione

Le informazioni di fatturazione comprendono i dati forniti dal cliente durante il processo di acquisto. Potete recuperare questi dati utilizzando i seguenti metodi:

  • Indirizzo di fatturazione: 
    $billing_address = $order->get_formatted_billing_address();
echo 'Billing address: ' . $billing_address;
  • Email di fatturazione: 
    $billing_email = $order->get_billing_email();
echo 'Billing email: ' . $billing_email;
  • Telefono di fatturazione: 
    $billing_phone = $order->get_billing_phone();
echo 'Billing phone: ' . $billing_phone;

4. Informazioni sulla spedizione

Le informazioni sulla spedizione includono i dettagli su dove verrà spedito l’ordine. Come per le informazioni di fatturazione, potete accedere a questi dettagli utilizzando l’oggetto $order:

  • Indirizzo di spedizione: 
    $shipping_address = $order->get_formatted_shipping_address();
echo 'Shipping address: ' . $shipping_address;

5. Articoli dell’ordine

Potete recuperare gli articoli inclusi in un ordine, il che è particolarmente utile se volete visualizzare i prodotti acquistati. Ecco come ottenere gli articoli dell’ordine:

$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. Metodi di pagamento e di spedizione

Potete anche recuperare le informazioni sui metodi di pagamento e di spedizione utilizzati per l’ordine:

  • Metodo di pagamento: 
    $payment_method = $order->get_payment_method_title();
echo 'Payment method: ' . $payment_method;
  • Metodo di spedizione: 
    $shipping_methods = $order->get_shipping_methods();
foreach ( $shipping_methods as $shipping_method ) {
echo 'Shipping method: ' . $shipping_method->get_name();
}

7. Stato dell’ordine

Lo stato dell’ordine può essere utile per diverse funzionalità, come ad esempio il monitoraggio dello stato di avanzamento dell’ordine:

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

Creare una pagina per visualizzare i dettagli dell’ordine in base al suo ID

Per offrire ai vostri clienti un’esperienza senza soluzione di continuità, è utile creare una pagina personalizzata in cui i clienti possano visualizzare i dettagli dell’ordine semplicemente inserendo il loro ID ordine.

Ecco come creare una pagina, impostando il template e visualizzando le informazioni dell’ordine.

Passo 1: Creare un template di pagina personalizzato

Per prima cosa, create un template di pagina personalizzato nel tema WordPress. Questo template verrà utilizzato per visualizzare i dettagli dell’ordine.

Per farlo, accedete al codice sorgente del progetto. Se avete creato il vostro progetto con DevKinsta, è facile accedervi. Potete anche utilizzare un client FTP utilizzando le impostazioni della pagina informativa del vostro sito (Siti WordPress > nome del sito > Info).

Nella directory del tema child, create un nuovo file chiamato page-order-details.php. Aggiungete il seguente codice a questo file:

<?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>';
}

Vediamo di suddividere questo codice in modo per capirlo meglio.

Innanzitutto, noterete le funzioni get_header() e get_footer(), che includono l’header e il footer standard di WordPress, garantendo il mantenimento del design e del layout generale del sito.

Abbiamo anche alcuni markup HTML di base che sono importanti per la visualizzazione del testo sul web. Il prossimo codice importante che noterete è la condizione che controlla se un order_id viene passato come parametro dell’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 esiste un order_id, sanifica l’input utilizzando intval() e chiama la funzione display_order_details. Se non viene fornito alcun order_id, viene visualizzato un messaggio che lo indica.

La funzione display_order_details è la funzione dichiarata sotto get_footer(). Questa funzione prende in input l’ID dell’ordine e recupera l’oggetto ordine corrispondente utilizzando wc_get_order().

Se l’ID dell’ordine non è valido, viene visualizzato un messaggio di errore. Altrimenti, recupera e visualizza i dettagli dell’ordine come l’ID dell’ordine, la data, il totale, gli indirizzi di fatturazione e spedizione, l’e-mail, il telefono, il metodo di pagamento e lo stato dell’ordine in un elenco non ordinato.

Inoltre, esegue un loop tra gli articoli dell’ordine e visualizza il nome del prodotto, la quantità e il prezzo totale di ogni articolo in un altro elenco non ordinato.

Passo 2: Aggiungere il template al tema e creare una nuova pagina in WordPress

Salvate il file page-order-details.php nella cartella del vostro tema child. In questo modo il template sarà disponibile per essere selezionato durante la creazione di una nuova pagina in WordPress.

Quindi, andate su Pagine > Aggiungi nuovo nella bacheca di amministrazione di WordPress. Date un nome alla pagina e poi, nella sezione Attributi della pagina a destra, selezionate il template Dettagli ordine dal menu a tendina Template.

Se non vedete la sezione Attributi della pagina, potete tornare a Pagine, dove vedrete un elenco di tutte le pagine con alcune opzioni al passaggio del mouse su ogni pagina. Selezionate Modifica rapida e vedrete la sezione Attributi della pagina.

Pubblicate la pagina e testate la pagina dei dettagli dell’ordine personalizzato.

Per fare una prova, navigate nel vostro browser e aggiungete ?order_id=ORDER_ID all’URL, sostituendo ORDER_ID con un ID ordine WooCommerce valido. Ad esempio, https://yourwebsite.com/order-details/?order_id=70

In questo modo verranno visualizzati i dettagli dell’ordine per l’ID dell’ordine specificato.

Dettagli dell'ordine dall'ID dell'ordine
Dettagli dell’ordine dall’ID dell’ordine.

Potete poi aggiungere al template lo stile che preferite.

Creare una pagina con i dettagli dell’ordine utilizzando lo shortcode per il tracciamento dell’ordine di WooCommerce

Un’altra opzione che forse non conoscete è lo shortcode di WooCommerce per la tracciabilità dell’ordine, che offre agli utenti un’interfaccia per la ricerca dei dettagli dell’ordine inserendo il numero d’ordine e l’indirizzo e-mail.

Dettagli dell'ordine con lo shortcode di WooCommerce per il tracciamento degli ordini
Dettagli dell’ordine con lo shortcode di WooCommerce per il tracciamento degli ordini.

Questa pagina mostra il numero dell’ordine, la data, lo stato, gli articoli, la spedizione e l’indirizzo di fatturazione. Può essere utile se non intendete mostrare informazioni più dettagliate.

Creare una pagina di tracciamento dell’ordine utilizzando lo shortcode di WooCommerce per il tracciamento dell’ordine è un modo semplice per migliorare l’esperienza del cliente senza dover ricorrere a codici personalizzati.

Per farlo, seguite questi passaggi:

  1. Accedete alla dashboard di WordPress.
  2. Quindi, create una nuova pagina navigando su Pagine > Aggiungi nuovo.
  3. Date un titolo alla pagina e, nell’editor della pagina, aggiungete il seguente shortcode: 
    [woocommerce_order_tracking]
  4. Successivamente, cliccate sul pulsante Pubblica per rendere la pagina attiva.

È semplicissimo. Ma questo potrebbe non darvi la flessibilità che desiderate.

Riepilogo

La creazione di una pagina di dettagli dell’ordine in WooCommerce migliora l’esperienza del cliente fornendo un facile accesso alle informazioni dell’ordine, migliorando la trasparenza e la soddisfazione del cliente.

Se state riscontrando una certa lentezza nel vostro negozio WordPress, soprattutto se si tratta di negozi di grandi dimensioni con molti prodotti, è fondamentale sapere che una parte significativa delle prestazioni del sito dipende dalla qualità del vostro hosting.

Fortunatamente, con Kinsta come fornitore di hosting per il vostro negozio WooCommerce, non dovrete mai preoccuparvi di questo.

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 200 technical articles majorly around JavaScript and it's frameworks.