WooCommerce est un outil puissant pour créer des boutiques en ligne avec WordPress. Il gère tout, de la présentation des produits au traitement des achats, en passant par la gestion des taxes, et bien plus encore.
L’une des caractéristiques les plus remarquables de WooCommerce est sa capacité à conserver des informations détaillées sur les commandes. Il stocke méticuleusement tous les aspects d’une commande, y compris le montant, la devise, les détails d’expédition, les taxes, et plus encore.
Ces informations détaillées sont précieuses à la fois pour les propriétaires de boutiques et pour les clients. Imaginez la création d’une page où les utilisateurs peuvent facilement vérifier les détails de leur commande et la personnaliser pour afficher des informations supplémentaires.
Ce guide vous guide à travers les étapes pour construire une page WooCommerce personnalisée qui affiche les détails de la commande en fonction de l’ID de la commande.
Pourquoi créer une page de détails de commande personnalisée ?
La création d’une page de détails de commande personnalisée dans WooCommerce peut offrir plusieurs avantages, répondant à la fois aux besoins du propriétaire de la boutique et à ceux du client. Voici quelques raisons convaincantes pour lesquelles vous pourriez vouloir suivre cette voie :
- Expérience utilisateur améliorée – Une page de détails de commande personnalisée vous permet de présenter les informations de commande qui répondent le mieux aux besoins de vos clients. Elle vous permet d’adapter la présentation et le contenu de votre page afin de mettre en évidence des détails importants tels que le statut de l’expédition, les spécificités du produit et les dates de livraison, ce qui permet aux clients de trouver plus facilement ce qu’ils recherchent.
- Fonctionnalités supplémentaires – Une page de détails de commande personnalisée peut vous permettre d’ajouter des fonctionnalités non disponibles par défaut dans WooCommerce. Par exemple, vous pouvez afficher des champs personnalisés tels que des messages de cadeau, des instructions spéciales ou des notes personnalisées uniques à chaque commande.
- Interactivité – Une page de détails de commande personnalisée vous permet d’inclure des éléments interactifs tels que des barres de progression pour le suivi de la commande, des liens vers des produits similaires ou un accès direct au support client, offrant ainsi une expérience plus riche et plus attrayante à vos utilisateurs.
- Flexibilité et adaptabilité – La création d’une page de détails de commande personnalisée peut vous permettre de mettre en œuvre une logique propre à votre entreprise et de vous adapter à l’évolution de vos besoins. Vous pouvez afficher différentes informations en fonction de critères propres à votre boutique, tels que la localisation du client ou le type de produits commandés.
Comment obtenir les données d’une commande à partir de l’objet $order ?
Dans WooCommerce, l’objet $order est une pièce maîtresse qui contient toutes les informations relatives à une commande spécifique. En tirant parti de cet objet, vous pouvez récupérer divers détails sur une commande, tels que l’identifiant de la commande, la date de la commande, les informations de facturation et d’expédition, ainsi que les produits achetés.
Voyons en détail comment accéder à ces différents éléments de données de l’objet $order et les utiliser.
1. Récupérer l’objet order
Tout d’abord, vous devez obtenir l’objet order à l’aide de la fonction wc_get_order. Cette fonction prend un identifiant de commande et renvoie l’objet de commande correspondant.
$order_id = 123; // Example order ID
$order = wc_get_order( $order_id );2. Informations de base sur la commande
Une fois que vous avez l’objet $order, vous pouvez récupérer des informations de base sur la commande. Voici quelques exemples :
- ID de la commande – L’identifiant unique de la commande.
$order_id = $order->get_id(); echo 'Order ID: ' . $order_id; - Date de la commande – Date à laquelle la commande a été créée.
$order_date = $order->get_date_created(); echo 'Order date: ' . wc_format_datetime( $order_date ); - Total de la commande – Le montant total de la commande.
$order_total = $order->get_formatted_order_total(); echo 'Order total: ' . $order_total;
3. Informations de facturation
Les informations de facturation comprennent les détails fournis par le client au cours de la procédure de paiement. Vous pouvez récupérer ces informations à l’aide des méthodes suivantes :
- Adresse de facturation :
$billing_address = $order->get_formatted_billing_address(); echo 'Billing address: ' . $billing_address; - E-mail de facturation :
$billing_email = $order->get_billing_email(); echo 'Billing email: ' . $billing_email; - Téléphone de facturation :
$billing_phone = $order->get_billing_phone(); echo 'Billing phone: ' . $billing_phone;
4. Informations relatives à l’expédition
Les informations relatives à l’expédition comprennent les détails relatifs à l’endroit où la commande sera expédiée. Comme pour les informations de facturation, vous pouvez accéder à ces informations à l’aide de l’objet $order:
- Adresse de livraison :
$shipping_address = $order->get_formatted_shipping_address(); echo 'Shipping address: ' . $shipping_address;
5. Articles de la commande
Vous pouvez récupérer les articles inclus dans une commande, ce qui est particulièrement utile si vous souhaitez afficher les produits achetés. Voici comment récupérer les articles de la commande :
$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. Moyens de paiement et d’expédition
Vous pouvez également obtenir des informations sur les modes de paiement et d’expédition utilisés pour la commande :
- Moyen de paiement :
$payment_method = $order->get_payment_method_title(); echo 'Payment method: ' . $payment_method; - Mode d’expédition :
$shipping_methods = $order->get_shipping_methods(); foreach ( $shipping_methods as $shipping_method ) { echo 'Shipping method: ' . $shipping_method->get_name(); }
7. État de la commande
L’état de la commande peut être utile pour diverses fonctionnalités, telles que le suivi de l’avancement de la commande :
$order_status = wc_get_order_status_name( $order->get_status() );
echo 'Order status: ' . $order_status;Création d’une page permettant d’afficher les détails d’une commande en fonction de son numéro d’identification
Pour offrir à vos clients une expérience transparente, il est utile de créer une page personnalisée où ils peuvent consulter les détails de leur commande en entrant simplement leur numéro d’identification.
Nous allons vous guider dans la création d’une page, y compris la configuration du modèle et l’affichage des informations relatives à la commande.
Étape 1 : Créer un modèle de page personnalisé
Tout d’abord, créez un modèle de page personnalisé dans votre thème WordPress. Ce modèle sera utilisé pour afficher les détails de la commande.
Pour cela, accédez au code source de votre projet. Si vous avez créé votre projet avec DevKinsta, il est facile d’y accéder. Vous pouvez également utiliser un client FTP en utilisant les paramètres de la page d’information de votre site (Sites WordPress > nom du site > Info).
Dans le répertoire de votre thème enfant, créez un nouveau fichier nommé page-order-details.php. Ajoutez le code suivant à ce fichier :
<?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>';
}Décomposons ce code pour que vous compreniez bien.
Tout d’abord, vous remarquerez les fonctions get_header() et get_footer(), qui incluent l’en-tête et le pied de page standard de WordPress pour la page, en veillant à ce qu’elle conserve la conception et la mise en page globales du site.
Nous avons également quelques balises HTML de base qui sont importantes pour l’affichage du texte sur le web. Le prochain code important que vous remarquerez est la condition qui vérifie si une adresse order_id est passée en tant que paramètre d’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>';
}Si un order_id existe, il nettoie l’entrée à l’aide de intval() et appelle la fonction display_order_details. Si aucun order_id n’est fourni, il affiche un message l’indiquant.
La fonction display_order_details est la fonction déclarée sous get_footer(). Cette fonction prend l’ID de l’ordre en entrée et récupère l’objet d’ordre correspondant à l’aide de wc_get_order().
Si l’identifiant de la commande n’est pas valide, elle émet un message d’erreur. Dans le cas contraire, elle récupère et affiche divers détails de la commande tels que l’ID de la commande, la date, le total, les adresses de facturation et de livraison, l’adresse e-mail, le téléphone, le moyen de paiement et l’état de la commande dans une liste non ordonnée.
En outre, il parcourt les éléments de la commande et affiche le nom du produit, la quantité et le prix total pour chaque élément dans une autre liste non ordonnée.
Étape 2 : Ajouter le modèle à votre thème et créez une nouvelle page dans WordPress
Enregistrez le fichier page-order-details.php dans le répertoire de votre thème enfant. Le modèle pourra ainsi être sélectionné lors de la création d’une nouvelle page dans WordPress.
Ensuite, allez dans Pages > Ajouter dans votre tableau de bord d’administration WordPress. Donnez un nom à la page, puis dans la section Attributs de la page sur la droite, sélectionnez le modèle Détails de la commande dans la liste déroulante Modèle.
Si vous ne voyez pas la section Attributs de la page, vous pouvez retourner sur Pages, où vous verrez une liste de toutes les pages avec quelques options lorsque vous survolez chaque page. Sélectionnez Modification rapide, et vous verrez alors la section Attributs de page.
Publiez la page et vous pouvez maintenant tester la page de détails de la commande personnalisée.
Pour tester, naviguez dans votre navigateur et ajoutez ?order_id=ORDER_ID à l’URL, en remplaçant ORDER_ID par un identifiant de commande WooCommerce valide. Par exemple, https://yourwebsite.com/order-details/?order_id=70
Cela devrait afficher les détails de la commande pour l’ID de commande spécifié.
Vous pouvez ensuite ajouter du style au modèle comme vous le souhaitez.
Création d’une page de détails de commande à l’aide du code court de suivi de commande de WooCommerce
Une autre option que vous ne connaissez peut-être pas est le code court de suivi de commande de WooCommerce, qui fournit une interface utilisateur permettant aux utilisateurs de rechercher les détails de leur commande en saisissant leur numéro de commande et leur adresse e-mail.
Cette page affiche le numéro de commande, la date, l’état, les articles, l’expédition et l’adresse de facturation. Elle peut être utile si vous n’avez pas l’intention d’afficher des informations plus détaillées.
Créer une page de suivi de commande à l’aide du code court de suivi de commande de WooCommerce est un moyen simple d’améliorer l’expérience client sans avoir à se plonger dans un codage personnalisé.
Pour cela, suivez les étapes suivantes :
- Connectez-vous à votre tableau de bord WordPress.
- Ensuite, créez une nouvelle page en naviguant vers Pages > Ajouter.
- Donnez un titre à la page et, dans l’éditeur de page, ajoutez le code court suivant :
[woocommerce_order_tracking] - Cliquez ensuite sur le bouton Publier pour mettre la page en ligne.
C’est aussi simple que cela. Mais cela ne vous donnera peut-être pas la flexibilité que vous souhaitez.
Résumé
La création d’une page de détails de commande dans WooCommerce améliore l’expérience client en fournissant un accès facile aux informations de la commande, en améliorant la transparence et la satisfaction du client.
Si vous rencontrez des lenteurs dans votre boutique WordPress, en particulier les grandes boutiques avec beaucoup de produits, il est essentiel de savoir qu’une partie importante de la performance de votre site dépend de la qualité de votre hébergement.
Heureusement, avec Kinsta comme fournisseur d’hébergement pour votre boutique WooCommerce, vous n’aurez pas à vous soucier de cela.
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
Laisser un commentaire