Это знакомство начинающего разработчика с плагином WordPress WooCommerce. В этом посте мы рассмотрим основы того, как работает WooCommerce и как мы можем настроить его в нашей теме или плагине с помощью хуков и шаблонов.
Во-первых, WooCommerce предлагает большую гибкость для разработчиков тем и плагинов для настройки своей функциональности. Для простых модификаций у вас обычно есть как минимум две альтернативы. Выбор способа изменения зависит от того, как вы предпочитаете работать, насколько гибким и разборчивым должен быть ваш код, и от того, как вы предпочитаете продолжать обслуживание своего сайта в будущем, когда дело доходит до обновлений плагинов (и WordPress).
Прежде чем вы начнете изучать изменение функциональности WooCommerce с помощью кода, вы должны проверить, возможно ли то, чего вы хотите достичь, изменив настройки. WooCommerce поставляется с огромной страницей настроек, позволяющей вам немного изменить. В новых версиях WooCommerce также добавлены и перемещены дополнительные настройки в WordPress Customizer. Здесь вы сможете, например, настроить количество столбцов и настроить некоторые поля оформления заказа.
Шаблоны WooCommerce
WooCommerce предлагает большой набор файлов шаблонов, которые вы, как разработчик темы, можете переопределить. Это можно сделать, скопировав исходный шаблон WooCommerce в папку темы. А затем вы вносите изменения в файл в своей теме.
Перейдите в папку плагина WooCommerce в формате /wp-content/plugins/woocommerce/. Здесь вы найдете подпапку templates. Все содержимое файлов (их много!) /wp-content/plugins/woocommerce/templates/включая его подпапки — это все файлы шаблонов, которые вы можете переопределить в своей теме.
Чтобы WooCommerce мог найти ваши измененные шаблоны, вам нужна подпапка в корневом каталоге вашей темы с именем woocommerce. Если слаг вашей темы — «awhitepixel», ваша папка должна находиться по адресу /wp-content/themes/awhitepixel/woocommerce/. Внутри этой папки вы можете поместить измененные копии файлов шаблонов WooCommerce. Имейте в виду, что файлы шаблонов, расположенные в подпапках, должны быть помещены в соответствующие подпапки в вашей папке woocommerce. Например; переопределение WooCommerce /templates/single-product/add-to-cart/simple.phpтребует, чтобы вы поместили свою копию simple.phpв /woocommerce/single-product/add-to-cart/папку в своей теме.
Вы также могли заметить, что в шаблонах много действий и фильтров. Большинство из них заполнено do_action()s. Для оптимального использования WooCommerce вы не должны удалять какие-либо хуки в шаблонах. В большинстве случаев вы можете рассмотреть возможность изменения функциональности с помощью действий и фильтров вместо переопределения шаблонов. Позвольте мне объяснить, почему!
Важное примечание о переопределении шаблонов и обновлений плагинов
Для новичка переопределение шаблона может показаться самым простым и интуитивно понятным решением. Зачем возиться с хуками, если вы можете напрямую изменить шаблон, который выводит то, что вы хотите изменить? Ответ: Потому что эта стратегия создает больше работы для обслуживания вашего интернет-магазина.
WooCommerce часто обновляется, а иногда и файл шаблона. Чтобы поддерживать ваш интернет-магазин в актуальном состоянии, вам также необходимо обновить переопределенные файлы шаблонов в вашей теме. Обычно вам нужно заменить весь файл шаблона самым последним обновленным файлом, а затем повторно добавить свои изменения. Это быстро становится намного сложнее, если вы не помните все изменения, которые вы сделали. Поверьте мне, у меня многолетний опыт исправления файлов шаблонов WooCommerce других разработчиков во время обновлений плагинов. Поверьте, это не самая приятная работа!
Теперь, когда мы знаем, что хуки — лучшая стратегия, давайте посмотрим, как это сделать.
Хуки WooCommerce
WooCommerce предлагает огромное количество хуков, как действий, так и фильтров. Использовать хуки на самом деле очень просто!
С помощью хуков вы также можете изменить гораздо больше, чем просто вывод шаблонов. Вы можете настроить цены на товары, поля оформления заказа или заставить ваш интернет-магазин что-то делать, когда товар добавляется в корзину.
Если вы разрабатываете плагин, хуки — единственный выход. Вы можете переопределять шаблоны только в теме, а не в плагине. (Хорошо, есть способы преодолеть это, но это очень редко и не рекомендуется).
Если вы просматривали некоторые файлы шаблонов WooCommerce, вы должны были увидеть множество файлов do_action(). Это крючки; контрольные точки, к которым вы можете подключиться и добавить свой код или изменить переменную. Если вы не знаете, как работают хуки, у меня есть пост, в котором это подробно объясняется .
Если вы хотите что-то вывести, например текст или что-то подобное, ищите действия (do_action()). Например, выводя что-то в шаблон корзины, вы можете подключиться к woocommerce_before_cart, woocommerce_before_cart_table, woocommerce_before_cart_contents, woocommerce_cart_contents, woocommerce_cart_actions, woocommerce_after_cart_contents, woocommerce_after_cart_table, woocommerce_cart_collateralsили woocommerce_after_cart. Просто выберите тот, который расположен там, где вы хотите получить результат. Это пример отображения текста перед таблицей и формой на странице корзины:
add_action('woocommerce_before_cart', function() {
_e('Here are the products you have added in the cart so far', 'textdomain');
});Фильтры (ищите apply_filters()) предназначены для изменения вывода или переменной. Обычно фильтры в WooCommerce используются для изменения текста «Добавить в корзину» на кнопках покупки. WooCommerce предлагает для этого несколько фильтров, что позволяет вам управлять текстом на разных страницах. Например, вы можете настроить текст в цикле магазина или в представлении одного продукта. Фильтры часто предоставляют несколько аргументов для дальнейшего контроля, например объект продукта. Вот простой пример того, как изменить тексты «Добавить в корзину» в представлении одного продукта:
add_filter('woocommerce_product_single_add_to_cart_text', function($original_text, $product) {
return __('Buy this', 'textdomain');
}, 10, 2);Имея некоторые знания о том, как работают хуки, и просто заглянув внутрь файлов шаблонов, вы можете найти довольно много легко изменяемой функциональности. Очевидно, что WooCommerce предлагает гораздо более продвинутую модификацию, изменение цен, способов оплаты, модификации продукта или импорта, и все это возможно с использованием крючков.
Вывод
Цель этого поста — дать новичку основы того, как вносить изменения в WooCommerce, и последствия этих изменений. Я всегда рекомендую использовать хуки вместо перезаписи файлов шаблонов, если в этом нет крайней необходимости.
Следующий шаг — погрузиться в расширенные модификации, познакомившись с хуками, процессами и объектами в WooCommerce. Поскольку WooCommerce является самой популярной платформой электронной коммерции, в Интернете доступно множество ресурсов и примеров кода. Взгляните на категорию Woocommerce здесь, на этом сайте, чтобы узнать больше.