WooCommerceは、WordPressでオンラインストアを構築するための人気ソリューション。商品の表示から購入手続き、消費税の管理など、あらゆるタスクを処理することができます。

そんなWooCommerceの際立った特徴は、詳細な注文情報を管理できる点にあります。金額、通貨、配送先情報、消費税など、注文のあらゆる情報を保存可能です。

この情報はお店側にとっても買い物客にとっても有用で、たとえば買い物客が簡単に注文情報を確認できるページを作成し、必要に応じて追加の情報も表示できるようになればかなり便利です。

そこで今回は、注文IDで注文情報を照会できるWooCommerceページの作成方法をご紹介します。

注文情報の照会ページを作成するメリット

WooCommerceの注文情報ページを作成することには、ショップ所有者と買い物客の両方にメリットがあります。

  1. ユーザーエクスペリエンスの向上─買い物客向けに注文情報を表示。ページのレイアウトや内容もカスタマイズできるため、配送状況や注文内容の詳細、配送日などの重要な情報を強調し、必要な情報を見つけやすくすることもできる。
  2. 機能の拡張─デフォルトでは利用できない機能を追加。ギフトメッセージ、特別な指示、または注文固有のパーソナライズされたメモ用にカスタムフィールドを表示することができる。
  3. インタラクティブ性─注文追跡用のプログレスバー、関連商品へのリンク、カスタマーサポートへのアクセスなどのインタラクティブな要素を含めて、より魅力的な体験を提供できる。
  4. 柔軟性と適応性─ビジネス固有のロジックを実装し、要件の変化に対応。買い物客の住所や注文商品の種類など、店舗独自の基準に基づいて異なる情報を表示できる。

$orderオブジェクトを使って注文データを取得する方法

WooCommerceの$orderオブジェクトは、特定の注文に関するすべての情報を含む中心的な要素です。このオブジェクトを活用することで、注文ID、注文日、請求・配送先情報、購入商品など、注文に関するさまざまな情報を取得することができます。

$orderオブジェクトでデータにアクセスして取得する方法をご紹介します。

1. $orderオブジェクトの取得

まずは、wc_get_order関数を使用して注文IDを受け取り、$orderオブジェクトを取得します。

$order_id = 123; // 注文IDの例
$order = wc_get_order( $order_id );

2. 注文の基本情報

$orderオブジェクトを取得したら、その注文に関する基本情報を取得します。以下のようになります。

  • 注文ID：注文の一意識別子 
    $order_id = $order->get_id();
echo 'Order ID: ' . $order_id;
  • 注文日：注文が作成された日付 
    $order_date = $order->get_date_created();
echo 'Order date: ' . wc_format_datetime( $order_date );
  • 注文合計：注文の合計金額 
    $order_total = $order->get_formatted_order_total();
echo 'Order total: ' . $order_total;

3. 請求情報

請求情報には、決済中に買い物客から提供された情報が含まれます。以下の方法で取得可能です。

  • 請求先住所 
    $billing_address = $order->get_formatted_billing_address();
echo 'Billing address: ' . $billing_address;
  • 請求先メールアドレス 
    $billing_email = $order->get_billing_email();
echo 'Billing email: ' . $billing_email;
  • 請求先電話番号 
    $billing_phone = $order->get_billing_phone();
echo 'Billing phone: ' . $billing_phone;

4. 配送情報

配送情報には、注文の発送先情報が含まれます。請求情報と同じように、$orderオブジェクトを使用してアクセス可能です。

  • 配送先住所 
    $shipping_address = $order->get_formatted_shipping_address();
echo 'Shipping address: ' . $shipping_address;

5. 注文商品

購入商品を表示する場合には、注文に含まれる商品情報を取得することもできます。

$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. 支払い方法と配送方法

決済が行われた支払い方法と配送方法に関する情報を取得するには、以下を使用します。

  • 支払い方法 
    $payment_method = $order->get_payment_method_title();
echo 'Payment method: ' . $payment_method;
  • 配送方法 
    $shipping_methods = $order->get_shipping_methods();
foreach ( $shipping_methods as $shipping_method ) {
echo 'Shipping method: ' . $shipping_method->get_name();
}

7. 注文状況

注文状況は、商品が今どこにあるかを追跡するなど、さまざまな用途に役立ちます。

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

注文IDで注文情報を紹介するページの作成方法

注文IDで簡単に注文情報を照会できるページを用意することで、買い物客にシームレスな体験を提供することができます。

続いてはテンプレートの設定や注文情報の表示など、ページの作成方法について見ていきます。

1. ページテンプレートの作成

まずは、WordPressテーマで注文情報を表示するためのテンプレートを独自に作成します。

これにはストアのソースコードに移動します。DevKinstaでプロジェクトを作成した場合は、簡単にアクセス可能です。MyKinstaの「情報」画面（「WordPressサイト」＞（サイト名）＞「情報」）の設定で、FTPクライアントを使用することもできます。

子テーマのディレクトリに、「page-order-details.php」という名前でファイルを作成し、以下のコードを貼り付けます。

<?php
/**
 * Template Name: 注文情報
 */
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>注文IDがありません</p>';
        }
        ?>

    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_footer();

