Как отредактировать страницу товара woocommerce
Кастомизация Woocommerce — страница продукта (кастомные поля)
С чего начать?
Для того, чтобы иметь возможность менять какие-либо стандартные шаблоны WC нужно скопировать папку «templates» из папки плагина в папку шаблона, который используется как основной, и переименовать её в «woocommerce». Выполнение этого шага необходимо для большинства шаблонных решений.
Решения, которые вы можете использовать на странице товара
Кнопка добавления в корзину
По скольку WC имеет несколько доступных разновидностей товаров, для каждого вида с учетом его специфики создана отдельная функция.
1. Простой товар (simple)
2. Внешний товар (external)
3. Вариативный товар
Добавление полей в карточку товара
Кажется, что это просто. Я тоже так думал, пока мне не пришлось на практике применять данную технику. Я столкнулся с проблемой — форма товара ( я использовал simple ) никак не хотела передавать данные. Увы, только через неделю я догадался посмотреть на код исходников карточки и открыл, что форма товара обернута вокруг кнопки «Добавить в корзину» и на этом мы ничего сделать не сможем.
Переходим в папку woocommerce в корне нашей темы (как ее сделать см. выше) и открываем файл single-product.php. В нем после подключения хэдера вставляем следующий код формы:
где новым является атрибут form, который говорит нашей кнопке, что теперь она связана с формой с id «cart_fenster» (можете заменить на свой). Это позволяет использовать данные из этой формы, то есть со всей страницы товара.
Надеюсь, я помог вам. В ближайшее время постараюсь написать про свою сортировку товаров по мета полю, сохранение и обработку значений кастомных полей, которые мы добавили и много чего интересного.
WordPress.org
Русский
Поддержка → WooCommerce → Редактирование страницы Магазин в вукомерс
Редактирование страницы Магазин в вукомерс
Добрый день друзья. Нужна помощь. Сделал интернет магазин в вукомерс. Создал главную страницу и отдельные страницы каталогов товаров (входные двери, межкомнатные двери). Страницы с каталогами привязал к пунктам меню. Также имеются карточки товаров. Вот тут возникает сложность. В карточках товаров имеются «хлебные крошки» вида Главная/Входные двери/Стальная входная дверь Дим3. Так вот если возвращаться по хлебным крошка назад то я вместо своей страницы с каталогом входных или межкомнатных дверей попадаю на стандартную страницу Магазина, которая устанавливается при активации плагина вукомерс. А мне хотелось бы, что я возвращался обратно бы на свою созданную страницу с каталогом товаров.
Интер магазин создавал в элементоре. Хотел как вариант отредактировать стандартную страницу Магазин в вукомерс, но элементоре не может её отредактировать. В программировании Php увы не разбираюсь, с hookами не дружу((. Вот и думаю как быть. Можно конечно оставить интер магазин без хлебных крошек, но заказчику они нужны. Варианты решения могут быть либо редактирование страницы Магазин от вукомерс с переносом туда всех моих данных или перенаправление в хлебных крошках с Магазина вукомерс на мою страницу с каталогом товаров. Помогите люди добрые)). Заранее спасибо.
Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]
Хуки страницы товара в 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?
Дата публикации: 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
Хотите узнать, как легко настроить страницы продуктов WooCommerce? Если вы управляете интернет-магазином, то, вероятно, хотите, чтобы ваши страницы с каждым продуктом выглядели великолепно, были правильно организованы и соответствовали вашему бренду.
Это сложно сделать, если полагаться только на WooCommerce и свою тему, потому что приходится более или менее придерживаетесь макета по умолчанию.
Вместо этого можно использовать другие плагины, чтобы делать такие вещи, как:
И все это делать без программирования!
Некоторые идеи полностью настраиваемых шаблонов продуктов:
Найдите среди ниже представленных идеальный плагин для настройки страниц ваших продуктов в соответствии с тем, что вам нужно.
1. Измените стиль страниц продукта
Вот несколько плагинов, если вы ищете всего несколько косметических настроек, таких как изменения шрифтов, цвета или изменения отдельных элементов.
WooCommerce Colors
WooCommerce Colors позволяет настраивать цвета различных элементов WooCommerce, таких как кнопка «Добавить в корзину», цену продукта и другие. Вы можете внести эти изменения, используя собственный настройщик WordPress.
Это простой и понятный плагин, не требующий каких-либо знаний CSS. Однако он позволяет настраивать только цвета, и вы не сможете переопределить некоторые цвета в зависимости от вашей темы.
Цена: Бесплатно.
YellowPencil
Благодаря плагину YellowPencil можно изменять шрифты, цвета, размеры шрифтов, расстояние между элементами и даже добавлять анимированные визуальные эффекты во внешний интерфейс вашего сайта. В бесплатной версии есть много вариантов стилей, но Yellow Pencil Pro добавляет расширенные параметры для градиентов, анимации, пользовательских шрифтов, цветовых палитр, фоновых изображений и многого другого.
YellowPencil будет работать на любой странице вашего сайта, а не только на страницах продуктов. Он автоматически генерирует код CSS для вашего сайта по мере его использования и сохраняет его в вашей базе данных, а не в файле темы. Это гарантирует, что изменения не потеряются при обновлении темы.
YellowPencil позволяет переупорядочивать элементы в шаблоне, но нельзя добавлять новые элементы. В результате вы ограничены элементами, которые уже существуют в шаблоне одного продукта по умолчанию.
Цена: бесплатно, с возможностью платного обновления.
CSS Hero
Что он делает: CSS Hero – это визуальный редактор, с помощью которого можно вносить изменения в стиль вашего сайта, автоматически настраивая CSS по мере внесения визуальных изменений.
С этим плагином вы настроите элементы вашего шаблона, изменив цвета, шрифты, отзывчивые точки останова и многое другое. Вы также можете скрыть элементы или сохранить стиль определенных элементов, чтобы повторно использовать их в других местах вашего сайта.
Однако нельзя изменять порядок или добавлять новые элементы, поэтому вы ограничены макетом и элементами, которые уже существуют в шаблоне продукта.
Цена: платно, от 29 долларов в год.
2. Добавьте новые элементы в списки продуктов
Если вы хотите добавить на свои страницы дополнительные элементы, например места для дополнительного контента или видеоролики о продуктах, эти плагины предлагают способы добавления таких элементов на страницы отдельных продуктов.
WooCommerce Single Product Page Customizer
WooCommerce Single Product Page Customizer позволяет добавлять поля пользовательского текста или HTML в шаблон продукта и выбирать, где на странице их отображать.
Например, вы можете добавить информацию, такую как руководство по размеру одежды, информацию о доставке или ссылку на политику возврата в вашем магазине. Затем эта информация отобразится для всех ваших продуктов.
Это очень простой и легкий в использовании плагин, но он функционально ограничен. Например, вы не можете выбрать отображение информации только для некоторых продуктов. Вы также не можете добавлять в свой шаблон элементы других типов и не можете переставлять какие-либо из существующих элементов.
Цена: Бесплатно.
Custom Product Tabs for WooCommerce
Custom Product Tabs for WooCommerce позволяет добавлять дополнительные вкладки с текстом, изображениями, HTML или короткими кодами на страницах продуктов. Затем вы можете выбрать, для каких продуктов отображать информацию.
Можно использовать этот плагин для отображения дополнительной информации о производителях, публикации вашей политики возврата или добавления дополнительных фотографий, не загромождая страницу продукта.
Опять же, у этого плагина есть конкретную цель. С его помощью невозможно настроить какие-либо другие части ваших шаблонов продуктов, кроме добавления вкладок с дополнительным контентом.
Если вы хотите отображать на вкладках контент, относящийся к конкретному продукту, например диаграммы размеров для каждого продукта, вы не сможете сделать это, динамически извлекая информацию о продукте. Вместо этого вам нужно создать отдельные вкладки для каждого продукта с определенным содержанием и добавить их к нужному продукту.
Цена: бесплатно, с платной версией Pro.
Product Video for WooCommerce
Product Video for WooCommerce позволяет добавлять видео на страницы продуктов или в галерею продуктов. Можно встраивать видеоролики YouTube, Vimeo, Dailymotion, Metacafe, Facebook или загружать свои собственные. Он также предлагает несколько вариантов отображения: во всплывающем окне, внутри вашей страницы и в полноэкранном режиме.
Плагин дает полный контроль над тем, как отображается ваше видео. Можно настроить размеры видео, включить автовоспроизведение, воспроизводить видео в цикле и загрузить определенное изображение эскиза.
Как и другие плагины в этой категории, возможности плагина ограничены видео. Вы не можете настроить никакую другую часть шаблона продукта с помощью этого плагина.
Цена: платно, сейчас 49 долларов.
3. Создавайте индивидуальные продукты
С этими плагинами можно создавать полностью настраиваемые страницы и целые сайты, так как они позволяют указывать стиль, макет страницы и многое другое.
Toolset
Toolset дает возможность создавать шаблоны продуктов полностью с нуля с желаемым макетом, стилем и элементами страницы, и все это без программирования.
Цена: платно, планы от 69 долларов.
Создайте собственный шаблон с динамическим контентом и полностью настраиваемым стилем
С помощью Toolset можно легко создать шаблон продукта, используя блоки WooCommerce и Toolset, и заполнить эти блоки динамическим контентом. Это означает, что нужно создать шаблон только один раз, и он автоматически подберет правильное название продукта, описание, цену, отзывы и многое другое в зависимости от продукта.
После создания шаблона продукта вы можете использовать множество вариантов стиля, чтобы он выглядел именно так, как хотите, без каких-либо ограничений по умолчанию.
Выберите конкретные критерии отображения для ваших шаблонов
Вы также можете создавать разные шаблоны для разных критериев: например, создавать разные шаблоны для товаров, которых нет в наличии, для разных категорий продуктов или атрибутов, и даже назначать приоритеты в случае, если несколько шаблонов применяются к одному продукту.
Дальнейшая настройка вашего магазина WooCommerce с еще большей функциональностью
Популярные конструкторы страниц, такие как Elementor Pro, Divi и WPBakery, также предлагают варианты для создания и настройки страниц продуктов WooCommerce. Дополнительные функции, доступные с набором плагинов Toolset, можно использовать специально для магазинов WooCommerce или других типов сайтов.
Например, вы можете:
Выбор подходящих инструментов WooCommerce для вас
Если вам не нравятся варианты, доступные через WooCommerce или вашу тему, воспользуйтесь подборкой бесплатных и платных плагинов, которые сделают ваш магазин именно таким, каким вы его хотите видеть.
Создание собственного магазина WooCommerce не должно быть сложным или требовать дорогостоящего индивидуального программирования. С помощью плагинов, описанных в этой статье, вы можете создавать продвинутые, красивые, функциональные магазины WooCommerce.