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

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

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

Если вам нужно, есть также версия pro с большими возможностями.

Скачать Pricing Table бесплатно | Скачать Pricing Table Pro за $10

Установка плагина

Скачайте плагин по ссылкам выше, загрузите его на ваш сайт и активируйте в Консоли. Если вы не знаете, что такое плагины и как их устанавливать, посмотрите этот урок.

Сразу после активации плагина вы увидите новый пункт меню в Консоли: Pricing Table.

Добавление таблицы тарифов

Нажмите "Add New" и вы сможете начать создавать вашу таблицу тарифов. На странице "Add New" вы увидите некоторые опции: вы можете добавить параметр ("Add Feature") и добавить тариф ("Add Package"):

Начните с добавления параметров, которые вы хотите использовать, вы увидите, что по умолчанию уже есть: цена, подробности, URL кнопки и текст кнопки. Другие параметры зависят от вашего продукта. Здесь мы добавили несколько параметров, которые могут быть включены для веб-хостинга:

Как только вы добавили все ваши параметры, вы можете начать добавлять ваши тарифы. Нажмите "Add Package", и появятся поля, которые вам нужно заполнить данными для тарифа:

Вы можете добавить здесь столько тарифов, сколько захотите, когда закончите, нажмите кнопку "Publish".

Отображение таблицы тарифов

Если вы щелкнете по пункту "All Pricing Tables", вы увидите таблицу, которую только что создали, а также шорткод в формате:

[ahm-pricing-table id=18]

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

[ahm-pricing-table id=18 template=green]
[ahm-pricing-table id=18 template=gray]

Создайте страницу и добавьте шорткод вот так:

Таблицы будут выглядеть примерно так.

Зеленая:

Серая:

Заключение

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

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

Источник: WPLift.com

Вам понравился материал?

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

7 комментариев

сначала новые
по рейтингу сначала новые по хронологии

Всем здравия!
Вопрос к знатокам.
Сайт на платформе woocommerce, в магазине присутствует категории товаров от шт до упаковки.
Вопрос: Как сделать так чтобы, эта таблица в карте товара предлагала, к примеру, купить упаковку 100 руб, купить ящик 10,000р, купить вагон 500,000. Проблема в том, как сделать или найти ссылку которая вставляется в Button url и при нажатии давала команду положить в корзину товар в количестве выбранном покупателем. Надеюсь суть вопроса будет понятна )

Прайс на английском языке? зачем он нужен?

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

А можно сменить цветовой фон? если я например хочу серый и черный
или только в коде нужно?

В стилях CSS можно изменить цвет на какой угодно.

Подскажите: как поменять значок/символ доллара на значение другой валюты?

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