КАК СОЗДАТЬ КАЛЬКУЛЯТОР WORD PRESS? ПОШАГОВАЯ ИНСТРУКЦИЯ ОБЗОР ПЛАГИНОВ И СЕРВИСОВ

В обзорной статье всех калькуляторов для WordPress мой коллега подробно разбирал плагин WPcalc, однако 09.12.2021 он был закрыт и больше недоступен для загрузки.

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

Бесплатный плагин – детище тех же разработчиков (Wow-Company), которые в свое время трудились над WPcalc.

Этот плагин достаточно прост в использовании и наделен гибкими настройками для создания собственных онлайн-калькуляторов и внедрения их на страницы своего сайта.

Установка стандартная, из репозитория WordPress прямо в админке.

Из-за отсутствия русского перевода пользователям сложно самостоятельно разобраться в его настройках. Давайте разберем по шагам, как сделать рабочий калькулятор этим бесплатным плагином.

• Полностью бесплатный функционал.
• Можно создавать неограниченное число калькуляторов и элементов внутри одного калькулятора.
• Встроенный инструмент Live builder для формирования формул непосредственно при создании калькулятора.
• Работает на базе Vanilla JS без использования библиотеки jQuery.

Такой калькулятор — очень нужный инструмент для какого-нибудь интернет-магазина или лендинга ВордПресс.

Делаем калькулятор с помощью Calculator Builder

После установки в административной части сайта появится новая вкладка «Calculator Builder».

При клике на нее перейдите в окно с несколькими табами:

• List– список всех созданных вами калькуляторов;
• Add new– на этой вкладке можно добавить новый калькулятор;
• Import/Export– есть возможность импортировать/экспортировать настройки (файл .json), чтобы использовать одни и те же калькуляторы на нескольких сайтах сразу;
• Support– форма для общения с техподдержкой;
• Documentation– советую заглянуть в этот раздел, чтобы посмотреть примеры заполнения Live builder и видео, пусть и на английском языке;
• Changelog– список изменений при обновлении плагина.

Теперь приступим к созданию калькулятора, который будет рассчитывать стоимость работ по заливке полов.

Нажмем на вкладку «Add new», чтобы добавить новый калькулятор.

Разберем это окно более подробно.

В нем есть следующие элементы:

• Field type – выпадающий список для выбора типа поля;
• Title –заголовок поля;
• Required – обязательное поле (можно установить «Yes/No»);
• Addon – дополнительное поле, например, для единиц измерения с возможностью вывести справа или слева от поля ввода;
• Value – начальное значение;
• Step – шаг;
• Min – минимальное значение;
• Max – максимальное значение.

В этом плагине есть следующие типы полей (Field type):

• Number — поле для ввода числовых значений. Есть счетчик, шаг, проверка по умолчанию на соответствие заданному диапазону. На некоторых устройствах с динамическими клавиатурами отображает панель клавиатуры.
• Select — выпадающий список с заданными пользователем значениями.
• Radio — переключатель, позволяющий выбрать одно значение из нескольких предложенных вариантов.
• Checkbox — флажок для выбора/отмены заданного значения.
• Number & Select — вставляет два поля сразу: числовое и список значений.
• Buttons — выводит кнопки Calculate и Reset для вычисления и сброса данных в форме калькулятора.
• Result — настройки поля с результатами, доступного только для чтения.
• Title — заголовок.
• Separator и Spacer — разделители для более красивого отображения результатов.

Нам понадобятся поля 4 типов: Number для установки ширины и высоты, Checkbox для добавления к расчету стоимости снятия старого покрытия, Buttons для вывода результатов и Result для вывода результатов.

Настройки каждого поля представлены на скриншотах.

В результате окно Builder примет такой вид:

Теперь нужно написать формулу в разделе Formula, которая будет делать расчет (например, при стоимости работы в 2000 рублей за 1 квадратный метр), используя эти ID.

В этом коде первая строчка делает расчет, а вторая – округляет полученное значение до 2 знака после запятой и присваивает полученное значение результирующему полю.

Теперь можно скопировать этот шорткод и вставить его на любую страниц/запись:

Отображение калькулятора на сайте:

Как видите, калькулятор работает и предоставляет пользователю выбор – сделать расчет стоимости только заливки полов или вместе со снятием старого покрытия.

Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.

В современном интернете важную роль играет удобство и интерактивные элементы. Хорошим стимулом к подаче заявки на услугу или покупке является калькулятор для WordPress, но таких возможностей мало в связи со сложностью разработки.

Плагин WPCalc рассчитает стоимость работы или услуги

Использую в WordPress плагин WPCalc давно, потому что настройка расчета стоимости сводиться к созданию формулы и внешнего вида. Устанавливаем и активируем из административной панели поиском по плагинам.

Появится новый раздел в меню WPCalc заходим в него, нажимаем Add New.

Появится строчка с надписью Add new fields, она добавляет элемент в пример вычисления формулы, которую будем писать дальше. Сделаем калькулятор для подсчета наливных полов, выведем четыре поля:

• Длина
• Ширина
• Прайс за 1 квадратный метр
• Возможность выбора опции снятие старой заливки

Логика такая: находим площадь, умножаем на стоимость работы за 1 кв м, и прибавляем цену за снятие старого материала (исходя из площади). Первой зададим длину.

1. Раздел Title задает заголовок, можно не показывать и снять выделение чекбокса
2. Item type – тип показывает как будет показана функция, нужно чтобы пользователь вводил цифры, значит выставляем input
3. Field width – сколько места занимает строчка ввода по горизонтали, выставлю 6/12 чтобы рядом прописать еще раздел ширины
4. Validation – выставляем number, все что не имеет числового значения расценивается ошибкой
5. Placeholder – заполнитель текстовой области, написал «введите длину
6. Value – значение по умолчанию, записал 0
7. По аналогии создаем еще один fields ширины, должно получится так.

Добавим новый раздел, он будет статичным, с заранее заданной ценой услуги по демонтажу старого покрытия. Снова нажимаю синюю кнопку, ввожу данные.

