#28. WC: Theming

Совместимость со сторонними / пользовательскими / не-WC темами

Использование woocommerce_content()

Использование hooks

Включаем поддержку WooCommerce в своей теме

Шаблонная структура + Переопределение шаблонов через тему

Практический пример

Структура CSS

Структура

Изменения

Отключение стилей WooCommerce

Отключаем родную таблицу стилей и начинаем с нуля

Содействие

Условные теги

Что такое условные теги?

Доступные условные теги

Переопределение окна поиска продукта (виджет)

Показать изображения категории на категорию архиве

Исправление устаревших шаблонов WooCommerce

Классы Woocommerce

50 полезных сниппетов для WooCommerce. Часть первая.

50 полезных сниппетов для WooCommerce. Часть вторая.

Snippets

Совместимость со сторонними / пользовательскими / не-WC темами

По большей части шаблоны WooCommerce отлично сочетаются с большинством тем WordPress.

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

Это может повлиять на страницу магазина, страницу одного продукта и страницы таксономии (категории и теги), потому что WooCommerce использует собственные шаблоны для отображения этих страниц, и WooCommerce не может точно знать, какую разметку использует ваша тема. Другие страницы (checkout, cart, account) не изменяются, потому что они используют шаблон page.php вашей темы.

Существует два способа решения этой проблемы:

  • Использование hooks (для продвинутых пользователей / разработчиков)
  • Используя нашу функцию catch-all woocommerce_content() внутри вашей темы

Использование woocommerce_content()

Это решение позволяет вам создать новую страницу шаблона в вашей теме, которая используется для всех таксономии WooCommerce и post типа отображения. Несмотря на простое всеобъемлющее решение, у него есть недостаток, состоящий в том, что этот шаблон используется для всех таксономий WC (категории продуктов и т. Д.) И типов post (архивов продуктов, отдельных страниц продукта). Разработчикам рекомендуется использовать hooks вместо этого.

Чтобы настроить эту страницу шаблона:

Duplicate page.php

Дублируйте файл page.php вашей темы и назовите его woocommerce.php. Этот файл должен быть найден следующим образом: wp-content/themes/YOURTHEME / woocommerce.php.

Редактируйте свою страницу (woocommerce.php)

Если вы ранее создавали или редактировали темы для WordPress, тогда вам знакомо понятие цикл (The Loop). У WooCommerce есть свои циклы для настроек своих внутренних страниц. Например, вы можете их применять, если надо вывести другую боковую панель для страниц WooCommerce.

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

Создание шаблона происходит в несколько шагов:

  • Делаем дубликат файла темы page.php и переименовываем его в woocommerce.php
  • Находим цикл WordPress в файле woocommerce.php. Он выглядит примерно так:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php the_title(); ?

<?php the_content(); ?>

<?php endwhile; endif; ?>

Заменяем ваш цикл на цикл WooCommerce:

<?php woocommerce_content(); ?>

Теперь можно делать любые желаемые изменения.

Также было бы неплохо, чтобы в теме, в теге <body> была функция body_class();

<body <?php body_class(); ?>>

Это нужно для того, чтобы <body> получал классы, необходимые для работы встроенных стилей плагина.

woocommerce templates

Для редактирования определенных страниц в папку с шаблоном необходимо скопировать папку templates, которая находится в папке плагина woocommerce и содержит в себе шаблоны страниц, в директорию темы. Если вы использовали премиум темы интернет-магазинов на wordpress, то, наверное, видели, что в директории темы имеется эта папка.

Путь до папки будет следующий:

/wp-content/themes/ваш-шаблон/woocommerce/

Папка woocommerce в директории сайта будет содержать файлы templates.

Примечание. При создании woocommerce.php в папке вашей темы вы не сможете переопределить собственный шаблон woocommerce / archive-product.php, так как woocommerce.php имеет приоритет над archive-product.php. Это сделано для предотвращения проблем с отображением.

Функции, хуки (hooks) и действия (action)

Основные шаблоны woocommerce, такие как: content-single-product.php построены на экшнах. Вот часть кода из этого шаблона:

<div class=»summary entry-summary»>

<?php

/**

* woocommerce_single_product_summary hook.

*

* @hooked woocommerce_template_single_title — 5

* @hooked woocommerce_template_single_rating — 10

* @hooked woocommerce_template_single_price — 10

* @hooked woocommerce_template_single_excerpt — 20

* @hooked woocommerce_template_single_add_to_cart — 30

* @hooked woocommerce_template_single_meta — 40

* @hooked woocommerce_template_single_sharing — 50

*/

