Как создать страницу сведений о заказе WooCommerce

Страница сведений о заказе WordPress

WooCommerce — мощный инструмент для создания интернет-магазинов на WordPress, который позволяет делать все: от демонстрации товаров до оформления покупок, управления налогами и т.д.

Одной из отличительных особенностей ВуКомерс является способность сохранять подробную информацию о заказах. Он тщательно хранит все аспекты, включая сумму, валюту, детали доставки, налоги и многое другое.

Эта подробная информация ценна как для владельцев магазинов, так и для покупателей. Представьте себе раздел, где пользователи смогут без труда проверить детали покупки и кастомизировать его для отображения дополнительных данных.

В руководстве я расскажу, как создать кастомную страницу WooCommerce, которая будет отображать аспекты заказа на основе его идентификатора.

Зачем вам создавать кастомную страницу деталей заказа?

Создание кастомной страницы деталей заказа в ВуКомерс может дать несколько преимуществ, удовлетворяя как потребности владельца магазина, так и покупателя. Вот несколько веских причин, почему вы захотите это сделать:

Улучшенный пользовательский опыт — кастомная страница деталей заказа позволяет представить информацию о покупке, которая наилучшим образом соответствует потребностям клиентов. Она разрешает кастомизировать макет и содержание, чтобы выделить важные аспекты, такие как статус и даты доставки, особенности товара, облегчая людям быстрый поиск нужных сведений.

Дополнительные функции. Она позволит добавить недоступные опции, которые по умолчанию есть в WooCommerce. Например, вы можете отображать кастомные поля, такие как сообщения о подарках, специальные инструкции или персонализированные заметки, уникальные для каждого заказа.

Интерактивность. Она разрешает включать элементы, такие как индикаторы выполнения заказа, ссылки на сопутствующие товары или прямой доступ к службе поддержки. Это обеспечит богатый и увлекательный пользовательский опыт.

Гибкость и адаптивность. Создание страницы сведений о заказе позволяет реализовать логику, специфичную для конкретного бизнеса, и адаптироваться к меняющимся потребностям. Вы можете отображать различную информацию на основе уникальных для интернет-магазина критериев, таких как местоположение покупателя или тип заказанных товаров.

Как получить данные о заказе из объекта $order

В WooCommerce объект $order является центральным элементом, содержащим всю информацию о конкретном заказе. Используя его, вы можете узнать различные сведения, такие как идентификатор, дата, данные о выставлении счета и доставке, а также о приобретенных товарах.

Давайте подробно рассмотрим, как получить доступ и использовать эти различные части информации из объекта $order.

Получение объекта заказа

Сначала необходимо получить объект с помощью функции wc_get_order. Она принимает идентификатор заказа. Далее функция возвращает соответствующий объект.

$order_id = 123; // Пример идентификатора заказа $order = wc_get_order( $order_id );

Основная информация о заказе

Получив объект $order, вы можете узнать основную информацию о заказе. Вот несколько примеров:

ID — уникальный идентификатор заказа.

$order_id = $order->get_id();
 echo 'ID заказа: ' . $order_id;

Дата, когда он был создан.

$order_date = $order->get_date_created(); 
 echo 'Дата заказа: ' . wc_format_datetime( $order_date );

Общая сумма заказа.

$order_total = $order->get_formatted_order_total(); 
 echo 'Сумма заказа: ' . $order_total;

Информация для выставления счета

Информация о выставлении счета включает данные, предоставленные клиентом в процессе оформления заказа. Вы можете получить их следующими методами:

Адрес для выставления счета.

$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;

Информация о доставке

Информация о доставке включает сведения, куда будет отправлен заказ. Вы можете получить доступ к этим данным с помощью объекта $order:

Адрес доставки.

$shipping_address = $order->get_formatted_shipping_address();
 echo 'Адрес доставки: ' . $shipping_address;

Элементы заказа

Вы можете получить информацию о товарах, включенных в заказ, что особенно удобно, если хотите отобразить уже купленные продукты. Вот как это сделать:

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

Способы оплаты и доставки

Вы также можете получить информацию о способах оплаты и доставки, использованных при оформлении заказа. Как это сделать:

Метод оплаты.

$payment_method = $order->get_payment_method_title(); 
 echo 'Способ оплаты: ' . $payment_method;

Способ доставки.

$shipping_methods = $order->get_shipping_methods(); 
foreach ( $shipping_methods as $shipping_method ) { 
 echo 'Способ доставки: ' . $shipping_method->get_name(); }

Статус заказа

Статус заказа может быть полезен для различных функций, например, для отслеживания хода его выполнения:

$order_status = wc_get_order_status_name( $order->get_status() );
 echo 'Статус заказа: ' . $order_status;

Создание страницы для отображения информации о заказе по ID