Обозначил Item type как Checkbox, с помощью галочки. Размер 12/12, value 1000, то есть тысяча рублей будет браться за очистку 1 квадратного метра пола. Selecte оставил не отмеченным, чтобы услуга по выравниванию по умолчанию не прибавлялась.

Следующий шаг настройка формулы, создаем раздел, выставляем параметры.

В тайтле написал результат, выводить не стал. В поле item type выставил Result. В разделе formula пишем принцип вычисления. У каждого окна есть название в данном случае Field 4. Цифра показывает номер объекта, оно не повторяется в рамках одного калькулятора. 1 — длина, 2 — ширина, 3 — стоимость за очистку.

Записываем элемент в формулу через нижнее подчеркивание, например field_1.

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

Создаем запись или страницу в WordPress, вставляем шорткод, выбираем предварительный просмотр.

На странице отобразиться калькулятор, проверим. Введу данные и посчитаю самостоятельно совпадают ли цифры.

Расчет прошел успешно, при отметке чекбокса цифра стала 18000, что соответствует заданным параметрам вычисления. Для разнообразия внешнего вида перейдите в раздел style, настройте оформление и сохраняйте.

Платный вариант плагина

В платном варианте есть несколько дополнительных функций:

• Неограниченное количество форм
• Больше стилей
• Интеграция с Mailchimp и Getresponse
• Отправка писем с результатом расчета пользователю и админу
• Добавить адрес электронной почты в базу данных
• Добавить форму после публикации контента
• Виджет с формой
• Копирование и экспорт списка контактов в .xls, .csv

Есть база знаний, функционал не ограничен простыми операторами, есть логарифмы, остатки. Существует форум поддержки, информация располагается во вкладке FAQ.

Калькулятор совместим со всеми плагинами типа elementor, woocommerce. Он имеет свой шорткод, а вставить его просто.

Видео инструкция

Чтобы процесс создания понять лучше, записал свое видео.

Русские разработчики позаботились о пользователях как платных, так и бесплатных тарифов. На есть все расчеты с формулами, какие отрасли затронуты:

• Кредитные сделки
• Процентные операции
• Ландшафтное направление
• Наука
• Красота
• Питание
• Конвертеры
• Строительство

Можете подобрать расчет, внести порядок действий в калькулятор. На данный момент число конфигураций почти 520 версий.

Стоит внести свои характеристики и настроить вывод, остальное за системой. Отмечу что справка на сайте на русском языке.

Примеры других калькуляторов

Приведу три варианта дополнений для WordPress. Но предупрежу, что обращать на них внимания не стоит, потому что большинство устарело или имеют узкую специализацию.

1. WPCC – не обновлялся 6 лет, имеет простую панель, не совместим с новыми версиями PHP
2. Responsive Mortgage Calculator – калькулятор разрабатывался для недвижимости особенно ипотечные сделки
3. Calculated Fields Form – предоставляет необходимые возможности доступные только в платной версии. Огромный плагин WordPress, разобраться сложно, для простых задач используйте мой вариант

Онлайн сервисы калькуляторов на русском языке

В интернете есть сервисы для калькуляторов, большинство платные, имеет русский перевод. Покажу несколько вариантов.

UCalc настраиваемый под любые цели

Сервис стал популярным, потому что имеет модуль для синхронизации с вордпресс. Бесплатная версия не даст создать крутой калькулятор, но для простых задач подойдет идеально.

Выделю рекламу платных услуг на каждом этапе использования, но это бизнес. Есть два отличных момента это наличие ползунков – выбор числа сделать не из списка, а на шкале перемещения. Второй наличие счетчика времени.

Calccreator

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

Можно за один месяц создать максимум калькуляторов и ставить на сайты клиентов. Скрипты проверены с WordPress, совместимость подтверждаю.

Закончу статью мы разобрались как сделать калькулятор на CMS WordPress, показал варианты, дал аналоги в виде дополнительных модулей и онлайн решения.

WPCC — это плагин, который позволяет администраторам сайта создавать форму калькуляторов и настраивать формулы расчетов.

В версия калькулятора «Creator Calculator 3.5» для CMS WordPress внесены следующие изменения и возможности:

Демо калькулятора

Внимание пользователям WPCC версии младше 3.5

Структура таблицы калькулятора полностью изменена! Это означает, что вам нужно будет создать калькуляторы заново! Для вашего удобства добавлена функция, позволяющая просматривать параметры формул калькулятора прошлой версии. После того, как вы создадите новые калькуляторы, старую таблицу можно будет удалить через настройки плагина.

Большой скриншот интерфейса админ панели WPCC 3.5

Описание работы калькулятора

Администратор сайта на WordPress может создавать неограниченное количество форм калькулятора с размещением их на страницах сайта, либо через виджеты.

Параметры калькулятора

Каждый калькулятор можно назвать своим именем. Данное имя отображается только в административной панели.

Так же у всех калькуляторов есть следующие индивидуальные настройки

Общие настройки:

• Название кнопки
  — по умолчанию Расчитать. Вы можете указать например: Получит результат
• Текст перед суммой
  — по умолчанию: Результат. Отображается перед результатом расчета.
• Текст после суммы
  — по умолчанию: Руб. Наример можно указать $.
• Action формы
  — куда перенаправить пользователя после расчета. ( Работает только в случаи отключенного JavaScript)
• Округлять результат
  — можно выбрать фунацию при помощи которой будет обработана сумма результата. Для вас доступны: Round (от 0 до 4 знаков после запятой), Ceil и Floor.
• Дизайн калькулятора:
  Вы можете выбрать одну из четырех готовых тем на любой вкус, либо внести правки в существующую.

Настройки писем:

• Включить отправку писем
  — если требуется отправлять письма после расчета, выберите Да
• Тема
  — Тема письма, которое отправляется на E-Mail. После темы автоматически добавляется Имя пользователя. Например: Расчет калькулятора от пользователя Вася Пупкин.
• На какой E-Mail отправлять
  — укажите email. По умолчанию email администратора.
• Текст в начале письма
  — Текст перед таблицей с результатами расчета
• Текст перед формой
  — Отображается перед формой отправки письма пользователем.