do_action( ‘woocommerce_single_product_summary’ );

?>

</div><!— .summary —>

<div class=»summary entry-summary»>

<?php

/**

* woocommerce_single_product_summary hook.

*

* @hooked woocommerce_template_single_title — 5

* @hooked woocommerce_template_single_rating — 10

* @hooked woocommerce_template_single_price — 10

* @hooked woocommerce_template_single_excerpt — 20

* @hooked woocommerce_template_single_add_to_cart — 30

* @hooked woocommerce_template_single_meta — 40

* @hooked woocommerce_template_single_sharing — 50

*/

do_action( ‘woocommerce_single_product_summary’ );

?>

</div><!— .summary —>

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

do_action( ‘woocommerce_single_product_summary’ );

do_action( ‘woocommerce_single_product_summary’ );

Выше в комментариях описаны все хуки этой функции с приоритетами. В официальной документации можно легко найти, что делает каждая из функций. Например: woocommerce_single_title(); имеет такой код:

function woocommerce_template_single_title() {

     wc_get_template( ‘single-product/title.php’ );

   }

Как видно, она просто подключает соответствующий шаблон.

Если вас не устраивает порядок вывода по умолчанию и вы хотите, например поменять местами цену и краткое описание, вам необходимо написать в functions.php следующий код:

PHP

remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10);

remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20);

add_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 10);

add_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 20);

remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10);

remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20);

add_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 10);

add_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 20);

Этот код сначала удаляет действия, потом добавляет их же, но с другими приоритетами.

Если же вы хотите добавить свою функцию в нужный экшн, то в functions.php пишем следующий код:

PHP

function my_custom_action() {

// Здесь пишем код

}

add_action( ‘woocommerce_single_product_summary’, ‘my_custom_action’, 10 );

Использование hooks

Метод hook больше задействован, чем использование woocommerce_content, но является более гибким. Это похоже на метод, который мы используем при создании тем. Это также метод, который мы используем, чтобы хорошо интегрироваться с темами Twenty Ten Twenty Sixteen.

Вставьте несколько строк в файл functions.php вашей темы.

Сначала unhook обертки WooCommerce:

remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_output_content_wrapper’, 10);

remove_action( ‘woocommerce_after_main_content’, ‘woocommerce_output_content_wrapper_end’, 10);

Затем подключите свои собственные функции, чтобы отобразить обертки, которые ваша тема требует:

add_action(‘woocommerce_before_main_content’, ‘my_theme_wrapper_start’, 10);

add_action(‘woocommerce_after_main_content’, ‘my_theme_wrapper_end’, 10);

function my_theme_wrapper_start() {

 echo ‘<section id=»main»>’;

}

function my_theme_wrapper_end() {

 echo ‘</section>’;

}

Убедитесь, что разметка соответствует вашей теме. Если вы не знаете, какие классы или идентификаторы использовать, просмотрите страницу page.php вашей темы.

Включаем поддержку WooCommerce в своей теме

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

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

Скрыть сообщение «Ваша тема не объявляет поддержку WooCommerce».

Сделайте это, добавив следующие функции поддержки темы:

add_action( ‘after_setup_theme’, ‘woocommerce_support’ );

function woocommerce_support() {

   add_theme_support( ‘woocommerce’ );

}

Теперь в админ панели WooCommerce не будет выводить сообщение о несовместимости.

Шаблонная структура + Переопределение шаблонов через тему

Файлы шаблонов WooCommerce содержат структуру разметки и шаблона для внешних и HTML-emails вашего магазина.

Когда вы открываете эти файлы, вы заметите, что они содержат hooks, которые позволяют вам добавлять / перемещать контент без необходимости редактировать файлы шаблонов. Этот метод защищает от проблем с обновлением, так как файлы шаблонов можно оставить совершенно нетронутыми.

Файлы шаблонов можно найти в каталоге /woocommerce/templates/:

VERSION FILES
v3.0.0 View template files
v2.6.0 View template files
v2.5.0 View template files
v2.4.7 View template files
v2.3.8 View template files
v2.2.3 View template files
v2.1.0 View template files
v2.0.20 View template files
v1.6.6 View template files

