Как отредактировать верстку категории woocommerce
Как изменять WooCommerce. Эпизод #1. Введение: файлы, хуки, фильтры
Теоретические выкладки, о структуре файлов WooCommerce и о том, как правильно изменять WooCommerce через хуки. Вводное видео, о том как работают хуки в WooCommerce, какими инструментами пользоваться и правильно изменять файлы.
Инструменты
Для правки кода требуется использовать редакторы кода. Так как в них есть подсветка кода и очень удобно вносить правки или писать код с нуля.
В видео весь код правится через PhpStorm это не просто редактор, а целая система. Очень крутая, но платная. Хотя можно скачать или триальную версию, или пользоваться бетой совершенно бесплатно.
Бесплатные редакторы
Пользоваться можно любым, главное, чтобы удобно было. Рекомендую VS Code — при правильной настройке будет не хуже PhpStorm
Как правильно добавлять код
Существует два способа:
Все это делается для того, что бы при обновлении темы все ваши изменения сохранились.
Дочерняя тема
Дочернюю тему можно сделать самостоятельно или использовать плагин. Как сделать самостоятельно смотрите в видео
Еще удобно дочернюю тему сделать через плагин. Например, плагин Child Theme Configurator позволит прямо из админки создать дочернюю тему. После использования плагин можно удалить.
Специальный плагин
Другой способ вносить изменения использовать специальные плагины. Например, плагин Code Snippets позволяет делать подобные вставки. Или можно использовать пустой плагин. Об использовании пустого плагина, можно узнать в этой статье.
Всегда внимательно копируйте код сниппетов и делайте бекапы, не ленитесь.
Где смотреть документацию по WooCommerce
Нигде) Расписанной документации как таковой нет. Можно посмотреть то, что есть на официальном сайте
Без поллитры в ней не разобраться)
Предпочитаю смотреть код WooCommerce на GitHub, а если установить расширение Octotree для браузера Хром, то становится очень удобно просматривать файлы.
К тому же, на GitHub есть еще Wiki по WooCommerce, в которой подробно расписаны некоторые моменты. Это бывает полезно.
Как работают хуки в WordPress
Хуки или события и фильтры — это основная событийная модель работы WordPress. Не забываем, что WooCommerce — это плагин для WordPress. Для внесения изменений в WooCommerce чаще всего используются фильтыы и события.
Хуки — это важно! От понимания того, как работаю хуки будет зависеть понимание всей дальнейшей информации как этого курса, так и любых других связанных с разработкой на WordPress и WooCommerce.
Небольшое видео, для понимя работы хуков
По теме хуков еще рекомендую почитать статьи:
Как изменять (переопределять) файлы WooCommerce
Полный путь к папке шаблонов из корня сайта /wp-content/plugins/woocommerce/templates/
Пример: чтобы переопределить уведомление о заказе администратора, скопируйте: wp-content/plugins /woocommerce/templates/emails/admin-new-order.php в wp-content/themes/yourtheme /woocommerce/emails/admin-new-order.php
Скопированный файл будет переопределять файл шаблона WooCommerce по умолчанию.
Предупреждение: не редактируйте эти файлы в самом ядре плагине, так как они перезаписываются в процессе обновления, и любые настройки будут потеряны.
Примеры использования хуков
Включение поддержки WooCommerce в теме
Базовое включение поддержки WooCommerce
Включение поддержки WooCommerce с передачей
Это установка значений по умолчанию
Подключение zoom, swipe, lightbox
Отключение стилей WooCommerce
Загрузка файлов CSS и JavaScript WooCommerce только на страницах магазина
Заключение
Это вводная часть. В ней разобрали какими инструментами пользоваться, как вносить код и некоторые другие вещи.
Как изменять WooCommerce через хуки смотрите в видео выше по таймкоду 8:32. С этого времени как раз начинаются примеры кода.
Удачи в изменении WooCommerce! Вопросы, предложения пишите в комментариях, и не забудьте расшарить эту статью в соцсетях! Вам это ничего не стоит, а меня будет мотивировать)
Как кастомизировать страницы товаров в 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:
WordPress.org
Русский
Поддержка → WooCommerce → Woocommerce изменить страницу категории
Woocommerce изменить страницу категории
Добрый день.
На странице указанной категории очень интересное описание https://prnt.sc/nusd0i
То есть в описание категории засунута верстка страницы и самое интересное, что она отображается перед списком товаров категории. При этом также формируется и мета тэг description из описания категории, правда с вырезанными тегами.
Как правильно поступают в случаях, когда страница отдельной категории товара должна содержать дополнительную информацию (как тут перед списком)?
Ведь так как сделано здесь — неправильно?
Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]
в каком смысле «неправильно»??
хтмл вроде без ошибок.
описание всегда отображается перед списком товаров, если в теме не предусмотрено другое.
Скажите, а вы принципиально не пишите в специальный раздел или «бунтарь по жизни» и всегда плюете на общепринятые правила?
Ведь так как сделано здесь — неправильно?
Кто вам это сказал?
Все нормально сделано. А мета формирует All in One SEO Pack
Извиняюсь, за открытые в неправильных ветках темы, впредь постараюсь создавать темы в соответствующих разделах.
Теперь по теме. Раз записывать в описание категории то, что выведется перед списком товаров — общепринятая практика, то как мне изменить именно мета тег description для это страницы не трогая описание категории? Для данной страницы с помощью All in one seo pack я не могу задать другой description.
с помощью All in one seo pack я не могу задать другой description
SEO для категорий продуктов WooCommerce является функцией All in One SEO Pack Pro
https://semperplugins.com/all-in-one-seo-pack-pro-version/
Еще раз: это зависит исключительно от используемой темы.
Хуки страницы товара в 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 не трогая шаблонов. Так же, как вы понимаете, можно удалить все события которые срабатывают по умолчанию и собрать страница с чистого листа, используя свою собственную разметку, функции и логику.
Если у вас есть вопросы – спрашивайте в комментариях.
Изменить внешний вид Woocommerce, товары, кнопки, страницы, цвет, размер
Привет! Продолжаем разбирать самые интересные и полезные плагины для интернет-магазина woocommerce. Сегодня вы узнаете как изменить внешний вид онлайн магазина woocommerce. Вы сможете изменить внешний вид страницы товара, страницы магазина, страниц оформления заказа и корзины. Вы сможете менять цвет и размер заголовков, цен, описаний, категорий, скрыть не нужные элементы, изменить цвет и размер кнопки в корзине и т.д.
Изменить внешний вид интернет-магазина Woocommerce
Product Shop Page, страница товара.
— Selected Products, выберите здесь All, тогда изменения будут касаться всех товаров. Вы можете выбрать только один товар или несколько определённых товаров.
— Product Images, поставьте здесь галочку, чтобы скрыть изображение товара.
— Product Title, поставьте здесь галочку, чтобы скрыть заголовок товара.
— Logged In User Only, если поставите здесь галочку, то кнопку Добавить в корзину будут видеть только зарегистрированные пользователи.
— Products Prices, поставьте галочку, чтобы скрыть цены на товары.
— Add To Cart Button, поставьте здесь галочку, чтобы скрыть кнопку Добавить в корзину.
Shop Page Appearance, внешний вид страницы Магазин.
— Remove Unset Product Images, поставьте галочку, чтобы скрыть изображения которые не установлены.
— Set Default Product Image, здесь можно задать изображение, которое будет использоваться по умолчанию для товаров у которых нет изображения.
— Title Font Color, здесь вы можете выбрать цвет шрифта для заголовка товара.
— Title Font Size, выберите размер шрифта заголовка товара.
— Title Font Weight, здесь вы можете выбрать тип шрифта для заголовка товара.
— Price Font Color, выберите цвет цены товара.
— Price Font Size, выберите размер цены товара.
— Price Font Weight, выберите тип шрифта цены товара.
Product Details Page, одиночная страница товара.
— Selected Products, выберите для каких товаров будут происходить изменения. Для всех товаров выберите All.
— Product Images, поставьте галочку, чтобы скрыть изображения товара.
— Product Title, поставьте галочку, чтобы скрыть заголовок товара.
— Product Tabs, поставьте галочку, чтобы скрыть вкладку товара.
— Related Products, поставьте галочку, чтобы скрыть похожие товары.
— Logged In User Only, поставьте здесь галочку, чтобы кнопка Добавить в корзину, была видна только зарегистрированным пользователям.
— Products Prices, поставьте галочку, чтобы скрыть цену товара.
— Add To Cart Button, поставьте галочку, чтобы скрыть кнопку Добавить в корзину.
— Products Category, поставьте галочку, чтобы скрыть категории товара.
Detail Page Appearance, внешний вид страницы товара.
— Remove Unset Product Images, удалить неопределённые изображения.
— Set Default Product Image, задать изображение по умолчанию для товаров у которых нет изображений.
— Title Font Color, выбрать цвет заголовка товара.
— Title Font Size, выбрать размер заголовка товара.
— Title Font Weight, выбрать тип шрифта заголовка.
— Price Font Color, цвет цены товара.
— Price Font Size, размер цены товара.
— Price Font Weight, тип шрифта цены товара.
— Description Font Color, цвет описания товара.
— Description Font Size, размер текста описания товара.
— Description Font Weight, тип шрифта текста описания товара.
— Category Font Color, цвет категории товара.
— Category Font Size, размер текста категории товара.
— Category Font Weight, тип шрифта категории.
— Сохраните сделанные изменения.
Cart Page, корзина.
— Cart Empty Button, поставьте галочку, чтобы добавить кнопку Корзина пустая на страницу Корзина.
— Button Font Color, цвет кнопки пустой корзины.
— Button Font Size, размер кнопки.
— Button Font Weight, тип шрифта кнопки.
— Нажмите на кнопку — Save All Settings для сохранения настроек.
Checkout Page, страница Оформить заказ. Здесь вы сможете выбрать между двумя параметрами Disable — отключить, Optional — необязательно.
— Billing Country, биллинг страны.
— Billing First Name, биллинг имя.
— Billing Last Name, биллинг фамилия.
— Billing Company, биллинг компания.
— Billing Address1, биллинг адрес 1.
— Billing Address2, биллинг адрес 2.
— Billing City, фактура города.
— Billing State, биллинг государства.
— Billing Post Code, биллинг код поста.
— Billing Email, биллинг электронная почта.
— Billing Phone, биллинг телефон.
Shipping, доставка.
— Shipping Country, доставка страна.
— Shipping First Name, доставка имя.
— Shipping Last Name, доставка фамилия.
— Shipping Company, доставка компания.
— Shipping Address 1, 2, доставка адрес 1 и 2.
— Shipping City, город доставки.
— Shipping State, государственная доставка.
— Shipping Post Code, доставка код поста.
— Account Password, пароль учётной записи.
— Order Comment, комментарий заказа.
— Сохраните сделанные изменения.