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

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

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

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

Важно: маска телефона не будет работать, если управление полями на странице оформления заказом перехватили специальные плагины. Например, при использовании плагина Checkout Field Editor for WooCommerce маска телефона перестает корректно работать. Если вам важна маска телефона, то поля лучше отключать и настраивать с помощью функций.

Скриншот

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

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

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

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

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

Смотрите это видео на YouTube

➤ Підпишіться на Youtube-канал InwebPress!

Текстовая инструкция

1.Скачать скрипт jquery.maskedinput.js. Скачайте весь архив (жмите на зеленую кнопку справа Code — Download ZIP). Распакуйте архив.

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

2.Функция подключения скрипта и вывода маски телефона:

Для вставки кода функции вы можете использовать дочернюю тему. Вставьте код в файл functions.php. Путь:

/wp-content/themes/child-theme/functions.php

Пример кода для маски ввода российского номера телефона:

add_action('wp_enqueue_scripts', 'my_maskedinput');
function my_maskedinput() {
    if (is_checkout()) {
        wp_enqueue_script('maskedinput', '/wp-content/themes/woodmart-child/js/jquery.maskedinput.js', array('jquery'));
        add_action( 'wp_footer', 'masked_script', 999);
    }
}
 function masked_script() {
    if ( wp_script_is( 'jquery', 'done' ) ) {
?>
    <script type="text/javascript">
        jQuery( function( $ ) {
            $("#billing_phone").mask("+7(999)999-99-99");
        });
    </script>
<?php
    }
}

Пример кода для маски ввода украинского номера телефона + плейсхолдер:

add_action('wp_enqueue_scripts', 'my_maskedinput');
function my_maskedinput() {
    if (is_checkout()) {
        wp_enqueue_script('maskedinput', '/wp-content/themes/woodmart-child/js/jquery.maskedinput.js', array('jquery'));
        add_action( 'wp_footer', 'masked_script', 999);
    }
}
 function masked_script() {
    if ( wp_script_is( 'jquery', 'done' ) ) {
?>
    <script type="text/javascript">
        jQuery( function( $ ) {
            $("#billing_phone").mask("+38(999) 999-99-99",{placeholder:"+38(___) ___-__-__"});
        });
    </script>
<?php
    }
}

Прейсхолдер информирует пользователя о правильном способе ввода номера телефона и отображается если поле пустое. Я в примере указал символы в виде нижнего подчеркивания, но вы можете использовать любые символы (например, 123).

Обратите внимание на путь в коде:

/wp-content/themes/woodmart-child/js/jquery.maskedinput.js

У вас путь к JS-файлу может быть другим. Файл можно разместить в любой папке на своем сайте. Главное, указать правильный путь. Я использую папку с дочерней темой, чтобы все мои кастомные файлы были в папке, в которой я вношу свои произвольные изменения. Читайте статью Что такое дочерняя тема?

Для подключения скрипта можно воспользоваться специальными плагинами. Или, этим плагином Code Snippets

Примечание

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

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

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