2 способа редактирвоания полей оформления заказа в WooCommerce
Разработка и продвижение сайта, особенно интернет-магазина, дело не простое и требует детальной проработки структуры, функционала и контента. Для интернет-магазина не последнюю роль играет удобство оформления заказа.
В этой статье мы расскажем Вам, как можно настроить под себя страницу оформления заказа в интернет-магазине, созданного на WordPress при помощи плагина Woocommerce.
Стандартный вид страницы оформления заказа в Woocommerce выглядит следующим образом:
Для реализации данной задачи можно использовать плагин Saphali Woocommerce Russian.
Устанавливается он как любой другой плагин. После установки и активации в разделе Woocommerce появляется пункт Saphali WC Lite.
1. Перемещать и менять местами.
Для этого наводим курсор на любое поле, при этом курсор у нас приобретает вид плюсика со стрелочками.
Зажимаем левую кнопку мыши и перетаскиваем это поле туда, куда нам нужно.
2. Можно редактировать поля, изменять надпись. Для этого ставим курсор в поле, где указан заголовок и меняем его значение на своё.
5. Так же, обращаю ваше внимание на столбец«Clear», если вы устанавливаете здесь галочку, то это будет указывать на то, что следующее поле будет начинаться с новой строки. Обычно, галочки здесь следует ставить тогда, когда в одной строке идет по два поля, и ставится она возле поля с классомform-row-last.
6.Так же вы можете сделать, что бы у вас в поле было задано значение по умолчанию. Например, для адреса здесь уже введен текст «Улица и т.д.». При этом на странице формы в данном поле будет по умолчанию отображается текст, который исчезает, когда покупатель начинает вводить свои данные.
7.Так же, вы можете выбрать тип поля. Это может быть:
Select — раскрывающийся список
Checkbox – это когда у вас доступно несколько вариантов, я человек ставит галочкуTextarea — большое поле, в которое можно вводить какой-то более или мене большой текст
Text – стандартное поле для ввода
8.Также можно выбирать обязательно ли данное поле для заполнения или нет, и публиковать это поле или нет.
Если вам не достаточно тех полей, которые есть изначально и вы хотите добавить какое-то свое поле, то для этого:
1.Спускаемся вниз страницы и нажимаем на кнопку«Добавить»:
2.После этого сразу под уже существующими полями появляется новое, для которого можно задать название, значение по умолчанию, задать ему класс, ти поля и т.д. 3.После того, как вы задали все настройки, прокручиваем вниз и нажимаем на кнопку «Сохранить».
Если вы удалили какие-то поля, а затем решили, что вам нужно, что бы форма была снова такая же, как по умолчанию, то вы можете здесь, в самом низу нажать на кнопку «Восстановить поля по умолчанию». А затем, уже по новой, править те поля, которые вас интересуют.
Так же, в Woocommerce, когда человек оформляет заказ, и у вас в магазине настроены различные способы доставки, то ему еще высвечивается блок, в котором ему необходимо ввести адрес доставки. Так вот, поля для заполнения адреса доставки так же можно редактировать при помощи данного плагина.
Здесь есть вот такой раздел «Реквизиты доставки»:
И здесь, аналогично предыдущему, точно так же можем удалять, добавлять свои поля, менять их местами, указывать, обязательны ли они для заполнения, менять им классы и т.д.
Так же у нас есть возможность добавить дополнительные поля. По умолчанию это у нас идет поле «Примечания к заказу».
Мы можем здесь либо это поле удалить совсем, либо добавить сюда какие-то еще свои дополнительные поля.
Плагин Saphali Woocommerce Russian, который мы рассмотрели выше, не плохой инструмент, но он нагружает систему. Есть еще один хороший плагин для редактирования полей, им можно как и удалить так и создать нужные поля, WooCommerce Checkout Field Editor (Manager) Pro, но он также тяжеловат для такой простой манипуляции как просто убрать поля.
И так для такого чтобы просто удалить не нужные поля при оформлении заказа мы добавляем код в файл functions.php нашей темы:
Этим кодом мы удаляем поля Компанию, второй адрес, Страну, Город и Индекс.
Если вам нужно удалить еще какие-то поля, то просто продолжаем список подставляя нужные массивы.
Вот полный список полей массива, передаваемого в фильтр woocommerce_checkout_fields:
WooCommerce. Скрытие полей заказа в зависимости от выбранного способа доставки
Иногда нужно сделать так, чтобы в зависимости от способа доставки выводились разные поля на странице оформления заказа. Можно скрывать эти поля стилями или скриптом, но возникает проблема валидации: заказ невозможно будет отправить, потому что не заполнены обязательные поля. Пришлось придумать собственное решение.
Шаг первый. Добавляем форму полей во фрагмент
В WooCommerce есть такой функционал фрагментов, в них можно добавлять нужный html и выводить в нужном месте. Итак, добавляем фрагмент
UPD 1. Что изменилось? Если используется личный кабинет, то при переключении методов доставки происходит дублирование полей формы регистрации. Чтобы такого не происходило, во фрагмент добавляем только нужные поля.
UPD 2. Что изменилось? В комментариях указали на косяк — при переключении не сохраняются значения полей: Имя, Фамилия, Почта, Телефон. Полечил. Все оказалось гораздо проще. Спасибо Денису Янчевскому за подсказку, теперь замечательно работает без проверок на js
Шаг второй. Убираем лишние поля
Предполагается, что способы доставки настроены. Для примера созданы два способа. Теперь требуется указать нужный идентификатор способа доставки. Самый простой способ — посмотреть в исходном коде
Выделенные строки и есть идентификаторы. Теперь достаточно сделать проверку и если получаем нужный способ доставки, удаляем лишние поля
Это пример. В каждом случае, допиливайте под свой проект.
Шаг третий. Обновление страницы
Все работает, кроме обновления страницы. Добавим немного магии ajax, так как вся обработка полей на странице «Оформление заказа» происходит через ajax.
Как это работает?
И еще сделано обновление полей не после обновления методов доставки, а параллельно с этим обновлением
Весь код полностью
Просто запихать в в файл functions.php
Вот и все. А теперь реальный кейс
Реальный кейс
Задача
Должно получиться так
В методе «Самовывоз» остаются поля:
В методе «Новая почта»
Решение
Первое. Добавляем фрагмент
Второе. Добавляем условие переключения
Обратите внимание! Не нужные поля убираем сразу, а только потом делаем проверку. И проверка при этом обратная — если не выбран нужный метод доставки, то убираем новое поле.
В некоторые поля сразу вносим изменения:
Третье. Добавляем новое поле
Добавляем новое поле с именем number_post_office
Теперь надо настроить поля заказа, чтобы данные выводились на странице заказа и связанных с ней. Для начала добавим новое поле в общий массив полей при администрировании заказа
Теперь выведем значение поля в адресе
И сразу отформатируем для полей адреса доставки и адреса оплаты
Приведем внешний адреса к привычному для России и СНГ
Четвертое. Добавляем обновление через ajax
Все точно так же, как в третьем шаге, только добавляет сохранение значения нового поля.
Вот и весь кейс. Ничего сложного
Выводы
В итоге разобрали как можно сделать вывод полей на странице «Оформление заказа». И даже на пример реального кейса.
Все должно работать без проблем, если что, пишите в комметариях
Всем удачи! И не забудьте поделиться статьей в соцсетях!
Как скрыть поля на странице оплаты для виртуальных товаров в WooCommerce
Опубликовано: ADv Дата 09.08.2015 в рубрике WooCommerce 8 комментариев
Часто на форумах, посвященных WooCommerce, встречается вопрос, как убрать определенные поля на странице заказа в случае, когда в корзине находится только виртуальный (загружаемый) товар. По-умолчанию, если корзина содержит только виртуальные товары, то поля доставки автоматически убираются, то некоторым пользователям необходимо убрать и поля реквизитов оплаты. Это понятно, потому как нет смысла запрашивать адрес оплаты или же индекс в большинстве случаев. Сниппет ниже проверит количество товаров в корзине, и сравнит результат с количеством виртуальных товаров в ней же. Если все товары являются виртуальными, то поля на странице оплаты уберутся. Если же в корзине будет лежать один виртуальный товар и хотя бы один физический, то все поля останутся на месте. Логично, не так ли?
Код ниже содержит функцию под названием woo_cart_has_virtual_product(). Именно она и проверяет наличие виртуальных товаров в корзине. Она возвращает значение true, если все товары в корзине являются виртуальными, или же false, если ни один из них таковым не является либо же в корзине есть хотя бы один не виртуальный товар. Вторая функция, woo_remove_billing_checkout_fields(), перехватывает woocommerce_checkout_fields и удаляет ненужные поля на странице.
Вот так будет выглядеть результат, когда ваша корзина содержит только виртуальные товары:
Код добавляем в файл functions.php вашей темы или в плагин для сайта WordPress:
Если же вам понадобится убрать бОльшее количество полей, то можно воспользоваться одной или несколькими строками ниже, добавив их к перечню, указанному в предыдущем сниппете.
Мы надеемся, что эта статья помогла вам скрыть поля на странице оплаты для виртуальных товаров в WooCommerce.
Если вы начинаете разбираться с WooCommerce, то не забудьте посетить нашу рубрику WooCommerce, где мы публикуем материалы специально по тематике магазинов на этой платформе.
По всем вопросам и отзывам просьба писать в комментарии ниже.
Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.
Изменить порядок вывода платежного адреса в EMAIL Woocommerce
Здравствуйте. Не могу найти инфу, как поменять вывод платежного адреса в EMAIL уведомлениях Woocommerce.
Сейчас в письме выводится таким порядком:
Хотя на странице оформления заказа все по порядку идет.
Нужно Адрес и Фамилию поменять местами. Скрин. прикладываю.
P.S Над шаблоном шаманства не проводилось. Изначально так выводит, найти не могу где.
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Как изменить порядок отображения товаров в категории woocommerce?
Здравствуйте уважаемые форумчане! Как изменить порядок отображения товаров в категории woocommerce.
Изменить порядок вывода форм
Всем привет! Народ подскажите как поменять родительскую форму. Т.е. Есть form1 и form2 Хочу что.
Пользовательский класс Queue: как изменить порядок вывода элементов?
Привет всем такой вопрос возник перешел к изучению конструктора и деструктора вопрос заключаеться в.
Некорректный email заказа в woocommerce, что делать?
После обновления woocommerce до версии 2.4.4 стали некорректно работать письма, которые приходят на.
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Порядок отрицательных членов изменить на обратный, порядок неотрицательных сохранить
Задача (нужно все 3 пункта в 1 программе сделать) Прошу Помочь В условиях задания 3 а) порядок.
Порядок отрицательных членов изменить на обратный, порядок неотрицательных сохранить
Задача по делфи(нужно все 3 пункта в 1 программе сделать) Прошу Помочь В условиях задания 3 а).
Проверка email адреса
Задание: Написать программу, которая будет проверять email адрес на валидность. Под правильным.
Отправка email на адреса из БД
НАРОД проблема, как отпровлять письма я знаю, а вот как сделать так чтобы емайлы брались из базы, и.
Подстановка адреса и имени в email
Здравствуйте, дорогие форумчане! Помогите пожалуйста с выполнением задачи. Вот код по рассылке.
Редактируем меню личного кабинета WooCommerce (как добавить / удалить пункт)
В блоге я рассматривал около десятка задач по навигации на сайте: были списки ссылок, хлебные крошки, работа с пунктами меню админки и т.п. Сегодня чуть более экзотическая ситуация, которая случается не так часто, но все же имеет место быть. Речь пойдет о личном кабинете покупателя в WooCommerce, где также используется элемент навигации. Будем учиться его модифицировать — а именно добавлять новые пункты либо скрывать ненужные. Вторая задача встречается почаще, но мы уделим внимание обеим.
Итак, плагин магазина WooCommerce разрешает зарегистрироваться при покупке (и не только) дабы просматривать историю заказов, сохранять определенную информацию о себе и дальше при желании ее менять. Визуально это выглядит приблизительно так:
Включение/выключение опции находится в настройках модуля в разделе «Учетные записи». Вы можете вообще убрать создание аккаунтов либо сделать это только при совершении покупки.
Также следует отметить, что под личный кабинет покупателя в WooCommerce требуется создать отдельную страницу, которую во вкладке «Дополнительно» вы выбираете для соответствующей функции:
Теперь рассмотрим парочку вопросов по теме…
Как убрать пункт из меню личного кабинета
В принципе, для реализации даже не надо никакого кода — просто переходите в знакомый уже нам раздел «Дополнительно», где будет параметр «Конечные точки учётной записи» (Account endpoints).
Здесь удаляете значение того пункта, который вам не нужен. Не забудьте при этом сохранить изменения.
Теоретически, есть метод скрытия элемента меню с помощью сниппета для файла functions.php через специальную функцию unset.
После выполнения данного примера в аккаунте пользователя исчезнет ссылка «Адреса». Если вы хотите избавиться от еще каких-то страниц, раскомментируйте соответствующие строки (уберите символы //).
Важно понимать, что применение хака без удаления конечных точек «endpoints» лишь скрывает определенный раздел, но физически по прямому URL-адресу он остается доступен.
Новый пункт в личном кабинете
Предыдущий и следующий хаки взяты из этой статьи блога разработчика Misha Rudrastyh. Если нам просто надо вставить произвольный линк в навигацию, то код для файла функций выглядит следующим образом:
Финальной «вишенкой на торте» будет украшение в виде иконки через CSS стили. Если у вас подключен шрифт Font Awesome, можете использовать его, либо встроенные иконки WP и другие варианты.
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link—anyuniquetext123 a:before
Добавление страниц в личном кабинете
В данном случае мы не просто создаем линк в меню, но и сделаем так, что при клике пользователь будет продолжать находится в своем аккаунте + увидит соответствующий контент справа. Весь сниппет состоит из 4х шагов:
Приятно радует, что в коде автора есть детальные пояснения — респект. Важно! Не забудьте выполнить последний 4 этап — перейти в раздел настроек админки «Постоянные ссылки» и кликнуть по кнопке «Сохранить».
Аналогично в примере также имеется иконка для меню:
body.woocommerce-account ul li.woocommerce-MyAccount-navigation-link—log-history a:before
После внедрения текущего сниппета появится ссылка с названием «Log history». При переходе по ней он увидит текст, заданный в функции misha_my_account_endpoint_content. Все значения, разумеется, можно менять.
Контент до и после меню в аккаунте пользователя
В качестве бонуса Misha Rudrastyh приводит еще один небольшой хак. С его помощью у вас получится добавить любой текст/HTML непосредственно перед и после навигационного элемента ( ).
blah blah blah after
имеет свойство float:left в CSS.
Итого. В принципе, у меня по работе встречалась только первая рассмотренная задача — убирал лишние линки в WooCommerce кабинете покупателя дабы посетители не кликали то, что им не нужно (загрузки). Однако в процессе поиска инфы нашел заметку Misha Rudrastyh и решил ее перевести. Вставка произвольных ссылок и создание отдельных страниц вам пригодится, если вдруг попадется заказчик с нестандартными запросами.
