Ситуация наверняка знакома: вы нашли идеальную тему для интернет-магазина, всё красиво работает, но вот детальная страница товара выглядит не так, как нужно. Или каталог отображается не в том порядке. Или корзина вообще не вписывается в дизайн. Вы лезете в файлы плагина, меняете код — и после обновления 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/
  • Плагин WooCommercewp-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 — вариативные товары

Добавить комментарий

Разработка сайтов на Wordpress