Как удалить заголовок H2 из сообщений WooCommerce без нарушения стилей

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

В стандартных шаблонах WooCommerce некоторые уведомления, такие как сообщения о добавлении товара в корзину или ошибки, отображаются с заголовком H2. Иногда он конфликтует с дизайном или SEO-структурой страницы, особенно если заголовков H2 слишком много или они расположены не по иерархии. Удаление этого заголовка без нарушения стилей и функциональности — частая задача при кастомизации магазина.

Как найти и проверить отображение заголовков H2 в сообщениях WooCommerce

Откройте любую страницу магазина, например страницу категории или карточку товара, и выполните следующие шаги:

• Откройте консоль разработчика (F12) и перейдите на вкладку Elements.
• Найдите сообщения WooCommerce — они обычно обернуты в <div class="woocommerce-message"> или <div class="woocommerce-error">.
• Проверьте, есть ли внутри тег <h2> с текстом сообщения. Если есть, значит заголовок выводится стандартно.

Например:

<div class="woocommerce-message" role="alert">
  <h2>Товар добавлен в корзину.</h2>
  <a href="/cart" class="button wc-forward">Просмотр корзины</a>
</div>

Пошаговое удаление заголовка H2 из сообщений WooCommerce

1. Переопределение шаблона сообщений WooCommerce

WooCommerce выводит сообщения через шаблон woocommerce/notices/notice.php. Чтобы изменить его, скопируйте файл в папку вашей темы:

wp-content/plugins/woocommerce/templates/notices/notice.php
==> wp-content/themes/your-theme/woocommerce/notices/notice.php

В этом файле найдите блок, который выводит заголовок:

<?php if ( $notice['data']['title'] ?? false ) : ?>
  <h2 class="woocommerce-notice__title"><?php echo wp_kses_post( $notice['data']['title'] ); ?></h2>
<?php endif; ?>

Удалите или закомментируйте этот блок, чтобы заголовок не выводился.

2. Удаление заголовка через фильтр (если шаблон менять нельзя)

Если вы не хотите переопределять шаблон, можно убрать заголовок с помощью фильтра, удаляя ключ title из массива сообщений. Добавьте в functions.php темы:

add_filter('woocommerce_add_message', function($message) {
  if ( is_array($message) && isset($message['data']['title']) ) {
    unset($message['data']['title']);
  }
  return $message;
}, 10, 1);

Однако этот способ работает не всегда, так как WooCommerce может выводить сообщения и простыми строками.

3. CSS-скрытие заголовка

Если код менять нельзя, можно просто скрыть заголовок через CSS. Добавьте в style.css темы:

.woocommerce-message h2,
.woocommerce-error h2,
.woocommerce-info h2 {
  display: none;
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
}

Этот вариант простой, но заголовок останется в HTML, что не идеально для SEO.

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

После внесения изменений проверьте:

• Обновите страницу с сообщениями WooCommerce (например, добавьте товар в корзину).
• Откройте консоль разработчика и убедитесь, что тег <h2> отсутствует внутри блока сообщений или скрыт.
• Проверьте визуально — заголовок должен отсутствовать.
• Проверьте корректность работы других сообщений (ошибок, информации).

Частые ошибки и их решения

• Удален весь блок сообщений — вместо удаления только заголовка удалили весь код вывода. Решение: редактируйте только тег <h2>.
• Изменения не применяются — кеш браузера или плагина оптимизации. Решение: очистите кеш, деактивируйте оптимизацию CSS временно.
• CSS не скрывает заголовок — селекторы не совпадают с темой. Решение: уточните селекторы через инспектор браузера.
• Потеря важной информации в сообщениях — при удалении заголовка данные сообщений пропадают. Решение: убедитесь, что удаляется только тег заголовка, а текст сообщения остается.

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

• Переопределяйте только необходимые шаблоны, чтобы не увеличивать время загрузки.
• Избегайте жесткого скрытия элементов через CSS, если можно сделать это через PHP — это лучше для SEO и доступности.
• Тестируйте изменения на дев-сайте перед применением на боевом.
• Используйте дочернюю тему для кастомизаций, чтобы не потерять изменения при обновлении темы.

Сравнение вариантов удаления заголовка H2 в WooCommerce