Шаблоны WooCommerce - полное руководство по кастомизации интернет-магазина

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

WooCommerce хранит шаблоны в своем плагине, но вы можете скопировать и изменить их в своей теме или дочерней теме, чтобы настроить дизайн без потери изменений при обновлении плагина.

Основные шаблоны WooCommerce

WooCommerce использует шаблоны для отображения следующих страниц:

? Магазин (shop) — страница, на которой отображаются все товары или товары конкретной категории.
? Карточка товара (single product) — страница отдельного товара.
? Корзина (cart) — страница корзины, где отображаются добавленные товары.
? Оформление заказа (checkout) — страница оформления заказа, где покупатель вводит данные для доставки и выбирает способы оплаты.
? Мой аккаунт (my account) — личный кабинет покупателя.
? Страница благодарности (thank you) — страница, которая отображается после успешного оформления заказа.

Структура шаблонов WooCommerce

Шаблоны WooCommerce хранятся в папке плагина по адресу:

/wp-content/plugins/woocommerce/templates/

Для кастомизации шаблонов не редактируйте файлы напрямую в папке плагина, так как они будут перезаписаны при обновлении WooCommerce. Вместо этого создайте копии шаблонов в своей теме.

Шаг 1: Копирование шаблона в тему

Чтобы изменить шаблон WooCommerce, скопируйте его из папки плагина в папку темы:

Откройте папку вашей темы: /wp-content/themes/ваша_тема/.
Создайте папку woocommerce, если её ещё нет.
Найдите нужный шаблон в папке WooCommerce (например, /woocommerce/templates/single-product.php).
Скопируйте файл шаблона в папку /wp-content/themes/ваша_тема/woocommerce/.
Теперь вы можете редактировать шаблон в папке вашей темы, и WooCommerce будет использовать этот кастомный шаблон вместо стандартного.

Пример: если вы хотите изменить внешний вид страницы товара, скопируйте файл single-product.php из папки WooCommerce в папку вашей темы: /wp-content/themes/ваша_тема/woocommerce/single-product.php.

Шаг 2: Кастомизация шаблона

Теперь, когда шаблон скопирован в вашу тему, вы можете редактировать его в соответствии с вашими нуждами. Например, вы можете изменить расположение элементов, добавить или убрать блоки, изменить стили и т.д.

Пример кастомизации страницы товара (single-product.php):

Вы можете изменить порядок блоков (например, переместить описание товара или добавить кастомные элементы) или добавить дополнительную информацию.

Пример: добавление кастомного текста на страницу товара:

// Откройте файл single-product.php и добавьте кастомный текст.
add_action( 'woocommerce_single_product_summary', 'custom_product_text', 20 );
function custom_product_text() {
    echo '<p>Это кастомный текст, добавленный на страницу товара.</p>';
}

Этот код добавляет текст в раздел описания на странице товара.

Шаг 3: Хуки и фильтры в WooCommerce

Вместо прямого изменения шаблонов вы также можете использовать хуки и фильтры WooCommerce для изменения вывода на страницах.

Пример использования хука для добавления информации на страницу товара:

add_action( 'woocommerce_single_product_summary', 'custom_text_after_add_to_cart', 35 );
function custom_text_after_add_to_cart() {
    echo '<p>Бесплатная доставка при заказе от 5000 рублей!</p>';
}

Этот код добавит кастомный текст после кнопки «Добавить в корзину» на странице товара.

Шаг 4: Плагины для кастомизации шаблонов WooCommerce

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

Шаг 5: Обновление кастомных шаблонов

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

Чтобы проверить, устарел ли ваш кастомный шаблон, вы можете перейти в админ-панель WordPress и увидеть предупреждение на странице WooCommerce > Статус о том, что какие-то шаблоны требуют обновления. В этом случае сравните ваш кастомный шаблон с последней версией из папки плагина и внесите необходимые изменения.

Примеры часто используемых шаблонов WooCommerce

> single-product.php — Шаблон страницы отдельного товара.
> archive-product.php — Шаблон страницы категории товаров.
> cart.php — Шаблон страницы корзины.
> checkout/form-checkout.php — Шаблон страницы оформления заказа.
> myaccount/dashboard.php — Шаблон личного кабинета покупателя.

Заключение

Шаблоны WooCommerce позволяют кастомизировать внешний вид и функциональность вашего интернет-магазина. Вы можете копировать шаблоны в свою тему и изменять их, не затрагивая исходные файлы плагина. Использование хуков и фильтров помогает вам добавлять или изменять контент без прямого редактирования шаблонов. А для более удобной работы с кастомизацией можно использовать визуальные плагины, такие как Elementor Pro или WooBuilder Blocks.

Шаблоны в WooCommerce