Файлы шаблонов WooСommerce — что за что отвечает
Шаблоны WooCommerce — файлы, которые содержат разметку и структуру шаблонов вашего Интернет-магазина.
Иерархия шаблонов построена таким образом, что можно легко изменять и дополнять шаблоны, да и вообще сразу понятно что где находится и что за что отвечает.
Основные шаблоны:
Шаблоны для работы с корзиной
Шаблоны оформления заказа:
Шаблоны общего назначения
Шаблоны циклов:
Личный кабинет:
Карточка товара:
Шаблоны для работы с заказами:
Папка notices содержит шаблоны сообщений пользователю
Папка emails содержит шаблоны сообщений по электронной почте (шаблоны писем об оформлении заказа, отмене и т.д.)
Как редактировать?
Есть два способа изменения шаблонов
Каждый файл шаблона содержит хуки, с помощью которых вы можете изменять/добавлять или удалять контент без редактирования самих файлов шаблона.
Если вы хотите изменить только один из шаблонов, скопируйте только один необходимый файл и вносите изменения.
Что касается стилей
Но вы можете отключить стили прописав такую строчку в functions.php :
В этом случае отключаться абсолютно все стили WooCommerce
Если нужно отключить определенные таблицы стилей, создайте функцию в functions.php и через нее отключите нужное:
А затем подключите ваши стили
Какие css-стили можно отключить?
Как кастомизировать страницы товаров в WooCommerce?
Дата публикации: 2017-09-05
От автора: при планировании WooCommerce-магазина вам придется ответить на много вопросов, которые серьезно повлияют на будущий успех сайта. Настройка магазина — серьезный вызов. После завершения этого процесса уже сложно внести какие-то правки в настройки и дизайн. Для кастомизации страниц товаров в Woocommerce вам потребуется рассмотреть доступные варианты, о которых я и расскажу в этом посте.
И вот, магазин создан. Следующий вызов — беспорядок на страницах товаров. На странице WooCommerce Single Product есть множество элементов, которые не напрямую могут помочь с кастомизацией дизайна и настройкой магазина. Два главных виновника беспорядка — категории товаров и звезды рейтинга. Не каждому магазину нужны эти элементы на странице Single Product. Так же и другие элементы необходимо передвинуть, чтобы они вписывались в кастомный дизайн магазина.
Все эти сложности можно легко решить с помощью экшенов и хуков в WooCommerce. Для демонстрации возможностей кастомизации страницы товара я создал несколько экшенов и хуков.
Кастомизируйте страницы товаров в WooCommerce
Первое, что вы должны хотеть — это сменить шаблон отображения товаров. Для этого необходимо загрузить файл single-product.php, который контролирует файлы шаблонов, которые, в свою очередь, отображают информацию о товарах на frontend’е.
Самый распространенный совет при настройке шаблонных страниц родительских тем и плагинов — делайте копии шаблонов темы. Все изменения делайте с копией. Такой подход гарантирует вам сохранность ваших изменений в случае обновления тем и плагинов.
Бесплатный курс «Основы создания тем WordPress»
Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц
Некоторые плагины и темы предоставляют обширную коллекцию пользовательских экшенов и хуков, которые позволяют вносить изменения напрямую в файлы темы. Самое классное в таком подходе это то, что вам не нужно изменять разметку файлов шаблона. В результате вы получаете чистый код и отсутствие дублей файлов.
С помощью single-product.php я буду вызывать файлы шаблона, которые отвечают за информацию о товаре и формат ее отображения на странице. Файл content-single-product.php — шаблон товара. Именно этот файл необходимо редактировать, чтобы изменить информацию и стили страницы товаров.
А теперь откройте single_template и вставьте следующий код, чтобы изменить шаблон страницы Single Product:
Woocommerce customize content single product
So I figured finally how to use the woocommerce hooks priorities,
I’m also using a child theme, but I don’t want to just change the priorities of the divs, I want to create my own layout of the single product and echo the price where I want or other stuff.
for example, let’s say this is my code:
I want to echo the price inside the
Can I do that this way? I just don’t see why to use other method, the hooks way seems to me not really organized
3 Answers 3
Then assuming that this is a single product, you can do this in your template’s content-single-product.php :
You can use this in hooks anyway, your choice.
You can use hooks where available, this is a good thing if you want your functionality is sort of independent from the theme, but sometimes you just can’t hook into some actions (because there isn’t any implemented for some of your needs), or you need more control of the layout and all the visual structure, then you can override woocommerce templates in your child theme and do what you want to do.
Check the single-page* templates, maybe that should give you a better idea of what you are looking for.
OK, I got the answer by myself
If you want to customize the content-single-product with any layout that you want, let’s take my example of layout from the question, so you can get rid of the do_action hooks from that page and just insert the functions wherever you want, for example:
Not the answer you’re looking for? Browse other questions tagged woocommerce or ask your own question.
Related
Hot Network Questions
Subscribe to RSS
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.9.16.40224
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
Хуки страницы товара в WooCommerce – визуальная карта с примерами редактирования!
Содержание
Каждый владелец или разработчик интернет-магазина на WordPress, пытается подстроить его под свои нужды. В этом руководстве мы будет редактировать страницу товара в WooCommerce. Задача это не тривиальная и есть всего два правильных метода:
Если вы когда-либо работали с кодом WordPress сайта, то наверняка, много раз встречали слово «Хук» или «Зацепка», а если вы разработчик, то использование хуков должно стать вашим основным методом.
Статья о том, как и где выбрать шаблоны для магазина
WordPress шаблоны для интернет магазина на базе WooCommerce: Честный рейтинг 2021
Плагин WooCommerce, как и сам WordPress, имеет огромное количество предопределенных функций. С помощью хуков вы можете кардинально изменить поведение этих функций и заменить существующее значение, тем самым настроив WooCommerce в соответствии с вашими потребностями!
В рамках этого руководства и опираясь на то, что 99% посетители этой страницы являются разработчиками, мы не будет описывать все преимущества работы хуками по сравнению с шаблонами, а будем редактировать страницу товара и рассмотрим все доступные для этой страницы WooCommerce хуки.
Карта хуков страницы товара в WooCommerce
На карте показаны все доступные для редактирования страницы товара хуки. Актуально если у вас WooCommerce версии 4.4+.
Магазин → Майки → Футболка
Название товара ↓
Короткое описание товара ↓
Мужская футболка с логотипом
Красный, Зеленый, Синий
(проверенный владелец) 21.08.2020 ↓
Спасибо огромное, товар отличный! ↓
Возможно Вас также заинтересует… ↓
События, помеченные синим и зеленым цветом можно хукать, а вот помеченные желтым – нет. Но это не значит, что на эти события нельзя повлиять. Их можно переписать, удалить или заменить своими собственными событиями.
В качестве примера давайте выведем дополнительный HTML в woocommerce_single_product_summary :
И в результате получим:
Хуки страницы товара в WooCommerce – добавляем HTML
Хуки страницы товара в WooCommerce – меняем приоритет
Хуки страницы товара в WooCommerce – устанавливаем нулевой приоритет
Двигаемся дальше и давайте рассмотрим все хуки, которые могут пригодится при редактировании страницы товара в WooCommerce.
События (actions) и хуки страницы товара в WooCommerce срабатывающие по умолчанию
Давайте рассмотрим события (actions), которые вы можете отключить или модифицировать используя файл functions.php.
Давайте рассмотрим весь список!
События до начала вывода информации о товаре
В качестве примера, давайте изменим отображение и работу хлебных крошек, сейчас у нас они выглядят так:
Хлебные крошки в WooCommerce – хуки страницы товара в WooCommerce
И чуть-чуть стилизуем добавленный CSS класс wpbl_custom :
В итоге наши хлебные крошки будут выглядеть более презентабельно:
Хуки страницы товара в WooCommerce – модифицируем хлебные крошки
События в левой колонке
Для примера давайте добавим HTML блок под галерею изображений:
Хуки страницы товара в WooCommerce – редактируем вывод изображений
На этом этапе, скорее всего уже понятен принцип работы с хуками в WooCommerce.
Дальше просто перечислим оставшиеся события, а если будет нужно дополним статью примерами.
Правая колонка
События и хуки страницы товара в WooCommerce в правой колонке:
Вот так сейчас у нас выглядит страница товара, давайте посмотрим, что можно сделать с событиями для которых нет хуков (помеченные желтым):
Хуки страницы товара в WooCommerce – работаем с событиями, для которых нет хуков
Допустим мы хотим, чтобы рейтинг товара отображался выше заголовка. В этом случае нам нужно удалить стандартное событие вывода рейтинга, а затем добавить новое, но с другим приоритетом:
Хуки страницы товара в WooCommerce – сортировка событий
Вкладки (tabs) и сопутствующие товары
Как вы уже поняли, можно полностью поменять внешний вид ваших товарных страниц в WooCommerce.
Но, что еще можно сделать с событиями, у которых нет хуков? Ответ простой – сами события можно удалить, а на их место поставить что-то своё!
Вот так сейчас выглядит страница простого товара в нашем экспериментальном WooCommerce магазине:
Страница простого товара в WooCommerce
Давайте кардинально изменим положение блока похожих товаров и изменим их количество:
WooCommerce страница товара – работаем с событиями
Не забудьте прописать стили для мобильных устройств!
События в блоке отзывов и после вывода основного контента
Работа с стольными событиями на странице товара ничем не отличается от вышеописанных методов. Давайте просто перечислим и укажем приоритеты.
Заключение
События и хуки – это классно, это здорово. Благодаря им можно полностью изменить страница товара в WooCommerce не трогая шаблонов. Так же, как вы понимаете, можно удалить все события которые срабатывают по умолчанию и собрать страница с чистого листа, используя свою собственную разметку, функции и логику.
Если у вас есть вопросы – спрашивайте в комментариях.