WooCommerce is een krachtig hulpmiddel voor het bouwen van online winkels met WordPress, dat alles regelt: van productvitrines tot aankoopverwerking, belastingbeheer en nog veel meer.

Een opvallende eigenschap van WooCommerce is de mogelijkheid om gedetailleerde bestelinformatie bij te houden. Elk aspect van een bestelling wordt nauwkeurig opgeslagen, inclusief het bedrag, de valuta, verzendgegevens, belastingen en nog veel meer.

Deze gedetailleerde informatie is waardevol voor zowel winkeleigenaren als klanten. Stel je voor dat je een pagina maakt waarop gebruikers moeiteloos hun bestelgegevens kunnen controleren en deze kunnen aanpassen om extra informatie weer te geven.

Deze handleiding leidt je door de stappen om een custom WooCommerce pagina te maken die bestelgegevens weergeeft op basis van de order-ID.

Waarom zou je een custom pagina met bestelgegevens maken?

Het maken van een custom bestelpagina in WooCommerce kan verschillende voordelen bieden, zowel voor de winkeleigenaar als voor de klant. Hier zijn een paar overtuigende redenen waarom je deze route zou willen volgen:

  1. Verbeterde gebruikerservaring – Met een custom pagina met bestelgegevens kun je bestelinformatie presenteren die het beste past bij de behoeften van je klanten. Je kunt de layout en inhoud van je pagina aanpassen zodat je belangrijke details zoals verzendstatus, productspecificaties en leveringsdatums kunt benadrukken, zodat het voor klanten gemakkelijker wordt om snel te vinden wat ze zoeken.
  2. Extra features – Met een custom pagina met bestelgegevens kun je features toevoegen die standaard niet beschikbaar zijn in WooCommerce. Je kunt bijvoorbeeld je eigen velden weergeven zoals een boodschap voor een cadeau, speciale instructies of persoonlijke notities die uniek zijn voor elke bestelling.
  3. Interactiviteit – Met een custom pagina met bestelgegevens kun je interactieve elementen toevoegen, zoals voortgangsbalkjes om de bestelling te volgen, links naar gerelateerde producten of directe toegang tot de klantenservice.
  4. Flexibiliteit en aanpasbaarheid – Als je een custom pagina met bestelgegevens maakt, kun je bedrijfsspecifieke logica implementeren en je aanpassen aan veranderende behoeften. Je kunt verschillende informatie weergeven op basis van criteria die uniek zijn voor je winkel, zoals de locatie van de klant of het type producten dat is besteld.

Hoe je bestelgegevens uit het $order object haalt

In WooCommerce is het $order object een centraal stuk dat alle informatie over een specifieke bestelling bevat. Door gebruik te maken van dit object kun je verschillende gegevens over een bestelling ophalen, zoals de ID van de bestelling, de besteldatum, factuur- en verzendgegevens en de gekochte producten.

Laten we eens in detail bekijken hoe je deze verschillende gegevens van het $order object kunt openen en gebruiken.

1. Het order object ophalen

Eerst moet je het order object ophalen met de functie wc_get_order. Deze functie neemt een order-ID en retourneert het bijbehorende orderobject.

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

2. Basic orderinformatie

Als je eenmaal het $order object hebt, kun je basisinformatie over de bestelling ophalen. Hier zijn enkele voorbeelden:

  • Order ID – De unieke identificatiecode voor de order. 
    $order_id = $order->get_id();
echo 'Order ID: ' . $order_id;
  • Orderdatum – De datum waarop de order is aangemaakt. 
    $order_date = $order->get_date_created();
echo 'Order date: ' . wc_format_datetime( $order_date );
  • Totaal bestelling – Het totaalbedrag van de bestelling. 
    $order_total = $order->get_formatted_order_total();
echo 'Order total: ' . $order_total;

3. Factureringsgegevens

Factureringsgegevens omvatten gegevens die de klant heeft verstrekt tijdens het afrekenen. Je kunt deze gegevens opvragen met de volgende methoden:

  • Factuur adres: 
    $billing_address = $order->get_formatted_billing_address();
echo 'Billing address: ' . $billing_address;
  • Facturering e-mail: 
    $billing_email = $order->get_billing_email();
echo 'Billing email: ' . $billing_email;
  • Telefoon voor facturering: 
    $billing_phone = $order->get_billing_phone();
echo 'Billing phone: ' . $billing_phone;

4. Verzendinformatie

Verzendinformatie bevat de details over waar de bestelling naartoe wordt verzonden. Net als bij factuurgegevens kun je deze gegevens opvragen via het object $order:

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

5. Bestelde items

Je kunt de items van een bestelling opvragen, wat vooral handig is als je gekochte producten wilt weergeven. Zo vraag je de bestelde items op:

$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. Betalings- en verzendmethoden

Je kunt ook informatie opvragen over de betaal- en verzendmethoden die voor de bestelling zijn gebruikt:

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

7. Status bestelling

De status van de bestelling kan handig zijn voor verschillende functionaliteiten, zoals het bijhouden van de voortgang van de bestelling:

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

Een pagina maken om bestelgegevens op order-ID weer te geven

Om je klanten een naadloze ervaring te bieden, is het handig om een custom pagina te maken waar ze hun bestelgegevens kunnen bekijken door simpelweg hun order-ID in te voeren.

Laten we je begeleiden bij het maken van een pagina, inclusief het instellen van de template en het weergeven van de bestelgegevens.

Stap 1: Maak een custom paginatemplate

