Как добавить блок бесплатной доставки в WooCommerce - webOK - Бесплатная биржа фриланса, онлайн-школа, складчина.

Как добавить блок бесплатной доставки в WooCommerce

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

Добавление блока бесплатной доставки в WooCommmerce

Как добавить блок бесплатной доставки в WooCommerce

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

Ниже приведен пример блока бесплатной доставки. Он остается в верхней части экрана даже при прокрутке веб-страницы вниз.

Как добавить блок бесплатной доставки в WooCommerce

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

Создание учетной записи OptinMonster и подключение WordPress

Сначала перейдите на официальный сайт OptinMonster и создайте учетную запись. Затем установите и активируйте бесплатный плагин OptinMonster для WordPress.

Этот плагин соединяет сервис OptinMonster с вашим WordPress-сайтом. После его активации перейдите в меню OptinMonster в панели инструментов WordPress. Затем нажмите на кнопку Connect Your Account и подключитесь к своей учетной записи OptinMonster.

Как добавить блок бесплатной доставки в WooCommerce

Создание блока бесплатной доставки для WooCommerce

Сначала перейдите на страницу OptinMonster в панели инструментов WordPress, а затем нажмите на кнопку Create New Campaign.

Как добавить блок бесплатной доставки в WooCommerce

После этого в качестве типа кампании выберите вариант Floating Bar.

Как добавить блок бесплатной доставки в WooCommerce

Далее прокрутите страницу вниз и выберите шаблон кампании. В данном случае мы исползаем шаблон Alert. Наведите на него курсор мыши и нажмите кнопку Use Template.

Как добавить блок бесплатной доставки в WooCommerce

Плагин OptinMonster предложит название создаваемой кампании. Но вы можете использовать собственный вариант.

Как добавить блок бесплатной доставки в WooCommerce

Затем выберите, на каких сайтах необходимо запустить кампанию и нажмите кнопку Start Building. После этого вы увидите пользовательский интерфейс конструктора OptinMonster.

Как добавить блок бесплатной доставки в WooCommerce

По умолчанию плавающая панель будет прикреплена к нижней части экрана. Чтобы она располагалась вверху экрана, перейдите в раздел Floating Settings. Затем активируйте вариант Load Floating Bar at Top of Page.

Как добавить блок бесплатной доставки в WooCommerce

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

Как добавить блок бесплатной доставки в WooCommerce

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

Как добавить блок бесплатной доставки в WooCommerce

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

Как добавить блок бесплатной доставки в WooCommerce

Чтобы направить клиентов на страницу с информацией о бесплатной доставке, перейдите на вкладку Action. Затем введите URL-адрес перенаправления.

Как добавить блок бесплатной доставки в WooCommerce

Чтобы изменить цвет панели бесплатной доставки, нажмите кнопку Home.

Как добавить блок бесплатной доставки в WooCommerce

Затем перейдите к настройкам Optin Settings> Optin View Styles.

Как добавить блок бесплатной доставки в WooCommerce

После этого кликните по полю Background Color и введите шестнадцатеричный код цвета.

Как добавить блок бесплатной доставки в WooCommerce

Нажмите кнопку Save, расположенную в правом верхнем углу.

Как добавить блок бесплатной доставки в WooCommerce

Далее нужно задать правила отображения панель бесплатной доставки на вашем сайте. Для этого перейдите на вкладку Display Rules.

Как добавить блок бесплатной доставки в WooCommerce

По умолчанию OptinMonster выводит плавающую панель после 5 секунд пребывания пользователя на любой странице WordPress-сайта. Чтобы этот блок загружался сразу, удалите стандартное правило. Для этого нажмите на значок «минус», расположенный с правой стороны:

Как добавить блок бесплатной доставки в WooCommerce

Теперь у вас должно остаться правило Current URL path is any page.

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

Как добавить блок бесплатной доставки в WooCommerce

Чтобы разместить панель бесплатной доставки на своем WordPress-сайте, перейдите на страницу OptinMonster> Campaigns в панели инструментов WordPress. Затем нажмите кнопку Refresh Campaigns, чтобы увидеть список доступных кампаний.

Как добавить блок бесплатной доставки в WooCommerce

Теперь зайдите на свой WordPress-сайт и посмотрите панель бесплатной доставки в режиме реального времени.

Как добавить блок бесплатной доставки в WooCommerce

Мы надеемся, что эта статья помогла вам добавить блок бесплатной доставки в WooCommerce.

Один комментарий к “Как добавить блок бесплатной доставки в WooCommerce

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *