Как добавить калькулятор стоимости на сайт WordPress: простое, но элегантное решение

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

Существует несколько способов добавить на веб-сайт основные функции оценки стоимости, например, с помощью виджетов или CSS. Тем не менее, плагин для расчета стоимости тем Stylemix Themes для WordPress предлагает более элегантный и универсальный способ.

Что такое калькулятор стоимости?

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

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

Типичные приложения калькулятора стоимости

Есть так много предприятий, которые могут использовать калькулятор затрат, и вот лишь несколько типичных примеров:

• Лесопилки
• Салоны красоты, салоны красоты и СПА
• Агентства по аренде транспорта и снаряжения
• Агентства графического и веб-дизайна
• Поставщики медицинских услуг
• Хостинговые компании
• Профессиональные услуги, такие как копирайтинг, ведение бухгалтерского учета и т.д.
• Услуги по уборке и уборке
• Услуги печати
• Штукатурщики, маляры, каменщики и др.
• Напольные компании
• И многое другое…

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

Кроме того, эти калькуляторы не обязательно ограничиваются расчетами затрат. Например, на веб-сайте оздоровительного клуба или блоге о фитнесе может быть калькулятор ИМТ, а на сайте рецептов он может использоваться для преобразования метрических единиц в имперские единицы.

Плагин расчета стоимости тем Stylemix для WordPress

Плагин «Калькулятор стоимости» для WordPress от Stylemix Themes включает в себя все функции, необходимые для быстрого и простого добавления привлекательных полнофункциональных калькуляторов стоимости на ваш сайт.

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

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

Статья продолжается ниже

• Условная система
• Выбор даты, ползунок с несколькими диапазонами, раскрывающийся список изображений и настраиваемые элементы для загрузки файлов.
• Интеграция с WooCommerce
• Возможность добавления нескольких калькуляторов на страницу
• Широкий спектр возможностей настройки
• Готовая форма калькулятора с инструкциями для различных отраслей
• Интеграция Stripe и PayPal
• Интеграция контактной формы 7 и формы отправки
• безопасность reCAPTCHA
• Дублирование калькулятора и средства импорта/экспорта
• Панель управления заказами, включая удобное отслеживание заказов
• Премиум поддержка

В таблице ниже указаны текущие цены на версию Pro:

Получить плагин калькулятора стоимости для WordPress Pro

Установка плагина калькулятора стоимости для WordPress

Бесплатная версия плагина Cost Calculator доступна в каталоге плагинов WordPress, или вы можете получить ее через веб-сайт плагина. Я не буду описывать весь процесс его установки и активации, так как он такой же, как и для любого другого плагина. Однако, если вы не знаете, как это сделать, документация описывает этот процесс.

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

После активации версии Pro вам нужно будет ввести лицензионный ключ, который вы получили при покупке:

После того, как плагин будет установлен и активирован, на вашей панели WordPress появится новый пункт меню — здесь вы создаете свои калькуляторы:

Добавление калькулятора стоимости на сайт

Теперь я расскажу о процессе добавления базового калькулятора стоимости на веб-сайт с помощью плагина Cost Calculator. Я говорю «базовый», поскольку плагин способен на гораздо большее, чем может охватить объем этой статьи. Поэтому я настоятельно рекомендую прочитать веб-сайт плагина и документацию, чтобы узнать, что еще он может сделать. Кроме того, разработчик также создал библиотеку полезных видеороликов, включающую несколько учебных пособий.

Шаг 1

В новом пункте меню «Калькулятор стоимости», который появляется в бэкэнде WordPress, нажмите «Калькулятор стоимости», а затем нажмите зеленую кнопку «Создать новый»:

Шаг 2

На вкладке «Калькулятор» введите имя нового калькулятора, а затем нажмите зеленую кнопку со знаком «+»:

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

Статья продолжается ниже

Шаг 3

Далее появится панель, содержащая рабочую область, где будет построен калькулятор стоимости с помощью перетаскиваемых элементов:

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

В моем случае я хочу, чтобы он рассчитывал стоимость услуг копирайтинга и использовал ползунок для количества слов. Просто перетащите кнопку диапазона (которая представляет собой ползунок диапазона) из списка элементов справа туда, где написано «Поместите элемент здесь»:

Шаг 4

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

