WooCommerce: как изменить шаблон подтверждения заказа в GeneratePress

Диагностика проблемы: зачем менять шаблон подтверждения заказа

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

Пошаговое решение: как кастомизировать страницу подтверждения заказа

1. Создаем дочернюю тему GeneratePress

Чтобы не потерять изменения при обновлениях, создайте дочернюю тему GeneratePress (если она еще не создана). В корне дочерней темы создайте папку woocommerce.

2. Копируем нужный шаблон WooCommerce

Найдите исходный шаблон подтверждения заказа в папке WooCommerce плагина: woocommerce/templates/checkout/thankyou.php. Скопируйте его в папку дочерней темы: your-child-theme/woocommerce/checkout/thankyou.php.

3. Вносим изменения в шаблон

Откройте файл thankyou.php и внесите нужные правки. Например, добавим кастомное приветствие и уберем вывод номера транзакции:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

?>

<div class="woocommerce-order">
    <?php if ( $order ) : ?>

        <p><strong>Спасибо за ваш заказ, <?php echo esc_html( $order->get_billing_first_name() ); ?>!</strong></p>

        <?php
        // Убираем вывод номера транзакции
        // if ( $order->get_transaction_id() ) {
        //     echo '<p>Номер транзакции: ' . esc_html( $order->get_transaction_id() ) . '</p>';
        // }
        ?>

        <p>Ваш заказ успешно принят и будет обработан в ближайшее время.</p>

        <!-- Можно добавить дополнительные данные, например, ссылку на страницу со скидками -->
        <p><a href="/special-offers">Посмотреть специальные предложения</a></p>

    <?php endif; ?>
</div>

4. Подключение кастомных стилей (опционально)

Добавьте в файл functions.php дочерней темы регистрацию и подключение CSS для стилизации страницы:

function childtheme_enqueue_thankyou_styles() {
    if ( is_order_received_page() ) {
        wp_enqueue_style( 'child-thankyou-style', get_stylesheet_directory_uri() . '/css/thankyou.css', array(), '1.0' );
    }
}
add_action( 'wp_enqueue_scripts', 'childtheme_enqueue_thankyou_styles' );

5. Проверка работоспособности

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

Проверка результата после внедрения

• Откройте страницу подтверждения заказа после оформления тестового заказа.
• Проверьте наличие кастомного сообщения и корректность данных пользователя.
• Убедитесь, что нежелательные элементы (например, номер транзакции) не выводятся.
• Проверьте адаптивность и стилизацию, если подключали кастомные CSS.

Частые ошибки и как их исправить

• Изменения не видны: возможно, кэш браузера или плагинов кэширования. Очистите кэш и попробуйте снова.
• Файл шаблона не применяется: проверьте, что файл thankyou.php лежит в папке дочерней темы woocommerce/checkout/.
• Код вызывает ошибки PHP: убедитесь, что используете правильный синтаксис и не удаляете обязательные части шаблона (например, проверку $order).
• Стили не применяются: проверьте правильность пути и условие подключения стилей в functions.php.

Практические советы по безопасности и производительности

• Используйте функции WordPress для экранирования вывода, например, esc_html(), чтобы избежать XSS-уязвимостей.
• Не редактируйте файлы плагина WooCommerce напрямую — используйте копирование в дочернюю тему.
• Подключайте стили и скрипты только на необходимых страницах (is_order_received_page()), чтобы не нагружать весь сайт.
• При большом количестве кастомизаций рассмотрите использование плагинов для шаблонов, например, WooCommerce Template Override Manager, для удобства управления.

Сравнение вариантов кастомизации шаблона подтверждения заказа