• Сообщение об успешной отправке
  — Отображается, когда сообщение успешно отправлено.

Загрузка скриптов плагина:

С версии 3.5 для полноценной работы плагина подключаются библиотеки: (jquery-ui-core, jquery-ui-slider, wpcc.js и пр.). Чтобы не захламлять вашу страницу, вы можете указать ID страниц, на которых размещен шорткод плагина, тогда скрипты будут подгружаться только там. Если вы используете виджет плагина, то укажите 0 (ноль) для загрузки скриптов на всех страницах сайта. Эти настройки одинаковы для всех создаваемых калькуляторов.

Типы полей, их параметры, описание

В плагине рядом с каждым параметром поля есть знак вопроса «?». При нажатии на вопросительный знак, вы попадете на страницу сайта разработчика с более подробным описанием параметра.

Текстовой блок:

Отображает заголовок и текст указанный в его параметрах.

• Заголовок— отображается над полем.
• Текст— можно указать любой произвольные текст, который не участвует в формуле расчета. Поле поддерживает html теги. Отступы добавляются автоматически (nl2br).
  Все результаты расчетов калькулятора записываются сессию, в связи с этим можно указать следующие коды, которые выведут нужный результат из $_SESSION.
• [session id=«номеркалькулятора»]указать номер поля калькулятора или указать sum для отображения результата[/session]
• Визуально скрыть поле— добавляет display:none для блока поля. Нужно для работы с полем условия.

Select:

Отображает выпадающий список с возможность выбора 1 параметра.

• Заголовок— отображается над полем.
• Знаки до— Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после— Арифметический знак, который будет стоить после поля. Например — или )-
• Список— Данное поле позволяет создавать варианты в выпадающем списке. В прошлых версиях списки составлялись по следующему шаблону:
  [цена]: название поля;[цена2]: название поля2;

  с версии 3.5 шаблон списков стал проще:

  цена: название поля

  цена2: название поля2

• Это поле участвует в формуле расчета— Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию.
• Визуально скрыть поле— добавляет display:none для блока поля. Нужно для работы с полем условия.

Checkbox:

Позволяет произвести множественный выбор из списка.

• Аналогично полю SELECT кроме параметров:
• Действие с данными— Арифметический знак, который означает действие между выбранными чекбоксами.
• По умолчанию— Нужно указать цифру, которая будет применена при расчете в случае, когда ни один checkbox не был выбран.
• Это поле участвует в формуле расчета— Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию. Стоит учесть момент, если поле не участвует в формуле, не нужно указывать параметр «Действие с данными», тогда вы сможете видеть все данные, которые выбрал пользователь в отправляемом письме.

Radio:

Позволяет произвести одиночный выбор из списка.

• Аналогично полю SELECT.

Input Text:

Отображает поле для ввода параметров пользователем.

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию— Нужно указать цифру, которая будет применена при расчете в случае, когда посетитель ничего не ввел в поле.
• Цена— Нужно указать цифру, которая будет связана с действием, указанным в параметре поля и произведено с введенными пользователем данными.
• Действие с данными— Арифметический знак, который означает действие с введенными данными посетителем и ценой поля.
• Визуально скрыть поле — добавляет display:none для блока поля. Нужно для работы с полем условия.
• Это поле участвует в формуле расчета— Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию. Стоит учесть момент, если поле не участвует в формуле, не нужно указывать параметр «Действие с данными», тогда вы сможете видеть все данные, которые ввел пользователь в отправляемом письме.

Input Hidden:

Скрытое поле, которое участвует в формуле расчета но не отображается пользователям.

• Знаки до — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после — Арифметический знак, который будет стоить после поля. Например — или )-
• Цена — Нужно указать цифру, которая будет участвовать при расчете.

$_SESSION:

Скрытое поле, которое участвует в формуле расчета, но не отображается пользователям. Позволяет получить данные из результатов расчета калькуляторов.

• Знаки до
  — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после
  — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию
  — Нужно указать цифру, которая будет применена при расчете в случае, когда данные из сессии пусты.
• ID калькулятора
  — Указываем ID калькулятора, из которого необходимо получить данные
• ID поля или sum
  — Указываем ID поля или пишем sum, чтобы получить результат

jQuery поле:

Скрытое поле, которое участвует в формуле расчета, но не отображается пользователям. Позволяет получить значение поля после действия пользователем с указанным полем.

• Знаки до
  — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после
  — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию
  — Нужно указать цифру, которая будет применена при расчете в случае, когда данные поля пусты.
• ID поля
  — Указываем ID поля из которого нужно скопировать данные. Работает для: Input text, Select, Radio, Checkbox, Slider

Арифметическая функция:

Скрытое поле, которое участвует в формуле расчета, но не отображается пользователям. Позволяет обернуть поля в выбранную функцию и произвести с ней определенные действия при расчете.

• Знаки до
  — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после
  — Арифметический знак, который будет стоить после поля. Например — или )-
• Какую функцию используем
  — Есть возможность выбрать две функции:
  1. Извлечь квадратный корень — позволяет извлечь квадратный корень из поля или группы полей. Для корректной работы обязательно
  следует обернуть поле в скобки.Если мы хотим извлечь квадратный корень из группы полей, их так же следует обернуть квадратными скобками:

  [12](15+57-11)

  2. Возвести в степень — позволяет возвести в степень поле или группу полей. Для корректной работы поле должно быть охвачено скобкам! В конце скобки указываем степень, в которую нужно возвести поле. Например, возведем поле 10 в степень 2:

  [12](10, 2) — где 2 это степень.

  Мы должны указать в «Знак до» или «Знак после» поля, которое мы возводим в степень следующие параметры:, 2

Slider:

Поле, которое позволяет отобразить слайдер (ползунок).

• Знаки до
  — Арифметический знак, который будет стоять перед полем. Например + или +(
• Знаки после
  — Арифметический знак, который будет стоить после поля. Например — или )-
• По умолчанию
  — Нужно указать цифру, которая отобразит ползунок в указанном отрезке между Минимальным и Максимальны значением.
• Визуально скрыть поле
  — добавляет display:none для блока поля. Нужно для работы с полем условия.