// 注文情報を表示する機能
function display_order_details( $order_id ) {
    $order = wc_get_order( $order_id );
    if ( ! $order ) {
        echo '<p>注文IDが無効です</p>';
        return;
    }

    echo '<h2>注文情報</h2>';
    echo '<ul>';
    echo '<li>注文ID: ' . $order->get_id() . '</li>';
    echo '<li>注文日: ' . wc_format_datetime( $order->get_date_created() ) . '</li>';
    echo '<li>注文合計: ' . $order->get_formatted_order_total() . '</li>';
    echo '<li>請求先住所: ' . $order->get_formatted_billing_address() . '</li>';
    echo '<li>配送先住所: ' . $order->get_formatted_shipping_address() . '</li>';
    echo '<li>請求先メールアドレス: ' . $order->get_billing_email() . '</li>';
    echo '<li>請求先電話番号: ' . $order->get_billing_phone() . '</li>';
    echo '<li>支払い方法: ' . $order->get_payment_method_title() . '</li>';
    echo '<li>注文状況: ' . wc_get_order_status_name( $order->get_status() ) . '</li>';
    echo '</ul>';

    echo '<h3>注文商品</h3>';
    echo '<ul>';
    $items = $order->get_items();
    foreach ( $items as $item_id => $item ) {
        echo '<li>';
        echo '商品名: ' . $item->get_name() . '<br>';
        echo '数量: ' . $item->get_quantity() . '<br>';
        echo '合計: ' . wc_price( $item->get_total() ) . '<br>';
        echo '</li>';
    }
    echo '</ul>';
}

上のコードを掘り下げてみましょう。

get_header()とget_footer()には、標準的なWordPressのヘッダーとフッターが含まれており、サイト全体のデザインとレイアウトが維持されるようになっています。

また、ウェブ上でテキストを表示するために欠かせない基本的なHTMLマークアップも含まれます。次に重要になるのが、order_idがURLパラメータとして渡されたかどうかをチェックする条件です。

if ( isset( $_GET['order_id'] ) ) {
    $order_id = intval( $_GET['order_id'] );
    display_order_details( $order_id );
} else {
    echo '<p>注文IDがありません</p>';
}

上のコードは、order_idが存在する場合、intval()を使用して入力情報をサニタイズし、display_order_details関数を呼び出します。order_idが提供されない場合は、その旨を示すメッセージを出力します。

display_order_details関数はget_footer()の下で宣言される関数です。この関数は注文IDを入力として受け取り、wc_get_order()を使用して対応する注文オブジェクトを検索します。

注文IDが無効な場合、エラーメッセージが出力され、注文IDが有効である場合は、注文ID、注文日、合計金額、請求先住所、配送先住所、メールアドレス、電話番号、支払い方法、注文状況などなどの情報を取得し、順序なしリストとして表示します。

さらに注文商品をループし、各商品の名前、数量、合計金額を別の順序なしリストで表示します。

2. テンプレートをテーマに追加してページを作成

子テーマのディレクトリにpage-order-details.phpファイルを保存すると、WordPressで固定ページを作成する際にテンプレートを選択できるようになります。

その次に、WordPress管理画面の「固定ページ」＞「新規追加」に移動します。固定ページに名前を付け、右側の「ページ属性」セクションでテンプレートのドロップダウンから「注文情報」テンプレートを選択します。

「ページ属性」セクションが表示されない場合は、「固定ページ」に戻り、対象の固定ページにカーソルを合わせて「クイック編集」を選択すると表示されます。

固定ページを公開すると、注文情報ページをテストすることができます。

テストするにはブラウザに移動し、ORDER_IDを実際のWooCommerceの注文IDに置き換えて、?order_id=ORDER_IDをURLに追加します。例：https://yourwebsite.com/order-details/?order_id=70

これで、以下のように注文IDに紐づく注文情報が表示されるはずです。

注文IDで照会する注文情報ページ
注文IDで照会する注文情報ページ

ここからは、サイトの外観やブランディングに応じてスタイルを加えてください。

WooCommerceの注文追跡ショートコードを使って注文情報紹介ページを作成する方法

WooCommerceの注文追跡ショートコードを使って、買い物客が注文IDとメールアドレスを入力することで、注文情報を照会するためのUIを作成することも可能です。

WooCommerce注文追跡ショートコードからの注文情報
WooCommerce注文追跡ショートコードからの注文情報

このページには、注文ID、注文日、注文状況、商品、配送先住所、請求先住所が表示されます。特別に表示したい追加情報がない場合に便利です。

この方法にはコーディング作業が不要なため、より気軽にユーザー体験を向上させることができます。

手順は以下のとおりです。

  1. WordPress管理画面にログインする
  2. 「固定ページ」＞「新規追加」に移動して新規固定ページを作成する
  3. 固定ページに名前をつけ、エディターに以下のショートコードを追加する 
    [woocommerce_order_tracking]
  4. 「公開」をクリックして固定ページを公開する

以上で完了です。前者の方法と比較して柔軟性には欠けますが、非常に簡単に注文情報ページを作成できます。

まとめ

WooCommerceストアで注文情報ページを作成することで、買い物客が自分の注文情報に簡単にアクセスできるようになり、ビジネスの透明性と顧客満足度の改善に繋がり、ひいてはユーザー体験が向上します。

WordPressを使用したオンラインストア、特に商品数の多い大規模なストアで動作が遅くなる場合には、利用しているホスティングサービスの質を見直す時かもしれません。ホスティング選びはサイトのパフォーマンスを大きく左右します。

Kinstaでは、WooCommerceストアに相性抜群のホスティングサービスを提供しています。ぜひ一度お試しください。

Joel Olawanle Kinsta

Kinstaでテクニカルエディターとして働くフロントエンド開発者。オープンソースをこよなく愛する講師でもあり、JavaScriptとそのフレームワークを中心に200件以上の技術記事を執筆している。