Ниже приведена конфигурация кнопки диапазона для моего калькулятора стоимости копирайтинга. Я хотел, чтобы ползунок начинался с минимума 500 слов и увеличивался максимум до 25 000 с шагом 500. Обратите внимание, что я поместил «слова» в поле валюты, поскольку диапазон должен быть словами, а не долларами:

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

Не беспокойтесь, если расчет в разделе «Общая сводка» неверен — это будет исправлено позже.

Шаг 5

Конечно, при необходимости в калькулятор можно добавить еще много элементов. Например, я добавлю флажок, который позволит моему клиенту выбрать, хотят ли они 24-часовой оборот за дополнительную плату в размере 200 долларов США.

После перетаскивания элемента Checkbox в калькулятор я добавил следующие конфигурации:

Вот готовый флажок в действии:

Статья продолжается ниже

Шаг 6

Теперь, когда все необходимые элементы добавлены, необходимо, чтобы они правильно рассчитывались в итоговой сводке.

Для этого воспользуемся элементом Total. Опять же, просто перетащите его в нужное место, после чего появится панель конфигурации:

Расчет, который мне нужен:

(выход из ползунка диапазона x моя ставка 0,08 доллара за слово) + вывод из флажка 24-часового обслуживания

Под доступными полями вы увидите две зеленые кнопки: «range_field_id_0» и «checkbox_field_id_2». Они содержат выходные данные кнопки диапазона и флажка соответственно. Если были добавлены другие элементы, они также будут отображаться здесь в виде зеленых кнопок.

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

1. Щелкните ( в разделе «Доступные операторы», чтобы открыть скобки в поле «Формула калькулятора»).
2. Нажмите зеленую кнопку «range_field_id_0», чтобы добавить его в поле «Формула калькулятора».
3. Нажмите * в «Доступных операторах», чтобы добавить оператор умножения.
4. Введите 0,08 (т. е. моя ставка за слово) рядом со *
5. Щелкните ) в разделе «Доступные операторы», чтобы закрыть скобки.
6. Нажмите + в «Доступные операторы», чтобы добавить оператор сложения.
7. Нажмите зеленую кнопку «checkbox_field_id_2», чтобы добавить его в поле «Формула калькулятора».

Вот так выглядит готовый расчет:

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

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

Шаг 7

Мой базовый калькулятор завершен и готов к вставке на мой веб-сайт, что очень легко сделать.

Просто нажмите «Калькулятор стоимости» в меню панели администратора WordPress. Это приведет вас на страницу «Мои калькуляторы», где вы найдете список всех созданных калькуляторов (поскольку я создал только один, это все, что содержится в моем списке). Затем щелкните короткий код рядом с калькулятором, который вы хотите use — это скопирует шорткод в буфер обмена:

Перейдите к записи или странице WordPress, где вы хотите разместить калькулятор, и просто вставьте шорткод туда, где он вам нужен, используя блок «Шорткод» (или элемент, если вы используете Elementor):

Публикация страницы или поста запускает калькулятор:

Это еще не все, ребята!

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

Условия

В то время как рассмотренный ранее элемент «Итого» позволяет создавать сложные математические уравнения, вкладка «Условия», которая является только функцией Pro, расширяет их, используя логические условия. Например, доступны И, ИЛИ, есть/не выбрано, больше/меньше, есть/не равно и т. д.

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

Настройки

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

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

Настроить

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

Вердикт

Я должен сказать, что мне очень нравится плагин для расчета стоимости тем Stylemix Themes для WordPress, и я определенно буду использовать его на своих бизнес-сайтах.

Создание как простых, так и сложных калькуляторов — абсолютный бриз благодаря интуитивно понятному интерфейсу, функции перетаскивания и подробной документации. Кроме того, калькуляторы добавляют на ваш сайт интерактивный элемент, который способствует взаимодействию. Лучше всего то, что интеграция с PayPal и Stripe позволяет вашим клиентам выбирать нужные им варианты и оплачивать их с помощью калькулятора, чтобы вы могли сразу же получить их бизнес (и доллары).

Каким бы видом бизнеса вы ни занимались, возможно, ваш веб-сайт выиграет от добавления калькулятора. Это не только улучшит пользовательский опыт для посетителей сайта, но и автоматически предоставит им персонализированную информацию о стоимости, которая им нужна, что позволит им немедленно принять решение о покупке. А плагин Cost Calculator для WordPress сделает добавление калькуляторов на ваш сайт очень простым.

Попробуйте плагин «Калькулятор стоимости»