• Минимальное значение
  — Нужно указать цифру, которая будет являться минимальным значением ползунка.
• Максимальное значение
  — Нужно указать цифру, которая будет являться максимальным значением ползунка.
• Шаг
  — Нужно указать цифру, с каким шагом будет «скользить» ползунок.
• Положение
  — в каком положении будет отображен ползунок. Вертикально или Горизонтально.
• Это поле участвует в формуле расчета
  — Если данное поле нужно исключить из формулы расчета, выберите опцию Нет. Выбранные параметры пользователем будут записаны в сессию.

Условие IF VAL Field == Val User:

Поле, которое не видно пользователем, но принимает участие в расчете.

• Какое поле сравниваем
  — Укажите ID поля, значение которого мы будем сравнивать для выполнения условия. Работает для: Input Text, Select, Checkbox, Radio, Slider.
• Какое значение должно быть у поля
  — Укажите значение, которое будет сравниваться в условии. Например 100
• Какие поля отображаем
  — Укажите ID полей через запятую, которые нужно отобразить и включить в формулу расчете. У указанных полей параметры «Визуально скрыть это поле» должен быть выставлен: «Да, добавить display: none»
• Какие поля скрываем
  — Укажите ID полей через запятую, которые нужно скрыть и исключить в формуле расчете. У указанных полей параметры «Визуально скрыть это поле» должен быть выставлен: «Нет»

Как вставить калькулятор на страницу

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

Шорткод имеет следующий вид:

[wpcc id="1"]

где 1 — это ID вашего калькулятора

Если вам требуется вставить калькулятор в php файл темы, используйте следующий код:

<?php echo do_shortcode('[wpcc id="1"]'); ?>

Что означает «Текстовая формула ID полей»

Отображает структуру полей вашего калькулятора с знаками, выставленными в параметрах «до» и «после».

Данный параграф позволяет легко найти ошибки в своей формуле.

Что означает «Строка»

После расчета калькулятора в административной панели можно увидеть поле «Строка», которая отображает данные из полей, их знаки «до» и «после».

Эта строка выполняется перед отображением суммы.

Что такое «$_SESSION[‘wpcc_Х’]»

После расчета калькулятора в административной панели можно увидеть массив данных из сессии. В массиве ключ является ID поля, а значение — результатом поля. Ключ sum содержит в себе результат расчета.

Так же в массиве присутствуют названия указанных или выбранных данных пользователем в калькуляторе.

Пример массива сессии

Array
(
    [2] => 3
    [3] => 9000
    [4] => 1
    [5] => 19
    [8] => 180
    [9] => zetrider.ru
    [11] => 520
    [14] => 850
    [names] => Array
        (
            [2] => Интернет магазин
            [3] => Разработать логотип, Фирменный стиль
            [4] => Нет
            [5] => 19
            [8] => Да
            [9] => zetrider.ru
            [11] => Новости, Регистрация
            [14] => 3D экскурсия офиса, Корзина товаров
        )

    [sum] => 15300
)

Что такое «ksort(array())»

После расчета калькулятора в административной панели можно увидеть отсортированный массив расчета данных с их знаками «до» и «после». Позволяет вам полностью увидеть картину формулы. Ключ массива НЕ является ID поля. Это порядковый номер в массиве.

Как изменить стили калькулятора

В калькулятора на момент написания статьи создано 4 простых темы.

Файлы тем расположены в папке плагина /wp-creator/calculator/theme/название выбранной вами темы для калькулятора

В каждой папке есть файл style.css который отвечает за оформление калькулятора.

Как использовать калькулятор не по назначению

Бывают случаи, когда рассчитывать в калькуляторе ничего не требуется, но нужно получить данные от пользователи.

Например: Вы хотите реализовать форму, в которой будет предложен выбор марки автомобиля. Посетителю при выборе определенной марки авто при помощи поля «Условие» отображаются следующие опции по конфигурации технических характеристик. После всех действий вам на почту приходят данные которые выбрал пользователь.

Для реализации подобной задачи, у всех полей выставляем «Нет» в параметре: «Это поле участвует в формуле расчета».

При помощи CSS вы можете скрыть поле результата расчета, чтобы посетитель не видел не нужную ему информацию в которой будет отображено 0 руб. Стиль отвечающие за блок с результатом расчета: .wpcc_result либо wpcc_result_X где X — это ID вашего калькулятора.

Как экспортировать формулу

Вы можете скопировать сериализованный массив для дальнейшей передачи или импорта в другой калькулятор через кнопку «Экспорт формулы». В экспортированных данных сохраняются все созданные поля и индивидуальные настройки калькулятора.

Как Импортировать формулу

Вы можете импортировать ранее сериализованный массив из другого калькулятора при помощи кнопки «Импорт формулы». В импортируемых данных содержатся все созданные поля и индивидуальные настройки калькулятора. Если вы импортируете данные с другого сайта (или переданные от друга), не забудьте поменять e-mail в настройках калькулятора на который будут отправляться письма.

/*
	X 	= ID калькулятора
	XF 	= ID поля
*/

.wpcc {}
.wpcc_x {}

.wpcc_form {}
.wpcc_form_x {}

.wpcc_box {}
.wpcc_box_XF {}

.wpcc_description {}

.wpcc_text {}
.wpcc_text_XF {}

.wpcc_select {}
.wpcc_select_XF {}

.wpcc_checkbox {}
.wpcc_checkbox_XF {}

.wpcc_radio {}
.wpcc_radio_XF {}

.wpcc_inputtext {}
.wpcc_inputtext_XF {}

.wpcc_jq_slider {}
.wpcc_jq_slider_vertical {}
.wpcc_jq_slider_horizontal {}
.wpcc_jq_slider_box {}
.wpcc_jq_slider_box_XF {}
.wpcc_jq_slider_text {}
.wpcc_jq_slider_text_XF {}

.wpcc .ui-slider-horizontal {}
.wpcc .ui-slider-vertical {}
.wpcc .ui-slider-range {}
.wpcc .ui-slider-handle {}

.wpcc_submit {}
.wpcc_submit_X {}

.wpcc_loading {}

