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

Отсутствие маски ввода в поле Телефон на странице оформления заказа чревато ошибками при его заполнении, что в свою очередь может привести к потере заказов. К счастью, реализовать маску ввода номера телефона для WooCommerce можно с помощью готового скрипта всего за несколько шагов:

Шаг 1 — Качаем отсюда архив с нужным нам скриптом jquery.maskedinput.js (скрипт находится внутри папки dist — рекомендую использовать минифицированную версию скрипта jquery.maskedinput.min.js).

Шаг 2 — Помещаем скрипт на своем сайте при помощи FTP или файлового менеджера вашего хостинга. Например, для подключаемых скриптов можно создать папку js в папке wp-content. В таком случае файл скрипта будет располагаться по адресу:

Шаг 3 — Вставляем приведенный ниже код в файл function.php вашей темы (или, можно воспользоваться для этого плагином Code Snippets, создав php-снипет и поместив код в него):

// Маска ввода номера телефона на странице оформления заказа
add_action('wp_enqueue_scripts', 'masked_input');
function masked_input() {
    if (is_checkout()) {
        wp_enqueue_script('masked_input', get_site_url().'/wp-content/js/jquery.maskedinput.min.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
    }
}

Если вы сделали все правильно, то теперь при вводе номера телефона в соответствующее поле, вы должны наблюдать маску ввода номера:

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

Хочу обратить внимание на то, что это универсальный способ добавления маски ввода номера телефона для плагина WooCommerce. Я специально предложил разместить js файл не в папке с темой, как это обычно делают, а в папке wp-content. Это позволяет применять данный способ для WordPress сайтов, которые вовсе не имеют темы. Такое возможно, например, при использовании конструктора Oxygen.

Автор
Сергей Дугин

Более 5-ти лет на коммерческой основе делаю сайты, а также занимаюсь их технической поддержкой, ускорением, оптимизацией, доработкой. Еще провожу консультации и обучающие занятия по Вордпресс. Делюсь опытом на страницах своего блога.

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

Ваш адрес email не будет опубликован.

Нажимая кнопку «Отправить комментарий», я принимаю пользовательское соглашение и подтверждаю, что ознакомлен и согласен с политикой конфиденциальности этого сайта