Вы можете редактировать эти файлы безопасным способом, используя переопределения. Скопируйте его в каталог в вашей теме с именем /woocommerce, сохраняя ту же структуру файла, но удалив / templates / подкаталог.

Пример: Чтобы отменить уведомление о заказе администратора, скопируйте: wp-content/plugins/woocommerce/templates/emails/admin-new-order.php в

wp-content/themes/yourtheme/woocommerce/emails/admin-new-order.php

Скопированный файл теперь переопределит файл шаблона WooCommerce по умолчанию.

Примечание: Если ваша тема имеет файл woocommerce.php, вы не сможете переопределить пользовательский шаблон woocommerce/archive-product.php в вашей теме, так как woocommerce.php имеет приоритет над другими файлами шаблонов. Это сделано для предотвращения проблем с отображением.

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

Практический пример

К примеру, нам надо поменять код в разделе с заказанными товарами в WooCommerce.

Для начала определим нужный нам шаблон. Секция «My Orders» находится в «My Account». Структура пути к файлу выглядит так:

/wp-content/plugins/woocommerce/templates/myaccount/my-orders.php

Делаем вложенную папку «woocommerce», а в ней — вторую вложенную с названием «myaccount». Копируем туда файл my-orders.php.

У вас должен получиться путь:

/wp-content/themes/вашатема/woocommerce/myaccount/my-orders.php

Теперь все сделанные изменения будут переписывать настройки, заданные по умолчанию.

Структура CSS

Внутри каталога assets/css/ вы найдете таблицы стилей, отвечающие за стили оформления WooCommerce по умолчанию.

Файлы для поиска — woocommerce.scss и woocommerce.css.

  • woocommerce.css — это уменьшенная таблица стилей — это CSS без каких-либо пробелов, отступов и т. д. Это делает файл очень быстрым для загрузки. Этот файл ссылается на плагин и объявляет все стили WooCommerce.
  • woocommerce.scss непосредственно не используется плагином, а командой разработчиков WooCommerce. Мы используем SASS в этом файле, чтобы упростить и ускорить скрипт CSS в первом файле.

CSS написан, чтобы сделать макет по умолчанию совместимым с максимально возможным количеством тем, используя % widths для всех стилей макета. Однако, скорее всего, вы захотите внести свои коррективы.

Изменения

Чтобы избежать проблем с обновлением, мы советуем не редактировать эти файлы, а использовать их в качестве ориентира.

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

a.button,

button.button,

input.button,

#review_form #submit {

 background:black;

}

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

Отключение стилей WooCommerce

Если вы планируете вносить существенные изменения, вы можете предпочесть, чтобы ваша тема вообще не ссылалась на таблицу стилей WooCommerce. Вы можете указать WooCommerce не использовать woocommerce.css по умолчанию. Но лучшим решением будет добавить следующий код в файл functions.php вашей темы:

// Удалите каждый стиль по одному

add_filter( ‘woocommerce_enqueue_styles’, ‘jk_dequeue_styles’ );

function jk_dequeue_styles( $enqueue_styles ) {

unset( $enqueue_styles[‘woocommerce-general’] ); // Remove the gloss

unset( $enqueue_styles[‘woocommerce-layout’] ); // Remove the layout

unset( $enqueue_styles[‘woocommerce-smallscreen’] ); // Remove the smallscreen optimisation

return $enqueue_styles;

}

// Или просто удалить их все в одной строке

add_filter( ‘woocommerce_enqueue_styles’, ‘__return_false’ );

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

Отключаем родную таблицу стилей и начинаем с нуля

Отключить таблицу стилей, предлагаемую по умолчанию, можно добавлением короткой строки в файле functions.php:

define(‘WOOCOMMERCE_USE_CSS’, false);

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

wp-content\plugins\woocommerce\assets\css\woocommerce.css или woocommerce.less

Содействие

Если вы вносите вклад в ядро WooCommerce и вам необходимо изменить стиль, отредактируйте файлы SASS, а затем скомпилируйте их с помощью Grunt. Чтобы узнать больше о том, какие задачи Grunt мы используем, проверьте файл Gruntfile.js внутри корня WooCommerce. Вы можете больше узнать о Grunt здесь.

Условные теги

Что такое условные теги?

Условные теги WooCommerce и WordPress могут использоваться в файлах шаблонов для изменения содержимого контента в зависимости от условий страницы. Например, вы можете отобразить фрагмент текста над страницей магазина. С условным тегом is_shop() вы можете.