Чтобы обеспечить бесперебойную работу с клиентами, полезно создать кастомную страницу, на которой они смогут просматривать детали своего заказа, просто введя идентификатор.

Далее я расскажу, как это сделать, включая кастомизацию шаблона и отображение информации о покупке.

Шаг 1: Создайте шаблон кастомной страницы

Сначала создайте шаблон страницы в вашей теме ВордПресс. Он будет использоваться для отображения информации о заказе.

Для этого перейдите к исходному коду вашего проекта. Можете использовать FTP-клиент, воспользовавшись настройками на странице информации о сайте (WordPress Sites > Sitename > Info).

В директории дочерней темы создайте новый файл с именем page-order-details.php. Добавьте в него следующий код:

<?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><!-- #main -->
</div><!-- #primary -->

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

Давайте разберем его, чтобы вам было понятнее. Во-первых, можно заметить функции get_header() и get_footer(), которые включают стандартные хедер и футер WordPress для страницы, обеспечивая поддержание общего дизайна и макета сайта.

Также есть несколько основных HTML-разметок, которые важны для отображения текста в Интернете.

Следующий важный код, который вы заметите, — это условие, проверяющее, передан ли order_id в качестве параметра URL.

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

Если ID заказа существует, то выполняется проверка ввода с помощью функции intval() и вызывается функция display_order_details. Если идентификатор не указан, выводится сообщение об этом.

display_order_details — это функция, объявленная под get_footer(). Она принимает на вход идентификатор заказа и извлекает соответствующий объект с помощью wc_get_order().

Если ID недействителен, она выводит сообщение об ошибке. В противном случае извлекает и отображает в неупорядоченном списке различные детали, такие как идентификатор, дата, общая сумма, адреса выставления счета и доставки, электронная почта, телефон, способ оплаты и статус заказа.

Кроме того, он перебирает все элементы. Далее выводит название продукта, количество и совокупную цену для каждого компонента в другом неупорядоченном списке.

Шаг 2: Добавьте шаблон в вашу тему и создайте новую страницу в WordPress

Сохраните файл page-order-details.php в директории дочерней темы. Это сделает шаблон доступным для выбора при создании новой страницы в ВордПресс.

Далее перейдите в меню «Страницы» > «Добавить новую» на дашборде WordPress. Дайте ей имя, а затем в «Атрибуты» справа выберите шаблон Order Details из выпадающего списка Template.

Если не видите этот раздел, можете вернуться в «Страницы», где при наведении курсора на каждую вы найдете список всех вариантов с некоторыми опциями. Выберите «Быстрое редактирование». Далее сможете посмотреть «Атрибуты».

Опубликуйте ее, и теперь у вас есть возможность протестировать кастомную страницу сведений о покупке.

Для проверки перейдите в браузер и добавьте ?order_id=ORDER_ID к URL, заменив ORDER_ID на действительный идентификатор заказа WooCommerce. Например, https://yourwebsite.com/order-details/?order_id=70.

В результате отобразится информация о заказе для указанного ID заказа.

Детали заказа по идентификатору заказа

Затем можете добавить в шаблон стилистику по своему усмотрению.

Создание страницы с деталями заказа с помощью шорткода WooCommerce для отслеживания заказов

Еще один вариант — это шорткод ВуКомерс для отслеживания покупок. Он предоставляет пользователям кастомный интерфейс для поиска информации путем ввода номера заказа и адреса электронной почты. Как это выглядит:

Детали заказа из шорткода отслеживания заказов

На этой странице отображается номер заказа, дата, статус, товары, доставка и адрес для выставления счета. Это может быть полезно, если не планируете показывать более подробную информацию.

Создание страницы отслеживания заказа с помощью шорткода WooCommerce — это простой способ повысить удобство работы с покупателями, не вникая в особенности программирования.

Как это сделать:

  1. Войдите в дашборд WordPress.
  2. Перейдите в раздел «Страницы» > «Добавить новую», чтобы создать ее.
  3. Дайте ей название и в редакторе вставьте следующий шорткод: [woocommerce_order_tracking].
  4. Затем нажмите кнопку «Опубликовать», чтобы сделать страницу активной.

Все очень просто. Но это может не дать вам желаемой гибкости.

Заключение

Создание страницы с деталями заказа в WooCommerce улучшает качество обслуживания, обеспечивая легкий доступ к информации о покупках, повышая прозрачность и удовлетворенность клиентов.

Рейтинг
( Пока оценок нет )
Александр/ автор статьи

Специалист по WordPress с фокусом на создании качественных и уникальных сайтов. Мой опыт включает разработку шаблонов с нуля, интеграцию и тестирование плагинов, а также поддержание безопасности и SEO-оптимизацию проектов.

Загрузка ...
Шаблоны для WordPress