Как сделать отзывы с аватаркой в WooCommerce без плагинов

Проблема: стандартные отзывы WooCommerce без аватарок

WooCommerce по умолчанию использует стандартные комментарии WordPress для отзывов, но не выводит аватарки покупателей рядом с их отзывами. Это снижает доверие и визуальную привлекательность раздела отзывов. Плагины для отзывов могут решить эту задачу, но часто добавляют лишний код и замедляют сайт. Задача — добавить аватарки к отзывам WooCommerce с помощью кода, без установки дополнительных плагинов.

Диагностика: как проверить, что аватарки не выводятся

Откройте страницу товара с отзывами. Если рядом с именем автора отзыва нет изображения, значит, аватарка не подключена. Проверьте в HTML-коде блока отзыва наличие тега <img> с классом avatar. Его отсутствие подтверждает проблему.

Пошаговое решение: добавляем поддержку аватарок в отзывы WooCommerce

1. Подключаем аватарки в шаблоне комментариев WooCommerce

WooCommerce использует шаблон comments.php из темы или свой шаблон для отзывов. Чтобы добавить аватарки, нужно отредактировать функцию вывода комментариев.

В functions.php вашей дочерней темы добавьте следующий код:

add_filter('woocommerce_product_review_comment_form_args', function($args) {
    $args['title_reply'] = 'Оставьте ваш отзыв';
    return $args;
});

// Функция для кастомного вывода комментариев с аватаркой
function wpkama_woocommerce_comments($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment;
    ?>
    <li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
        <div class="comment-body">
            <div class="comment-avatar">
                <?php echo get_avatar($comment, 64); ?>
            </div>
            <div class="comment-content">
                <div class="comment-meta">
                    <strong><?php comment_author(); ?></strong> <span class="comment-date"><?php comment_date(); ?></span>
                </div>
                <div class="comment-text"><?php comment_text(); ?></div>
            </div>
            <div class="clear"></div>
        </div>
    </li>
    <?php
}

// Подключаем кастомный коллбек в WooCommerce
add_filter('woocommerce_product_review_list_args', function($args) {
    $args['callback'] = 'wpkama_woocommerce_comments';
    return $args;
});

2. Стили для корректного отображения аватарок

Добавьте в файл стилей темы (style.css) следующий CSS, чтобы аватарка красиво выглядела рядом с отзывом:

.comment-avatar {
    float: left;
    margin-right: 10px;
}
.comment-content {
    overflow: hidden;
}
.comment-body {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

Проверка результата

Обновите страницу товара с отзывами и проверьте, что у каждого отзыва появилась аватарка пользователя. Если вы оставите новый отзыв, аватарка должна подтянуться из Gravatar по email. Если аватарка не отображается, проверьте:

• Включены ли комментарии для товаров (WooCommerce → Настройки → Продукты → Включить отзывы);
• Правильно ли подключен кастомный callback в фильтре woocommerce_product_review_list_args;
• В консоли браузера нет ли ошибок JS, которые могут блокировать вывод;
• В исходном коде страницы есть ли <img class="avatar"> с нужным src.

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

• Аватарка не загружается — проверьте, что email пользователя зарегистрирован в Gravatar, иначе будет дефолтная картинка.
• Отзывы не отображаются — убедитесь, что отзывы разрешены в настройках WooCommerce и что шаблон темы не переопределяет вывод комментариев.
• Стиль сломан, аватарка не по месту — проверьте CSS, возможно, конфликтует с стилями темы или плагинов.
• Код вызывает PHP ошибки — убедитесь, что код вставлен именно в functions.php дочерней темы и что синтаксис сохранён.

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

• Используйте кеширование HTML отзывов, чтобы снизить нагрузку на сервер при большом количестве комментариев.
• Ограничьте размер аватарок через параметр get_avatar($comment, 64) — 64px достаточно для отзывов.
• Проверяйте пользовательский ввод в отзывах, чтобы избежать XSS-атак — WooCommerce и WordPress уже фильтруют комментарии, но будьте внимательны при кастомизации.

Сравнение вариантов реализации

Вариант	Описание	Плюсы	Минусы
Плагин для отзывов с аватарками	Установка готового плагина, например Customer Reviews	Простота, множество функций, поддержка	Дополнительная нагрузка, возможны конфликты, зависимость от обновлений
Кастомный код в functions.php	Добавление аватарок через хуки и шаблоны	Лёгкий, не зависит от сторонних плагинов, контролируемый код	Требует навыков, возможно придётся адаптировать при смене темы