Поскольку WooCommerce использует custom post types, вы также можете использовать многие условные теги WordPress. См. https://codex.wordpress.org/Conditional_Tags  для списка тегов, включенных в WordPress.

Примечание: Вы можете использовать только теги условного запроса после hook действий posts_selection в WordPress (hook действия wp является первым, через который вы можете использовать эти условные выражения). Для тем это означает, что условный тег никогда не будет работать должным образом, если вы используете его в теле functions.php.

Доступные условные теги

Все условные теги проверяют, выполнено ли условие, а затем возвращают TRUE или FALSE.

В приведенном ниже списке содержатся основные условные теги. Чтобы увидеть все условные теги, посетите WooCommerce API Docs.

WooCommerce page

is_woocommerce()

Возвращает true, если на странице, которая использует шаблоны WooCommerce (корзина и оформление — стандартные страницы с shortcodes и, следовательно, не включены).

Main shop page

is_shop()

Возвращает true, когда на странице архива продукта (shop).

Product category page

is_product_category()

Возвращает true при просмотре категории товаров архиве.

is_product_category( ‘shirts’ )

Когда отображается страница категории товаров для категории «shirts».

is_product_category( array( ‘shirts’, ‘games’ ) )

Когда отображается страница категории товаров для категории «shirts» или «games».

Product tag page

is_product_tag()

Возвращает true при просмотре архива тегов продукта.

is_product_tag( ‘shirts’ )

Когда отображается страница тега продукта для тега «shirts».

is_product_tag( array( ‘shirts’, ‘games’ ) )

Когда отображается страница тега продукта для тегов «shirts» или «games».

Single product page

is_product()

Возвращает true на single product page. Обертка для is_singular.

Cart page

is_cart()

Возвращает true на странице корзины.

Checkout page

is_checkout()

Возвращает true на странице checkout.

Customer account pages

is_account_page()

Возвращает true на страницах учетной записи клиента.

Endpoint

is_wc_endpoint_url()

Возвращает true при просмотре конечной точки WooCommerce

 

is_wc_endpoint_url( ‘order-pay’ )

Когда отображается страница endpoint для оплаты заказа.

 

is_wc_endpoint_url( ‘order-received’ )

Когда отображается endpoint страница для принятого заказа.

 

is_wc_endpoint_url( ‘view-order’ )

Когда отображается страница endpoint для  просмотра заказа

 

is_wc_endpoint_url( ‘edit-account’ )

Когда отображается страница endpoint для редактирования.

 

is_wc_endpoint_url( ‘edit-address’ )

Когда отображается страница endpoint для адреса редактирования.

 

is_wc_endpoint_url( ‘lost-password’ )

Когда отображается страница endpoint для потерянного пароля.

 

is_wc_endpoint_url( ‘customer-logout’ )

Когда отображается страница endpoint для выхода клиента.

 

is_wc_endpoint_url( ‘add-payment-method’ )

Когда отображается страница endpoint для метода добавления платежа.

 

Ajax request

is_ajax()

Возвращает true, когда страница загружается через ajax.

Пример

В этом примере показано, как отображать различный контент для разных категорий.

if ( is_product_category() ) {

 if ( is_product_category( ‘shirts’ ) ) {

   echo ‘Hi! Take a look at our sweet tshirts below.’;

 } elseif ( is_product_category( ‘games’ ) ) {

   echo ‘Hi! Hungry for some gaming?’;

 } else {

   echo ‘Hi! Check our our products below.’;

 } }

Переопределение окна поиска продукта (виджет)

Виджет окна поиска продукта загружает окно поиска с помощью функции шаблона:

get_product_search_form()

Для получения дополнительной информации см .: Функция get_product_search_form.

Затем он ищет форму поиска продукта в файле product-searchform.php или использует стандартную разметку. Вы можете переопределить шаблон product-searchform.php, настроив разметку.

Для справки по умолчанию используется разметка:

<form role=»search» method=»get» class=»woocommerce-product-search» action=»<?php echo esc_url( home_url( ‘/’  ) ); ?>»>

<label class=»screen-reader-text» for=»s»>

<?php _e( ‘Search for:’, ‘woocommerce’ ); ?>

</label>