.wpcc_result_block {}
.wpcc_result_block_X {}

.wpcc_result {}
.wpcc_result_x {}

.wpcc_mail {}
.wpcc_mail_X {}

.wpcc_mail .wpcc_text {}

.wpcc_mail .input {}
.wpcc_mail .textarea {}
.wpcc_mail .wpcc_submit {}
.wpcc_mail .wpcc_loading {}

.wpcc_mail_success {}
.wpcc_mail_success .wpcc_text {}

.wpcc_widget {}

<div class="wpcc wpcc_X ">
<form method="POST" action="#wpcc_result" class="wpcc_form wpcc_form_X">
 
<!-- Text -->
<div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF">
<div class="wpcc_description"></div>
<div class="wpcc_text wpcc_text_1"></div>
<div class="clear"></div></div>
 
<!-- Select -->
<div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF">
<div class="wpcc_description"></div>
<select name="" class="wpcc_select wpcc_select_XF wpcc_jq_XF" data-type="select">
<option value=""></option>
</select>
<div class="clear"></div></div>
 
<!-- Checkbox -->
<div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF">
<div class="wpcc_description "></div>
<div class="wpcc_checkbox wpcc_checkbox_3">
<label><input type="checkbox" name="" value="" class="wpcc_jq_XF" data-type="checkbox"></label>
</div>
<div class="clear"></div></div>
 
<!-- Radio -->
<div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF">
<div class="wpcc_description "></div>
<div class="wpcc_radio wpcc_radio_XF">
<label><input type="radio" name="" value="" class="wpcc_jq_XF" data-type="radio"></label>
</div>
<div class="clear"></div></div>
 
<!-- Input Text -->
<div class="wpcc_box wpcc_box_XF wpcc_jq_if_XF">
<div class="wpcc_description "></div>
<input type="text" name="" value="" class="wpcc_inputtext wpcc_inputtext_XF wpcc_jq_XF" data-type="inputtext">
<div class="clear"></div></div>
 
<!-- Slider -->
<div class="wpcc_box wpcc_box_XF wpcc_jq_slider_vertical wpcc_jq_slider wpcc_jq_if_XF" data-value="0" data-min="0" data-max="1000" data-position="vertical" data-step="1">
<div class="wpcc_description wpcc_description_XF"></div>
<div class="wpcc_jq_slider_box wpcc_jq_slider_box_XF wpcc_jq_XF" data-type="slider">
<!-- and Style jQuery UI Slide -->
</div>
<div class="wpcc_jq_slider_text wpcc_jq_slider_text_XF">0</div>
<div class="clear"></div></div>
 
<!-- Submit -->
<input type="submit" value="" name="wpcc_calculate" class="wpcc_submit wpcc_submit_X">
<div class="wpcc_loading"><div></div></div>
</form>
 
<div class="wpcc_result_block wpcc_result_block_X">
<!-- IF SUCCESS SEND -->
<div class="wpcc_mail wpcc_mail_success" id="wpcc_mail_result">
<div class="wpcc_text">
 
</div>
</div>
<!-- end IF SUCCESS SEND -->
 
<!-- SUM -->
<div class="wpcc_result wpcc_result_X" id="wpcc_result"></div>
 
<!-- Mail -->
<form method="POST" action="#wpcc_mail_result" class="wpcc_mail wpcc_mail_X">
 
<div class="wpcc_text"></div>
 
<input type="text" name="wpcc_user_name" value="" placeholder="" class="input" required><br>
<input type="email" name="wpcc_user_email" value="" placeholder="" class="input" required><br>
<input type="text" name="wpcc_user_phone" value="" placeholder="" class="input"><br>
<textarea name="wpcc_user_comment" placeholder="" value="" class="textarea"></textarea><br>
 
<input type="submit" name="wpcc_mail" class="wpcc_submit" value="">
 
<div class="wpcc_loading"><div></div></div>
 
</form>
</div>
 
</div>

UPD: Версия 3.5.2

• Добавлен параметр для условия «Оператор условия»: ==, >, <, >=, <=
• Добавлен параметр фильтр для поля «Input text»: только цифры и точка
• Исправлена ошибка изменения названия калькулятора
• Добавлено новое поле «Результат полей». Позволяет выбрать поля и применить к ним арифметическое действие

Приветствую читателей, в статье про калькулятор для вордпресс сайтов. Владельцам коммерческого ресурса на wordpress необходим простой в настройке калькулятор стоимости продукции. Протестировал около десятка вариантов, я разочаровался что не могу найти простое решение проблемы, потому что:

• Встраивание функции через изменение function сложное, нестабильные и неудобное
• Платные просят помесячную оплату
• Сервисы часто отказывают в работе
• Бесплатные лагают

Бесплатный плагин WPcalc

Обратившись к хорошему знакомому, посоветовал для вордпресс плагин . Это единственное вменяемое решение, остальное вытягивание денег. Устанавливаете и переходим к настройке первого калькулятора на сайте вордпресс.

Основная настройка

Сделаем для расчёта стоимости линолеума, то есть длину умножаем на ширину и на цену 1 квадратного метра за определённый сорт. Заходим в wpcalc и добавляем новый пункт, тут же появляется первое поле зададим длину.

1. Сам WPcalc
2. Для добавления нового калькулятора нажимаем Add New
3. пишем название (на сайте не отображается)
4. Заголовок раздела, если не хотите его отображать снимите галочку (первый длинна второй ширина)
5. Тип отображения их пять: checkbox, радио кнопка, ввод числа, селект (выбор из предложенного) и вывод результата
6. Длинна поля в долях. Например если хотим сделать чтобы дина и ширина были в одну строчку, выставляем у обоих 1/2 то есть на каждое поле по половине пространства.
7. Правило, нам нужно number (числа), если будут введены буквы, то калькулятор выдаст ошибку
8. Placeholder заполняет поле когда в нём нет значений. Value уже введённое значение, что даёт неудобство, пользователю приходится стирать и печатать свои значения, не советую заполнять
9. Add new field, добавляет новое поле в вордпресс.

