Ситуация наверняка знакома: вы нашли идеальную тему для интернет-магазина, всё красиво работает, но вот детальная страница товара выглядит не так, как нужно. Или каталог отображается не в том порядке. Или корзина вообще не вписывается в дизайн. Вы лезете в файлы плагина, меняете код — и после обновления WooCommerce всё слетает. Знакомо?
Проблема в том, что многие разработчики (и даже опытные) правят файлы плагина напрямую. Это классическая ошибка. Переопределение шаблонов WooCommerce через тему — единственный правильный способ кастомизации, который переживёт обновления и не сломает ничего лишнего. Давайте разберёмся, как это работает на практике.
Как WooCommerce использует шаблоны
WooCommerce устроен не так, как большинство плагинов. Он не просто добавляет шорткоды на страницу — у него полноценная система шаблонов, похожая на сам WordPress. Каждый элемент магазина — страница товара, архив категорий, корзина, оформление заказа — рендерится отдельным PHP-файлом.
Все шаблоны лежат внутри плагина в папке templates/. Там вы найдёте десятки файлов: от single-product.php до checkout/form-pay.php. Но вот ключевой момент — WooCommerce перед рендерингом каждого шаблона проверяет, есть ли его переопределённая версия в вашей теме. Если есть — используется она. Нет — дефолтная из плагина.
Именно этот механизм и делает переопределение шаблонов WooCommerce безопасным и удобным. Вы не трогаете ядро плагина, а просто кладёте свою версию файла в нужное место темы.
Иерархия: где WooCommerce ищет шаблоны
Плагин проверяет файлы в строго определённом порядке. Понимание этой цепочки — основа всего.
Порядок поиска шаблона
Когда WooCommerce рендерит, скажем, страницу товара, он ищет файл в таком порядке:
- Дочерняя тема —
wp-content/themes/ваша-тема/woocommerce/ - Родительская тема —
wp-content/themes/родительская-тема/woocommerce/ - Плагин WooCommerce —
wp-content/plugins/woocommerce/templates/
Первый найденный файл побеждает. Поэтому если вы положите single-product.php в your-theme/woocommerce/ — он перекроет стандартный шаблон. Логика простая, но на практике у людей всё равно возникают вопросы.
Почему дочерняя тема — обязательно
Если вы работаете с готовой темой (а не пишете свою с нуля), всегда используйте дочернюю тему. Причина та же, что и с плагинами: когда родительская тема обновится, все правки в её файлах исчезнут. А файлы в дочерней теме останутся нетронутыми.
Структура папок для переопределения:
ваша-дочерняя-тема/ ├── woocommerce/ │ ├── single-product.php │ ├── archive-product.php │ ├── content-product.php │ ├── cart/ │ │ └── cart.php │ └── checkout/ │ └── form-checkout.php ├── functions.php ├── style.css └── ...другие файлы темы
Обратите внимание: структура папок внутри woocommerce/ должна точно повторять структуру оригинальных шаблонов плагина. Если шаблон лежит в templates/single-product.php, ваш файл должен лежать в woocommerce/single-product.php. Если в templates/cart/cart.php — значит woocommerce/cart/cart.php.
Практический пример: переопределяем страницу товара
Допустим, вам нужно изменить расположение элементов на странице товара. Может, перенести цену под описание. Или добавить блок с гарантиями перед кнопкой «Купить».
Шаг 1. Находим оригинальный шаблон. Он лежит в:
wp-content/plugins/woocommerce/templates/single-product.php
Шаг 2. Копируем его в вашу тему:
wp-content/themes/ваша-тема/woocommerce/single-product.php
Шаг 3. Открываете скопированный файл и вносите изменения. Вот как выглядит стандартный шаблон:
<?php
/<em></em>
* The template for displaying all single products
*
* @package WooCommerce\Templates
*/
defined( 'ABSPATH' ) || exit;
get_header( 'shop' );
while ( have_posts() ) {
the_post();
/<em></em>
* Hook: woocommerce_before_single_product.
*/
do_action( 'woocommerce_before_single_product' );
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class(); ?>>
<?php
/<em></em>
* Hook: woocommerce_before_single_product_summary.
*/
do_action( 'woocommerce_before_single_product_summary' );
?>
<div class="summary entry-summary">
<?php
/<em></em>
* Hook: woocommerce_single_product_summary.
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>
<?php
/<em></em>
* Hook: woocommerce_after_single_product_summary.
*/
do_action( 'woocommerce_after_single_product_summary' );
?>
</div>
<?php
}
get_footer( 'shop' );
На первый взгляд это выглядит как обычный файл с хуками. Но не торопитесь всё переписывать — в этом и есть красота WooCommerce. Большинство элементов управляется через хуки, и для многих задач достаточно их переместить.
Хуки versus прямое редактирование
Вот нюанс, который часто упускают. WooCommerce построен на системе хуков — add_action и add_filter. Это значит, что далеко не каждый элемент нужно редактировать через переопределение шаблонов.
Например, чтобы перенести цену товара, нет смысла копировать весь single-product.php. Достаточно в functions.php вашей темы написать:
// Убираем цену из стандартной позиции remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 ); // Ставим цену после описания add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 25 );
Числа 10 и 25 — это приоритет. Чем меньше число, тем раньше выполняется хук. Стандартные элементы страницы товара имеют такие приоритеты:
- 5 — заголовок товара
- 10 — рейтинг
- 10 — цена
- 20 — краткое описание
- 30 — кнопка «Добавить в корзину»
- 40 — мета-данные (категории, артикул)
Переопределять шаблон целиком стоит, когда нужно:
- Полностью изменить HTML-структуру страницы
- Добавить кастомные блоки между секциями (не через хуки)
- Изменить логику отображения (условия, расчёты)
- Коренным образом переделать верстку под уникальный дизайн
Переопределение мини-шаблонов: content-product.php
Помимо основных страниц, WooCommerce использует мини-шаблоны (partial templates). Самый часто переопределяемый — content-product.php. Он отвечает за то, как каждый товар выглядит в каталоге: сетке товаров, результатах поиска, виджетах.
Стандартный файл:
<?php
defined( 'ABSPATH' ) || exit;
global $product;
?>
<li <?php wc_product_class( '', $product ); ?>>
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
<?php do_action( 'woocommerce_before_shop_loop_item_title' ); ?>
<?php do_action( 'woocommerce_shop_loop_item_title' ); ?>
<?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?>
<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>
</li>
Минималистично, правда? Каждый блок — отдельный хук. Но если вам нужна карточка товара с hover-эффектом, бейджами «Хит» или «Скидка», быстрым просмотром — всё это проще сделать прямо в переопределённом шаблоне.
Копируем content-product.php в your-theme/woocommerce/content-product.php и верстаем как нужно.
Каталог товаров: archive-product.php
Ещё один файл, который переопределяют часто — archive-product.php. Это страница магазина и архивы категорий. Если вам нужно добавить баннер над товарной сеткой, фильтры в нестандартном месте, или вообще изменить логику пагинации — это ваш файл.
Внутри archive-product.php важно сохранить хуки, отвечающие за вывод товаров. Без них сетка не отобразится:
<?php
do_action( 'woocommerce_before_shop_loop' );
woocommerce_product_loop_start();
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
}
woocommerce_product_loop_end();
do_action( 'woocommerce_after_shop_loop' );
Убираете или ломаете эту конструкцию — и каталог пустой. А потом три часа ищете баг, которого на самом деле нет.
Частые ошибки при переопределении шаблонов
Поработав с десятками проектов, я выделил типичные проблемы, с которыми сталкиваются разработчики:
Несовпадение версий. WooCommerce регулярно обновляет шаблоны. В каждом релизе в папке templates/ меняются файлы. Когда плагин обновился, а ваш переопределённый шаблон остался от старой версии — WooCommerce покажет предупреждение в админке. И хорошо, если просто предупреждение. Бывает, что новая логика сломает отображение.
Решение: после каждого обновления WooCommerce проверяйте файл templates/ на изменения. В официальном чейнджлоге всегда указано, какие шаблоны обновились.
Забытые хуки. Удалили хук из переопределённого шаблона — сломали работу сторонних плагинов. Например, плагин для отзывов добавляет блок через woocommerce_after_single_product_summary. Вы этот хук убрали — отзывы пропали. Клиент злится, а вы гадаете, что случилось.
Копирование в неправильную папку. Частая история: файл лежит в woocommerce/content-product.php, а должен в woocommerce/content-product.php. Звучит одинаково? А если структура такая:
woocommerce/
├── single-product.php ← ОК
├── content-product.php ← ОК
└── cart/
└── cart.php ← OK
А кто-то кладёт cart.php прямо в woocommerce/cart.php — и удивляется, что не работает. Путь имеет значение.
Редактирование файлов плагина. Ну и классика. Кто-то открывает wp-content/plugins/woocommerce/templates/single-product.php, правит его, и живёт счастливо до первого обновления. После которого все правки исчезают, а клиент звонит в панике.
Какие шаблоны переопределяют чаще всего
По опыту, 80% кастомизации приходится на несколько файлов:
single-product.php— страница товара (структура)content-product.php— карточка товара в каталогеarchive-product.php— страница магазина / категорийcart/cart.php— страница корзиныcheckout/form-checkout.php— форма оформления заказаloop/sale-flash.php— бейдж «Sale»single-product/add-to-cart/variable.php— вариативные товары
Добавить комментарий