WooCommerce — мощный инструмент для создания интернет-магазинов на WordPress, который позволяет делать все: от демонстрации товаров до оформления покупок, управления налогами и т.д.
Одной из отличительных особенностей ВуКомерс является способность сохранять подробную информацию о заказах. Он тщательно хранит все аспекты, включая сумму, валюту, детали доставки, налоги и многое другое.
Эта подробная информация ценна как для владельцев магазинов, так и для покупателей. Представьте себе раздел, где пользователи смогут без труда проверить детали покупки и кастомизировать его для отображения дополнительных данных.
В руководстве я расскажу, как создать кастомную страницу WooCommerce, которая будет отображать аспекты заказа на основе его идентификатора.
- Зачем вам создавать кастомную страницу деталей заказа?
- Как получить данные о заказе из объекта $order
- Получение объекта заказа
- Основная информация о заказе
- Информация для выставления счета
- Информация о доставке
- Элементы заказа
- Способы оплаты и доставки
- Статус заказа
- Создание страницы для отображения информации о заказе по ID
- Шаг 1: Создайте шаблон кастомной страницы
- Шаг 2: Добавьте шаблон в вашу тему и создайте новую страницу в 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 — это простой способ повысить удобство работы с покупателями, не вникая в особенности программирования.
Как это сделать:
- Войдите в дашборд WordPress.
- Перейдите в раздел «Страницы» > «Добавить новую», чтобы создать ее.
- Дайте ей название и в редакторе вставьте следующий шорткод: [woocommerce_order_tracking].
- Затем нажмите кнопку «Опубликовать», чтобы сделать страницу активной.
Все очень просто. Но это может не дать вам желаемой гибкости.
Заключение
Создание страницы с деталями заказа в WooCommerce улучшает качество обслуживания, обеспечивая легкий доступ к информации о покупках, повышая прозрачность и удовлетворенность клиентов.