С цифровыми полями разобрались теперь надо прописать тип линолеума и цену за каждый квадратный метр. Для этого жмём кнопку Add new field и добавляем, например, «выбор расцветки»

1. Для выбора задаем параметр select
2. Value — то что будет считаться в калькуляторе, Text — отображаемый текст
3. какой пункт будет выделен по умолчанию
4. Чтобы добавить ещё форму (черный например), жмём эту ссылку

Все параметры задали, вывод и подсчёт производиться добавлением нового Field, просто надо выставить result, смотрим ниже.

При вводе формулы элементы помечаем с нижним подчеркиванием и номером раздела. На странице инструмента в wordpress.org есть дополнения по применению математических операторов.

Идём в любую запись или страницу вордпресс, и в удобном месте вставляем шорткод. Перейдя на сайт увидим результат работы. Подсчёт идёт автоматически, при корректном заполнении всех форм.

Можно рассчитать любую задачу, например стоимость работ по отделке помещения, так же рассчитать площадь и умножить на цену квадрата. Все простые математические действия доступны.

Внешний вид

У данного инструмента есть настройка визуально части, перейдя в раздел style, найдёте несколько параметров исполнения, которых хватит для создания отличного и красивого дизайна, разбирать не будем, всё понятно интуитивно.

Остальные плагины расчёта услуг

Приведён список других инструментов для расчёта различных услуг:

• Calculated Fields Form, сложен в освоении и продвинутые функции доступны в платной версии. Поддерживает процедуры с процентами и сложными многоступенчатыми формулами. Его разбор в видео.
• Responsive Mortgage Calculator <div class="wpcc wpcc_X ">
<form method="POST" action="#wpcc_result" class="wpcc_form wpcc_form_X"><!— Text —>
  <div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
  <div class=»wpcc_description»></div>
  <div class=»wpcc_text wpcc_text_1″></div>
  <div class=»clear»></div></div>

  <!— Select —>
  <div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
  <div class=»wpcc_description»></div>
  <select name=»» class=»wpcc_select wpcc_select_XF wpcc_jq_XF» data-type=»select»>
  <option value=»»></option>
  </select>
  <div class=»clear»></div></div>

  <!— Checkbox —>
  <div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
  <div class=»wpcc_description «></div>
  <div class=»wpcc_checkbox wpcc_checkbox_3″>
  <label><input type=»checkbox» name=»» value=»» class=»wpcc_jq_XF» data-type=»checkbox»></label>
  </div>
  <div class=»clear»></div></div>

  <!— Radio —>
  <div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
  <div class=»wpcc_description «></div>
  <div class=»wpcc_radio wpcc_radio_XF»>
  <label><input type=»radio» name=»» value=»» class=»wpcc_jq_XF» data-type=»radio»></label>
  </div>
  <div class=»clear»></div></div>

  <!— Input Text —>
  <div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
  <div class=»wpcc_description «></div>
  <input type=»text» name=»» value=»» class=»wpcc_inputtext wpcc_inputtext_XF wpcc_jq_XF» data-type=»inputtext»>
  <div class=»clear»></div></div>

  <!— Slider —>
  <div class=»wpcc_box wpcc_box_XF wpcc_jq_slider_vertical wpcc_jq_slider wpcc_jq_if_XF» data-value=»0″ data-min=»0″ data-max=»1000″ data-position=»vertical» data-step=»1″>
  <div class=»wpcc_description wpcc_description_XF»></div>
  <div class=»wpcc_jq_slider_box wpcc_jq_slider_box_XF wpcc_jq_XF» data-type=»slider»>
  <!— and Style jQuery UI Slide —>
  </div>
  <div class=»wpcc_jq_slider_text wpcc_jq_slider_text_XF»>0</div>
  <div class=»clear»></div></div>

  <!— Submit —>
  <input type=»submit» value=»» name=»wpcc_calculate» class=»wpcc_submit wpcc_submit_X»>
  <div class=»wpcc_loading»><div></div></div>
  </form>

  <div class=»wpcc_result_block wpcc_result_block_X»>
  <!— IF SUCCESS SEND —>
  <div class=»wpcc_mail wpcc_mail_success» id=»wpcc_mail_result»>
  <div class=»wpcc_text»>

  </div>
  </div>
  <!— end IF SUCCESS SEND —>

  <!— SUM —>
  <div class=»wpcc_result wpcc_result_X» id=»wpcc_result»></div>

  <!— Mail —>
  <form method=»POST» action=»#wpcc_mail_result» class=»wpcc_mail wpcc_mail_X»>

  <div class=»wpcc_text»></div>

  <input type=»text» name=»wpcc_user_name» value=»» placeholder=»» class=»input» required><br>
  <input type=»email» name=»wpcc_user_email» value=»» placeholder=»» class=»input» required><br>
  <input type=»text» name=»wpcc_user_phone» value=»» placeholder=»» class=»input»><br>
  <textarea name=»wpcc_user_comment» placeholder=»» value=»» class=»textarea»></textarea><br>

  <input type=»submit» name=»wpcc_mail» class=»wpcc_submit» value=»»>

  <div class=»wpcc_loading»><div></div></div>

  </form>
  </div>

  </div>
  , направлен на расчёт ипотечных, кредитный и банковских услуг, заявляет о поддержке
  elementor, старый плагин, которому на момент написания статьи уже 5 лет на русском языке, хорошо подойдёт дляизмерения стоимости строительных работ.

У наших читателей возникали вопросы, как сделать калькулятор подсчёта стоимости доставки. Скажу честно таких вариантов нет, есть для woocommerce, от компании СДЭК и почты России. Но под woocommerce не корректно поддерживается РФ, а от транспортных компаний, сырые, недоделанные и направленные на принуждении использовать их услуги.

Онлайн инструмент со своими характеристиками

Онлайн калькуляторы, сейчас существует два варианта, остальные не дотягивают, ограничиваясь несколькими характеристиками. Не дают гибкости и уверенности что работоспособности.

Calccreator популярен для ландшафтного дизайна

