Как создать popup для WooCommerce в WordPress

Popup-окна — отличный инструмент для увеличения конверсии в интернет-магазинах на WooCommerce. Однако создание эффективного popup, который не раздражает пользователя и при этом помогает продвигать товары, требует правильного подхода и технических навыков. В этой статье мы разберём, как создать popup для WooCommerce в WordPress с конкретными примерами и кодом.

Почему popup важен для WooCommerce

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

Задачи popup для WooCommerce

• Увеличение среднего чека за счёт перекрёстных продаж
• Сбор email для email-маркетинга
• Напоминание о брошенной корзине
• Информирование о специальных акциях и скидках

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

Выбор плагина для popup в WooCommerce

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

• My Popup — удобный и лёгкий плагин для создания разнообразных popup, поддерживает кастомизацию и интеграцию с WooCommerce.
• Clearfy Pro — оптимизация и управление сайтом с возможностью создания popups для маркетинговых целей.
• WPRemark — плагин для отзывов и popup, который можно адаптировать под WooCommerce.

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

Как создать popup для WooCommerce вручную: пример кода

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

Добавление скрипта и стилей для popup

function wppopup_enqueue_scripts() {
    if (is_woocommerce()) {
        wp_enqueue_style('wppopup-style', get_stylesheet_directory_uri() . '/css/wppopup.css');
        wp_enqueue_script('wppopup-script', get_stylesheet_directory_uri() . '/js/wppopup.js', array('jquery'), null, true);
        wp_localize_script('wppopup-script', 'wppopup_ajax', array('ajax_url' => admin_url('admin-ajax.php')));
    }
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_scripts');

Здесь мы подключаем CSS и JS для popup, а также передаём URL для AJAX-запросов.

HTML-код popup, который будет вставлен в футер

function wppopup_add_popup_html() {
    if (is_woocommerce()) {
        echo '<div id="wppopup-discount" style="display:none;">'
           . '<div class="wppopup-content">'
           . '<h2>Получите скидку 10% на следующий заказ!</h2>'
           . '<button id="wppopup-close">Закрыть</button>'
           . '</div></div>';
    }
}
add_action('wp_footer', 'wppopup_add_popup_html');

Этот код добавляет скрытый div с popup, который мы будем показывать через JavaScript.

AJAX-обработчик для отслеживания добавления товара в корзину

function wppopup_ajax_add_to_cart() {
    // Можно добавить логику, например, для записи в сессию или статистику
    wp_send_json_success();
}
add_action('wp_ajax_wppopup_add_to_cart', 'wppopup_ajax_add_to_cart');
add_action('wp_ajax_nopriv_wppopup_add_to_cart', 'wppopup_ajax_add_to_cart');

Этот обработчик может быть расширен в зависимости от задачи.

JavaScript для показа popup при добавлении товара

jQuery(document).ready(function($){
    $('body').on('added_to_cart', function(){
        $('#wppopup-discount').fadeIn();
    });
    $('#wppopup-close').on('click', function(){
        $('#wppopup-discount').fadeOut();
    });
});

Этот скрипт слушает событие WooCommerce 'added_to_cart' и показывает popup, а также закрывает его по кнопке.

Как настроить условия показа popup для WooCommerce

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

• Показывать popup после добавления товара в корзину или при переходе на страницу корзины
• Использовать cookie или localStorage для ограничения частоты показа
• Настроить показ только для определённых категорий товаров или пользователей (например, для гостей)

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

function wppopup_check_show() {
    if (isset($_COOKIE['wppopup_shown'])) {
        return false;
    }
    setcookie('wppopup_shown', '1', time() + DAY_IN_SECONDS, COOKIEPATH, COOKIE_DOMAIN);
    return true;
}

В JavaScript можно проверять наличие этой cookie и показывать popup только если её нет.

Заключение: интеграция popup в WooCommerce

Создание popup для WooCommerce — задача, требующая баланса между маркетингом и удобством пользователя. Вы можете использовать готовые плагины, такие как My Popup, или создавать собственные решения с помощью кода, как показано выше.

Обязательно тестируйте popup на разных устройствах и учитывайте аналитику для оптимизации конверсии. Такой подход поможет увеличить продажи и улучшить взаимодействие с клиентами на вашем WooCommerce сайте.