<input type=»search» class=»search-field» placeholder=»<?php echo esc_attr_x( ‘Search Products&hellip;’, ‘placeholder’, ‘woocommerce’ ); ?>» value=»<?php echo get_search_query(); ?>» name=»s» title=»<?php echo esc_attr_x( ‘Search for:’, ‘label’, ‘woocommerce’ ); ?>» />

<input type=»submit» value=»<?php echo esc_attr_x( ‘Search’, ‘submit button’, ‘woocommerce’ ); ?>» />

<input type=»hidden» name=»post_type» value=»product» />

</form>

Форма также запускается через фильтр get_product_search_form.

Показать изображения категории на категорию архиве

add_action( ‘woocommerce_archive_description’, ‘woocommerce_category_image’, 2 );

function woocommerce_category_image() {

   if ( is_product_category() ){

   global $wp_query;

   $cat = $wp_query->get_queried_object();

   $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, ‘thumbnail_id’, true );

   $image = wp_get_attachment_url( $thumbnail_id );

   if ( $image ) {

   echo ‘<img src=»‘ . $image . ‘» alt=»‘ . $cat->name . ‘» />’;

}

Исправление устаревших шаблонов WooCommerce

Когда выпускается новая версия WooCommerce, иногда мы обновляем шаблоны по умолчанию.

Это относится к основным выпускам (WooCommerce 2.2 и 2.6), а также к незначительным версиям (WooCommerce 2.3.9), и темы могут нарушаться, поскольку они переопределяют шаблоны по умолчанию WooCommerce. Большинство авторов тем регулярно фиксируют свои темы, поэтому вам нужно только обновить свою тему, чтобы получить обновленные шаблоны.

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

Как обновить устаревшие шаблоны

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

  1. Перейдите к: WooCommerce > System Status. Прокрутите страницу до конца страницы, где есть список шаблонов, переопределенных вашей темой / дочерней темой, и предупреждающее сообщение о том, что их нужно обновить. Например, шаблон cart-shipping.php устарел:
  2. Сохраните резервную копию устаревшего шаблона.
  3. Скопируйте шаблон по умолчанию из wp-content/plugins/woocommerce/templates/[path-to-the-template] и вставьте его в папку своей темы, найденную по адресу: wp-content/themes/[path-to-theme]
  4. Откройте шаблон, вставленный в папку темы, с выбранным текстовым редактором, и скопируйте все изменения, которые были у вас в предыдущем шаблоне, в новый, обновленный файл шаблона.

Мы понимаем, что это может занять много времени. Вот почему мы стараемся избегать изменения шаблонов WooCommerce, но иногда разумно нарушать совместимость с предыдущими версиями.

Классы Woocommerce

Woocommerce имеет множество классов, например класс корзины WC_Cart, класс продукта WC_Product, даже есть свой класс запроса WC_Query. Полный список вы сможете найти в документации, ссылки будут ниже. Каждый класс имеет свой набор методов, с которыми не трудно работать. Рассмотрим пример вывода иконки корзины с количеством товаров и суммой. Это нужно, если вы хотите вывести это в шапку сайта, например. Делается это примерно так:

<div class=»header-cart-button»>

  <a class=»cart-content» href=»<?php echo WC()->cart->get_cart_url(); ?>» title=»Посмотреть корзину»>

     <i class=»fa fa-shopping-bag» aria-hidden=»true»></i> В корзине:

     <?php echo WC()->cart->get_cart_contents_count(); ?> товаров.

     На сумму: <?php echo WC()->cart->get_cart_total(); ?>

  </a>

</div>

Товары в Woocommerce — это пользовательский тип поста в WordPress. За пределами страниц плагина их можно получить в обычном цикле, задав ‘post_type’=>’product’ в аргументах к запросу. Для них также будут доступны обычные теги шаблона, такие как: the_title(); the_excerpt(); the_permalink(); и прочие. Однако, если вы захотите получить значения специальных полей, то нужно воспользоваться классом WC_Product. Для начала нужно объявить глобальную переменную:

global $product;

Далее можно пользоваться методами класса. Получим цену продукта:

$product->get_price();

Проверим наличие:

$product->is_in_stock();

 

Join the discussion

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
Filter by Categories
=) Home Work
CSS
JavaScript
Word Press

Интеркасса (API)

Доллар

покупка  $ 1 | 25.95 грн
продажа $ 1 | 23.27 грн

Евро

покупка  € 1 | 28.5 грн
продажа € 1 | 25.59 грн