Знаменитый сервис calccreator.com не предлагает интеграции с их сервером, большая направленность на подсчёт строительных и ландшафтных работ. Настраиваете необходимые поля, по внешнему виду, функционалу и формулам. Далее скачиваем готовый скрипт и подсоединяем его на ресурс с любой CMS в том числе и wordpress. Отмечу что в платной версии раз в 10 больше возможностей.

Но у calccreator умеренная цена, оплачиваете период пользования, можете создать хоть 1000 калькуляторов, но по окончании срока подписки, они не блокируются, а продолжают действовать и доступны для изменения.

Ucalc умеет считать время

Поставил  на второе место, из-за агрессивного использования и вытягивания денег из пользователей. Очень скудный бесплатный интерфейс, не дающий нормально настроить подсчёт, с ограничением математических функций. Однако есть отлично сделанный плагин для вордпресс, связывающий аккаунт на сервисе с сайтом. Имеет отличительный подсчёт времени, которого нет у остальных. Есть настройки внешнего вида полей с ползунами, то есть настраивать рамки простым перетаскиваем ползунков.

В статье разобрали самый лучший калькулятор для вордпресс WpCalc, сочетающий в себе простоту и интуитивно понятный интерфейс. Творите если будут вопросы задавайте, всегда рады оказать помощь.

Калькулятор для сайта на WordPress и не только – лучшие решения 2022 года

/*
	X 	= ID калькулятора
	XF 	= ID поля
*/

.wpcc {}
.wpcc_x {}

.wpcc_form {}
.wpcc_form_x {}

.wpcc_box {}
.wpcc_box_XF {}

.wpcc_description {}

.wpcc_text {}
.wpcc_text_XF {}

.wpcc_select {}
.wpcc_select_XF {}

.wpcc_checkbox {}
.wpcc_checkbox_XF {}

.wpcc_radio {}
.wpcc_radio_XF {}

.wpcc_inputtext {}
.wpcc_inputtext_XF {}

.wpcc_jq_slider {}
.wpcc_jq_slider_vertical {}
.wpcc_jq_slider_horizontal {}
.wpcc_jq_slider_box {}
.wpcc_jq_slider_box_XF {}
.wpcc_jq_slider_text {}
.wpcc_jq_slider_text_XF {}

.wpcc .ui-slider-horizontal {}
.wpcc .ui-slider-vertical {}
.wpcc .ui-slider-range {}
.wpcc .ui-slider-handle {}

.wpcc_submit {}
.wpcc_submit_X {}

.wpcc_loading {}

.wpcc_result_block {}
.wpcc_result_block_X {}

.wpcc_result {}
.wpcc_result_x {}

.wpcc_mail {}
.wpcc_mail_X {}

.wpcc_mail .wpcc_text {}

.wpcc_mail .input {}
.wpcc_mail .textarea {}
.wpcc_mail .wpcc_submit {}
.wpcc_mail .wpcc_loading {}

.wpcc_mail_success {}
.wpcc_mail_success .wpcc_text {}

.wpcc_widget {}

<div class="wpcc wpcc_X ">
<form method="POST" action="#wpcc_result" class="wpcc_form wpcc_form_X">

<!— Text —>
<div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
<div class=»wpcc_description»></div>
<div class=»wpcc_text wpcc_text_1″></div>
<div class=»clear»></div></div>

<!— Select —>
<div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
<div class=»wpcc_description»></div>
<select name=»» class=»wpcc_select wpcc_select_XF wpcc_jq_XF» data-type=»select»>
<option value=»»></option>
</select>
<div class=»clear»></div></div>

<!— Checkbox —>
<div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
<div class=»wpcc_description «></div>
<div class=»wpcc_checkbox wpcc_checkbox_3″>
<label><input type=»checkbox» name=»» value=»» class=»wpcc_jq_XF» data-type=»checkbox»></label>
</div>
<div class=»clear»></div></div>

<!— Radio —>
<div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
<div class=»wpcc_description «></div>
<div class=»wpcc_radio wpcc_radio_XF»>
<label><input type=»radio» name=»» value=»» class=»wpcc_jq_XF» data-type=»radio»></label>
</div>
<div class=»clear»></div></div>

<!— Input Text —>
<div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
<div class=»wpcc_description «></div>
<input type=»text» name=»» value=»» class=»wpcc_inputtext wpcc_inputtext_XF wpcc_jq_XF» data-type=»inputtext»>
<div class=»clear»></div></div>

<!— Slider —>
<div class=»wpcc_box wpcc_box_XF wpcc_jq_slider_vertical wpcc_jq_slider wpcc_jq_if_XF» data-value=»0″ data-min=»0″ data-max=»1000″ data-position=»vertical» data-step=»1″>
<div class=»wpcc_description wpcc_description_XF»></div>
<div class=»wpcc_jq_slider_box wpcc_jq_slider_box_XF wpcc_jq_XF» data-type=»slider»>
<!— and Style jQuery UI Slide —>
</div>
<div class=»wpcc_jq_slider_text wpcc_jq_slider_text_XF»>0</div>
<div class=»clear»></div></div>

<!— Submit —>
<input type=»submit» value=»» name=»wpcc_calculate» class=»wpcc_submit wpcc_submit_X»>
<div class=»wpcc_loading»><div></div></div>
</form>

<div class=»wpcc_result_block wpcc_result_block_X»>
<!— IF SUCCESS SEND —>
<div class=»wpcc_mail wpcc_mail_success» id=»wpcc_mail_result»>
<div class=»wpcc_text»>

</div>
</div>
<!— end IF SUCCESS SEND —>

<!— SUM —>
<div class=»wpcc_result wpcc_result_X» id=»wpcc_result»></div>

<!— Mail —>
<form method=»POST» action=»#wpcc_mail_result» class=»wpcc_mail wpcc_mail_X»>

<div class=»wpcc_text»></div>

<input type=»text» name=»wpcc_user_name» value=»» placeholder=»» class=»input» required><br>
<input type=»email» name=»wpcc_user_email» value=»» placeholder=»» class=»input» required><br>
<input type=»text» name=»wpcc_user_phone» value=»» placeholder=»» class=»input»><br>
<textarea name=»wpcc_user_comment» placeholder=»» value=»» class=»textarea»></textarea><br>

