Как показать попап «Добавлено в корзину» в WooCommerce

Хотите настроить попап «Добавлено в корзину» в своем магазине WooCommerce? Эти всплывающие окна могут быть отличным способом улучшить качество покупок. Они дают возможность продвигать другие продукты, например, отображая предложения «Часто покупают вместе».

ВуКомерс не имеет встроенной функции для этого. Но с помощью подходящего плагина (о котором я расскажу в статье) возможно легко получить доступ к решению без кода для настройки всплывающего окна «Добавлено в корзину».

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

Для этого можете использовать плагин Merchant Pro. Давайте рассмотрим, как это работает.

Как работает попап «Добавлено в корзину»

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

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

Вот краткий обзор материалов, который возможно отображать (вы можете деактивировать контент, если не хотите его включать):

• Информация о продукте. У вас есть варианты для миниатюры товара, названия и цены, а также описания.
• Детали корзины. У вас есть варианты для общей суммы, стоимости доставки и суммы налога.
• Кнопки. Возможно отобразить вариации «Просмотреть корзину», «Продолжить покупки» и/или «Оформить заказ».
• Рекомендуемые продукты. Вы можете побудить пользователей купить больше, отображая вещи, которые связаны с товаром, который покупатель добавил в корзину. Возможно отображать связанные продукты, недавно просматриваемые, часто покупаемые вместе или предложения типа «Купи X, получи Y».

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

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

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

Merchant Pro — это не просто плагин для всплывающих окон «Добавлено в корзину». Это набор 40+ различных модульных функций. Их вы можете использовать для улучшения магазина и увеличения дохода.

Функция «Добавлено в корзину» — это один из модулей, но вы можете получить доступ к другим вариантам для таких вещей, как скидки в зависимости от количества, распродажи по всему магазину, предложения «Купи X, получи Y», наборы продуктов, часто покупаемые вместе товары и многое другое.

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

Как настроить попап WooCommerce «Добавлено в корзину»

Теперь, когда имеете общее представление о том, как работает функция попапа «Добавлено в корзину» в Merchant Pro, давайте перейдем к пошаговому руководству по конфигурации.

После покупки и установки расширения процесс настройки всплывающего окна займет всего несколько минут.

Приобретите, установите и активируйте Merchant Pro

Для начала нужно установить Merchant Pro на свой сайт WordPress/WooCommerce.

После покупки возможно скачать ZIP-файл расширения и установить его на сайт, как и любой другой плагин («Плагины» > «Добавить новый плагин» > «Загрузить плагин»).

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

Включите модуль попапа «Добавлено в корзину»

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

Для начала перейдите в раздел «Merchant» > «Дашборд». Выберите модуль «Добавлено в корзину». Он должен быть указан в разделе «Увеличить доход».

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

Конфигурируйте попап «Добавлено в корзину»

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

Давайте рассмотрим, как персонализировать различные параметры.

Макет и размер

Для начала можете выбрать из 3 готовых к работе макетов для попапа.

Ниже возможно кастомизировать ширину попапа (в пикселях) с помощью поля «Размер всплывающего окна» (позже вы также сможете конфигурировать цвета и размеры шрифтов).

Контент

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

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

• Миниатюра.
• Название и цена.
• Описание (если включено, вы также можете установить максимальную длину).

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

• Общая стоимость корзины.
• Стоимость доставки.
• Сумма налога.

Возможно отображать некоторые или все из следующих опций:

• Кнопка «Просмотреть корзину».
• Вариант «Продолжить покупки».
• Кнопка «Оформить заказ».

Наконец, вы можете решить, отображать ли в попапе рекомендуемые продукты. Если включите эту опцию, то сможете выбрать из 4 типов рекомендуемых товаров:

• Связанные товары по умолчанию из ВуКомерс.
• Недавно просматриваемые продукты. Эта функция реализована с помощью модуля «Недавно просматриваемые товары» Merchant. Она показывает другие товары, которые пользователь просматривал во время посещения сайта.
• Часто покупаемые вместе товары. Эта функция реализована с помощью модуля «Часто покупаемые вместе» Merchant. Он позволяет продвигать другие продукты, которые хорошо сочетаются, аналогично тому, как эта функция работает на Amazon. Например, если пользователь покупает солнцезащитные очки, вы можете показать чехол для них.
• Купи X, получи Y товаров. Например, вы можете сообщить пользователям, что при покупке 3 продуктов они могут получить скидку 25% на другую вещь.

Условия отображения (по продукту, странице или устройству просмотра покупателя)

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

• Исключения продуктов. Вы можете исключить определенные товары или категории из отображения попапа. То есть, если покупатель нажмет «Добавить в корзину» на одном из исключенных продуктов, всплывающее окно не отобразится. Вы можете конфигурировать это, активировав переключатель «Список исключений».
• Таргетинг по странице. Вы можете отображать попап только в том случае, если пользователь добавляет товар в корзину с определенного типа страницы. У вас есть 3 различных переключателя: «Домашняя страница», «Один товар» и «Архив товаров». Например, можете показать попап, когда кто-то добавляет продукт в корзину с отдельной страницы, но не отображать его, если он добавляется в корзину с главной.
• Таргетинг по устройствам пользователей. Из-за различий в пользовательском опыте вы можете захотеть показывать попап только пользователям определенных типов устройств. С помощью переключателя «Показывать на устройствах» вы можете выбрать, показывать ли попап всем покупателям, только людям, использующим десктопы, или только покупателям, использующим мобильные устройства.

Цвета и дизайн

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

Эти кастомизации возможно выполнить в разделе «Внешний вид».

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

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

Протестируйте попап

На этом этапе попап «Добавлено в корзину» должен быть доступен в магазине.

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

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

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

Если все работает так, как хотите, то все готово.

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

Заключение

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

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