Maak eerst een custom paginasjabloon in je WordPress thema. Deze sjabloon wordt gebruikt om de bestelgegevens weer te geven.

Navigeer hiervoor naar de broncode van je project. Als je je project met DevKinsta hebt gemaakt, is dit eenvoudig te bereiken. Je kunt ook een FTP Client gebruiken via de instellingen op je site info pagina (WordPress Sites > sitename > Info).

Maak in de map van je child thema een nieuw bestand aan met de naam page-order-details.php. Voeg de volgende code toe aan dit bestand:

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

Laten we deze code uitsplitsen zodat je het begrijpt.

Allereerst zie je de features get_header() en get_footer(), die de standaard WordPress header en footer voor de pagina bevatten en ervoor zorgen dat het algemene ontwerp en de layout van de site behouden blijven.

We hebben ook een aantal basis HTML markeringen die belangrijk zijn voor het weergeven van tekst op het web. De volgende belangrijke code die je ziet is de voorwaarde die controleert of er een order_id is doorgegeven als URL parameter.

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

Als er een order_id bestaat, wordt de invoer gezuiverd met intval() en wordt de functie display_order_details gecalld. Als er geen order_id is opgegeven, wordt er een bericht weergegeven dat dit aangeeft.

De functie display_order_details is de functie die onder get_footer() wordt gedeclared. Deze functie neemt de order-ID als invoer en haalt het bijbehorende orderobject op met behulp van wc_get_order().

Als de order-ID ongeldig is, wordt een foutbericht weergegeven. Anders worden verschillende bestelgegevens opgehaald en weergegeven, zoals order-ID, datum, totaal, factuur- en verzendadres, e-mail, telefoon, betaalmethode en bestelstatus in een niet-geordende lijst.

Daarnaast worden de bestelitems doorlopen en worden de productnaam, de hoeveelheid en de totaalprijs voor elk item in een andere niet-geordende lijst weergegeven.

Stap 2: Voeg de template toe aan je thema en maak een nieuwe pagina in WordPress

Sla het bestand page-order-details.php op in de map van je child thema. Hierdoor wordt de template beschikbaar voor selectie bij het maken van een nieuwe pagina in WordPress.

Ga vervolgens naar Pages > Add new in je WordPress admin dashboard. Geef de pagina een naam en selecteer dan in het gedeelte Page features aan de rechterkant de sjabloon Order details uit de keuzelijst Template.

Als je de sectie Page features niet ziet, kun je teruggaan naar Pages . Daar zie je een lijst met alle pagina’s met een aantal opties als je met je muis over elke pagina beweegt. Selecteer Quick edit en dan zie je de sectie Page features.

Publiceer de pagina en je kunt nu de custom pagina met bestelgegevens testen.

Om te testen navigeer je naar je browser en voeg je ?order_id=ORDER_ID toe aan de URL, waarbij je ORDER_ID vervangt door een geldige WooCommerce order-ID. Bijvoorbeeld, https://yourwebsite.com/order-details/?order_id=70

Dit zou de bestelgegevens voor de opgegeven order-ID moeten weergeven.

Bestelgegevens van de order-ID.
Bestelgegevens van de order-ID.

Je kunt dan naar wens styling toevoegen aan de template.

Een pagina met bestelgegevens maken met de shortcode voor het tracken van bestellingen van WooCommerce

Een andere optie die je misschien nog niet kent is de WooCommerce shortcode voor het tracken van bestellingen, waarmee gebruikers hun bestelgegevens kunnen opzoeken door hun bestelnummer en e-mailadres in te voeren.

Bestelgegevens van de WooCommerce shortcode voor het volgen van bestellingen.
Bestelgegevens van de WooCommerce shortcode voor het tracken van bestellingen.

Deze pagina toont het bestelnummer, de datum, de status, de artikelen, de verzending en het factuuradres. Dit kan handig zijn als je niet van plan bent om meer gedetailleerde informatie te tonen.

Een pagina voor het bijhouden van bestellingen maken met de WooCommerce shortcode voor het bijhouden van bestellingen is een eenvoudige manier om de klantervaring te verbeteren zonder je te hoeven verdiepen in custom codering.

Volg de volgende stappen om dit te doen:

  1. Log in op je WordPress dashboard.
  2. Maak vervolgens een nieuwe pagina aan door te navigeren naar Pages > Add new.
  3. Geef de pagina een titel en voeg in de pagina-editor de volgende shortcode toe: 
    [woocommerce_order_tracking]
  4. Klik vervolgens op de knop Publish om de pagina live te zetten.

Zo eenvoudig is het. Maar dit geeft je misschien niet de flexibiliteit die je wenst.

Samenvatting

Het maken van een pagina met bestelgegevens in WooCommerce verbetert de klantervaring door eenvoudige toegang te bieden tot bestelinformatie, wat de transparantie en klanttevredenheid ten goede komt.

Als je traagheid ervaart in je WordPress winkel, vooral bij grote winkels met veel producten, is het essentieel om te weten dat een aanzienlijk deel van de prestaties van je site afhangt van de kwaliteit van je hosting.

Gelukkig hoef je je hier geen zorgen over te maken met Kinsta als hostingprovider voor je WooCommerce winkel.

Joel Olawanle Kinsta

Joel is een Frontend developer die bij Kinsta werkt als Technical Editor. Hij is een gepassioneerd leraar met liefde voor open source en heeft meer dan 200 technische artikelen geschreven, voornamelijk over JavaScript en zijn frameworks.