<input type=»submit» name=»wpcc_mail» class=»wpcc_submit» value=»»>

<div class=»wpcc_loading»><div></div></div>

</form>
</div>

</div>

Первый элемент, который нам необходим это «группа». В эту группу будут добавлены поля, как на скриншоте ниже и написана формула для расчета внутри этой группы.

•  Поле тип стяжки добавим уже внутри группы через элемент «Select».Заполняем имя, значения в формате «имя;цифра для расчета;описание» и фото. Изображения добавляются в том же порядке, как и значения.

  

   

  Следующий элемент «Slider». Заполняем имя, минимальное значение, максимальное значение, значение шага и значение для расчета.

  

   

  Следующий элемент для толщины стяжки, также «Slider»

<div class="wpcc wpcc_X ">
<form method="POST" action="#wpcc_result" class="wpcc_form wpcc_form_X">

<!— Text —>
<div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
<div class=»wpcc_description»></div>
<div class=»wpcc_text wpcc_text_1″></div>
<div class=»clear»></div></div>

<!— Select —>
<div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
<div class=»wpcc_description»></div>
<select name=»» class=»wpcc_select wpcc_select_XF wpcc_jq_XF» data-type=»select»>
<option value=»»></option>
</select>
<div class=»clear»></div></div>

<!— Checkbox —>
<div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
<div class=»wpcc_description «></div>
<div class=»wpcc_checkbox wpcc_checkbox_3″>
<label><input type=»checkbox» name=»» value=»» class=»wpcc_jq_XF» data-type=»checkbox»></label>
</div>
<div class=»clear»></div></div>

<!— Radio —>
<div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
<div class=»wpcc_description «></div>
<div class=»wpcc_radio wpcc_radio_XF»>
<label><input type=»radio» name=»» value=»» class=»wpcc_jq_XF» data-type=»radio»></label>
</div>
<div class=»clear»></div></div>

<!— Input Text —>
<div class=»wpcc_box wpcc_box_XF wpcc_jq_if_XF»>
<div class=»wpcc_description «></div>
<input type=»text» name=»» value=»» class=»wpcc_inputtext wpcc_inputtext_XF wpcc_jq_XF» data-type=»inputtext»>
<div class=»clear»></div></div>

<!— Slider —>
<div class=»wpcc_box wpcc_box_XF wpcc_jq_slider_vertical wpcc_jq_slider wpcc_jq_if_XF» data-value=»0″ data-min=»0″ data-max=»1000″ data-position=»vertical» data-step=»1″>
<div class=»wpcc_description wpcc_description_XF»></div>
<div class=»wpcc_jq_slider_box wpcc_jq_slider_box_XF wpcc_jq_XF» data-type=»slider»>
<!— and Style jQuery UI Slide —>
</div>
<div class=»wpcc_jq_slider_text wpcc_jq_slider_text_XF»>0</div>
<div class=»clear»></div></div>

<!— Submit —>
<input type=»submit» value=»» name=»wpcc_calculate» class=»wpcc_submit wpcc_submit_X»>
<div class=»wpcc_loading»><div></div></div>
</form>

<div class=»wpcc_result_block wpcc_result_block_X»>
<!— IF SUCCESS SEND —>
<div class=»wpcc_mail wpcc_mail_success» id=»wpcc_mail_result»>
<div class=»wpcc_text»>

</div>
</div>
<!— end IF SUCCESS SEND —>

<!— SUM —>
<div class=»wpcc_result wpcc_result_X» id=»wpcc_result»></div>

<!— Mail —>
<form method=»POST» action=»#wpcc_mail_result» class=»wpcc_mail wpcc_mail_X»>

<div class=»wpcc_text»></div>

<input type=»text» name=»wpcc_user_name» value=»» placeholder=»» class=»input» required><br>
<input type=»email» name=»wpcc_user_email» value=»» placeholder=»» class=»input» required><br>
<input type=»text» name=»wpcc_user_phone» value=»» placeholder=»» class=»input»><br>
<textarea name=»wpcc_user_comment» placeholder=»» value=»» class=»textarea»></textarea><br>

<input type=»submit» name=»wpcc_mail» class=»wpcc_submit» value=»»>

<div class=»wpcc_loading»><div></div></div>

</form>
</div>

</div>

/*
X = ID калькулятора
XF = ID поля
*/

.wpcc {}
.wpcc_x {}

.wpcc_form {}
.wpcc_form_x {}

.wpcc_box {}
.wpcc_box_XF {}

.wpcc_description {}

.wpcc_text {}
.wpcc_text_XF {}

.wpcc_select {}
.wpcc_select_XF {}

.wpcc_checkbox {}
.wpcc_checkbox_XF {}

.wpcc_radio {}
.wpcc_radio_XF {}

.wpcc_inputtext {}
.wpcc_inputtext_XF {}

.wpcc_jq_slider {}
.wpcc_jq_slider_vertical {}
.wpcc_jq_slider_horizontal {}
.wpcc_jq_slider_box {}
.wpcc_jq_slider_box_XF {}
.wpcc_jq_slider_text {}
.wpcc_jq_slider_text_XF {}

.wpcc .ui-slider-horizontal {}
.wpcc .ui-slider-vertical {}
.wpcc .ui-slider-range {}
.wpcc .ui-slider-handle {}

.wpcc_submit {}
.wpcc_submit_X {}

.wpcc_loading {}

.wpcc_result_block {}
.wpcc_result_block_X {}

.wpcc_result {}
.wpcc_result_x {}

.wpcc_mail {}
.wpcc_mail_X {}

.wpcc_mail .wpcc_text {}

.wpcc_mail .input {}
.wpcc_mail .textarea {}
.wpcc_mail .wpcc_submit {}
.wpcc_mail .wpcc_loading {}

.wpcc_mail_success {}
.wpcc_mail_success .wpcc_text {}

.wpcc_widget {}

Осталось добавить два слайдера «Подсыпка песка» и «Демонтаж стяжки», по старой схеме. Добавляем их вне группы, ниже. Готово!

Также стоит сказать отдельные элементы просто суммируются между собой. Принцип работы на скрине ниже.