Маска ввода телефона на странице оформления заказа WooCommerce

Маска ввода телефона на странице оформления заказа WooCommerce

В этом видео я расскажу как для поля Телефон на странице Оформления заказа WooCommerce сделать Маску ввода телефона.

Такая маска ввода телефона поможет пользователям не ошибиться при вводе своего телефона, а владелец магазина не будет терять свои заказы.

Советы в этом видео подойдут для Интернет-магазина, который работает под управлением WordPress и на плагине WooCommerce.

Скриншот

Маска ввода телефона на странице оформления заказа WooCommerce

Алгоритм действий

  • Скачиваем скрипт jquery.maskedinput.js и загружаем его на сайт (через FTP или с помощью файлового менеджера).
  • Подключаем скрипт на сайте с помощью специальной функции.
  • Наслаждаемся результатом 😉

Смотреть видео

Полезные ссылки

1.Скачать скрипт jquery.maskedinput.js

В скачанном архиве он находится в папке: /jquery.maskedinput-master/dist/

2.Страница плагина Code Snippets

3.Функция подключения скрипта:

Примечание:

Если в вашем магазине покупатели будут указывать различные коды стран, то лучше в маске телефона указывать так: +9(999)999-99-99

В этом случае, не будет конфликта между телефоном указанным сначала в «Мой профиль — Адреса» и телефоном, который отобразится на странице «Оформление». Ведь, пользователь может сначала завести Аккаунт, а потом заказать товар и его оформить.

Для Украины можно указать так: +38(999)999-99-99


 

А Вы это уже читали?

4 Comments

  1. Здравствуйте. Всё круто и просто но есть одно — при клике на поле курсор перемещается не на первую цифру, а на последнюю. Причем только на десктопах, на мобильных всё норм. Как это пофиксить?

  2. Отличный вариант. Всё работает.
    Ещё можно добавить маски на другие поля
    $(«#billing_phone»).mask(«+79999999999»);
    $(«#shipping_postcode»).mask(«999999»);

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

О проекте

Проект InwebPress — создан для пользователей и разработчиков, которые интересуются созданием сайтов на WordPress. На сайте Вы найдете статьи, видеоуроки и советы по WordPress. В основном, рассматриваются готовые решения для быстрого создания проекта и без больших финансовых вложений. Каталог с премиум-шаблонами и плагинами поможет вам найти подходящий дизайн-шаблон для вашего сайта. Анонсируются только лучшие и достойные Вашего внимания продукты. Также, на сайте Вы можете заказать создание сайта WordPress и полный перевод шаблона WordPress на русский.

Контакты

Сайт работает на хостинге . Тема WordPress eCademy
© 2011 — 2020 InwebPress
При копировании материалов не забывайте указывать ссылку на https://inwebpress.ru