Для удобства клиентов решил сделать на сайте калькулятор ремонта. В качестве примера буду делать калькулятор ремонта по покраске автомобилей.
Ведь удобно, когда посетитель сайта (а в перспективе клиент СТО) выберет для себя перечень нужных ему работ и сразу увидит их стоимость. И главное – для этого никому не нужно ни звонить ни писать.
Зачем нужен калькулятор
Наличие калькулятора ремонта может привести к увеличению конверсии на сайте, так как он помогает клиентам принимать решение о покупке услуги быстрее и с большей уверенностью.
Мой калькулятор предназначен для расчета стоимости покраски кузова автомобилей. Это дает возможность клиенту узнать конечную стоимость окраски в зависимости от того, какие элементы нужно покрасить.
На моем примере можно сделать калькулятор расчета стоимости любых работ или услуг.
И так, приступаем!
Выбор калькулятора
Набрал в поисковой строке Google “калькулятор цен для вордпресс” и получил результат:
Проанализировав информацию, изложенную в сайтах из поисковой выдачи, сделал выводы, что для того, чтобы на сайте сделать калькулятор стоимости работ, нужно установить специальный плагин.
Установка плагина для создания калькулятора
После проведения анализа различных плагинов для создания калькуляторов выбор остановился на бесплатной версии Cost Calculator. Установить его можно из депозитария WordPress. Для этого нужно перейти в панель управления сайтом и перейти из раздела “плагины” в “добавить новый”
в окошке “поиск” пишем Cost Calculator и в открывшемся списке плагинов выбираем “Конструктор калькулятора цен” он у меня первый на картинке и нажимаю на кнопку “Установить”
Затем на кнопку “Активировать”
В разделе плагинов сайта появляется наш плагин “Cost Calculator Builder”
В верхней и левой панели появится надпись “Калькулятор стоимости”. Нажав на любую из них переходим в настройку калькулятора.
Настройка калькулятора
Для начала работы нажимаем на кнопку “Создать”
Из общего списка выбираю “сервис”, хотя можно использовать любую позицию, т.к. буду использовать собственную форму создания калькулятора. На бесплатной версии предлагается только один шаблон для каждого вида деятельности. Но кому-то и это подойдет.
Я делаю калькулятор для ремонта автомобилей и мне нужно, чтобы выбранные заказчиком виды работ складывались в общую стоимость. Поэтому навожу мышку на поле “Основные” и жму на зеленую кнопку. Открывается окно с подсказками в работе с калькулятором. Желающие можете изучить, а мы закроем это окно и двинемся дальше.
В поле Untitled вносим название калькулятора. У меня — “Покраска автомобиля”
Затем из левой колонки виджетов перетягиваем в рабочее поле нужные нам позиции и заполняем пустые поля.
Поле текстовое с пояснениями
Первое поле это текст с пояснениями, что это за калькулятор и что нужно делать.
После заполнения полей необходимо нажать “сохранить” и затем нажать “сохранить” сам калькулятор. Не забывайте это делать регулярно, иначе что-то может не сохраниться и будет обидно.
Поле “флажок”
Второе поле, которое я выбираю — это “флажок”. Это единственное поле в котором можно осуществить суммирование стоимости позиций, выбранных заказчиком независимо от их количества. Все остальные “Переключатель” и “Выпадающее” дают возможность выбрать что-то одно из предложенного.
В настройках данного поля есть две настройки: “Основные настройки” и “Параметры”. Поставьте ползунки включения как на картинке.
Позиция и ее стоимость
Переходим в параметры. Здесь в значение “ярлык” вносим название работ и в поле “значение” их стоимость. И в значение “подсказка” то, что Вы хотите пояснить по поводу параметра и стоимости.
Нажимаем “сохранить” и еще раз “сохранить” для всего калькулятора.
Заполнение похожих по содержанию позиций калькулятора
Теперь мы отдельные позиции можем клонировать. Так, как правая сторона автомобиля аналогична с левой, то и стоимость одинакова. Наведем на ячейку правая сторона открывается окно “клонировать” нажимаем на него.
Наводим мышку на новое клонированное окно и вносим корректировки. Правая меняем на левое. Не забываем сохранять.
Из левой части вытягиваю “флажки” на рабочее поле справа.
Все заполняется аналогично вышеизложенному согласно требованиям Вашего бизнеса.
Я заполняю для покрасочных работ СТО.
Из левой части еще раз вытаскиваю “флажки” на рабочее поле справа.
Заполняю позиции
Для общих настроек сходим в окно “настройки”
Делаем как у меня
Дизайн калькулятора
Для изменения дизайна заходим в вкладку дизайн и выбираем нужные нам параметры по цвету
Настройки валюты
Сделайте как на картинке ниже
На панели в верхнем правом углу есть кнопка “предпросмотр” нажав на которую можно увидеть ваш калькулятор на всех этапах создания.
Установка калькулятора на Ваш сайт
Для того, чтобы разместить созданный калькулятор на сайт необходимо нажать на кнопку “</>вставка” в верхней правой стороне экрана.
Выходят параметры встраивания калькулятора. Выбираю “вставить вручную”.
Нажимаю на треугольник в данном поле.
Открывается шорткод калькулятора. Нажимаю на зеленую кнопку копирования.
Сохранение шорткода на сайте
В панели управления Вашим сайтом на WordPress переходим в “Страницы”, затем “Добавить новую”
Заголовок обзываем “Калькулятор ремонта” или как Вам хочется, и нажимаем “опубликовать” два раза.
После этого нажимаем плюс в черном квадрате и выбираем иконку шорткода.
В поле шорткода вставляем сохраненный шорткод нашего калькулятора и нажимаем “Обновить”
Калькулятор стоимости покраски автомобиля установлен. Выглядит на сайте он вот так:
Вот и все.
Теперь у Вас есть инструмент, позволяющий зашедшему на Ваш сайт клиенту, сразу узнать стоимость работ по имеющимися у него потребностям.
Поздравляю Вас!
Хотите посмотреть как калькулятор ремонта, созданный нами, работает? Посмотрите главную страницу сайта: https://seval-avto.com/