Тема: поддержка WooCommerce и стили

Внешний вид магазина задаёт тема WordPress. Чтобы менять его и не терять правки при обновлении темы, создают дочернюю тему — папку, которая наследует всё от родительской и добавляет своё. В ней живут стили и копии шаблонов; логика магазина остаётся в плагине.

Дочерняя тема

В курсе используется бесплатная тема Storefront от авторов WooCommerce:

wp theme install storefront

Создайте папку wp-content/themes/acme-child и в ней файл style.css:

/*
Theme Name: Acme Child
Template: storefront
Version: 1.0.0
*/

Строка Template — имя папки родительской темы. Включите тему в «Внешний вид → Темы» — сайт выглядит как Storefront, но теперь у вас есть место для своих файлов.

Подключение стилей

Создайте рядом файл functions.php:

// wp-content/themes/acme-child/functions.php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'acme-child',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get('Version')
    );
}, 20);

Функция подключает style.css дочерней темы на всех страницах. Номер версии добавляется к адресу файла, чтобы браузер не держал старую копию.

Классы страниц

WooCommerce добавляет к тегу body классы, по которым стили привязывают к нужной странице:

/* wp-content/themes/acme-child/style.css */
.single-product .acme-lead-time {
    color: #2e7d32;
    font-weight: 600;
}
 
.woocommerce ul.products li.product .price {
    font-size: 1.1em;
}

Первое правило красит строку «Изготовим за 3 дн.» из прошлой главы, второе увеличивает цену на плитках каталога.

Поддержка в своей теме

Storefront уже знает о WooCommerce. Если тема написана с нуля, она должна объявить поддержку сама — в своём functions.php:

// wp-content/themes/acme-theme/functions.php
add_action('after_setup_theme', function () {
    add_theme_support('woocommerce', [
        'thumbnail_image_width' => 300,
        'single_image_width' => 600,
    ]);
 
    add_theme_support('wc-product-gallery-zoom');
    add_theme_support('wc-product-gallery-lightbox');
    add_theme_support('wc-product-gallery-slider');
});

Первая строка сообщает, что тема готова к страницам магазина, и задаёт ширину картинок в каталоге и на странице товара. Три следующие включают увеличение, просмотр во весь экран и листание в галерее товара. Без объявления в панели появится предупреждение, а галерея будет простым списком картинок.

Отключить стили WooCommerce

Плагин подключает три собственных файла стилей. Тема со своей вёрсткой может их убрать:

// wp-content/themes/acme-theme/functions.php
add_filter('woocommerce_enqueue_styles', '__return_empty_array');

После этого каталог и корзина останутся без оформления — все стили придётся написать самим. В дочерней теме Storefront этого делать не нужно.

Частая ошибка

Правки вносят прямо в файлы Storefront или другой готовой темы. Обновление темы заменяет папку целиком, и стили с шаблонами пропадают. Всё своё — только в дочерней теме: она обновлений не получает.